File: D:/HostingSpaces/slenders/slenders.nl/resources/sass/site/5-Components/_components.mmhCard.scss
$mmhCtaBp: 575;
.c-mmh-cta {
position: relative;
text-decoration: none;
@include mq($mmhCtaBp) {
max-width: 600px;
padding-left: 240px;
}
}
.c-mmh-cta__image {
display: block;
background-color: palette(neutral, 100);
img {
width: 100%;
}
@include mq($mmhCtaBp) {
position: absolute;
left: 0;
top: 0;
width: 240px;
height: calc(100% - 85px);
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
.c-mmh-cta__main {
padding: 45px 40px 35px;
background-color: palette(secondary, 100);
transition: background-color 0.3s;
}
.c-mmh-cta__scroll-down {}
.c-mmh-cta__heading,
.c-mmh-cta__title {
color: palette(primary, 700);
margin-bottom: 15px;
}
.c-mmh-cta__heading {
@include font(mid, 26, extra-bold);
text-transform: uppercase;
}
.c-mmh-cta__title {
@include font(mid, 26);
}
.c-mmh-cta__price {
@include font(mid, 26, semi-bold);
color: palette(primary, 700);
}
.c-mmh-cta:hover {
.c-scroll-down__arrow {
transform: translateY(6px);
}
.c-mmh-cta__main {
background-color: mix(palette(primary), palette(secondary, 100), 15%);
}
}
.c-mmh-cta__scroll-down-text {
font-size: 1.25rem !important;
line-height: 1.3 !important;
justify-content: flex-start !important;
padding: 0 40px;
}