File: D:/HostingSpaces/slenders/slenders.nl/resources/sass/site/5-Components/_components.mmh.scss
.c-mmh{
//@include flex(flex-end, stretch);
background-color: palette(secondary, 100);
@include mq($max: 460) {
width: calc(100% + 80px);
margin-left: -40px;
}
}
.c-mmh__image {
background-color: palette(neutral, 100);
img {
width: 100%;
}
}
.c-mmh__main {
background-color: palette(primary);
}
.c-mmh__content {
padding: 45px 40px 40px;
background-color: palette(secondary, 100);
@include mq(500) { padding: 45px 60px 40px; }
@include mq(1400) { padding: 65px column(1, 6.5) 60px; }
}
.c-mmh__title {
text-transform: uppercase;
@include font-size(large);
@include mq(1200){ @include font-size(x2-large); }
@include mq(1525){ @include font-size(44); }
}
.c-mmh__month {
display: inline-block;
margin-top: 20px;
@include font(mid-large, 32);
}
.c-mmh__text {
margin-top: 30px;
}
.c-mmh__price {
margin-top: 30px;
}
.c-mmh__cta {
padding: 30px 40px 40px;
@include mq(500) { padding: 30px 60px 40px; }
@include mq(1400) { padding: 30px column(1, 6.5) 40px; }
}
.c-mmh__cta-title {
@include font(mid-large, 32, medium);
color: palette(secondary, 100);
}
.c-mmh__cta-button {
margin-top: 30px;
}
@include mq(1000) {
.c-mmh{
@include flex(flex-end, stretch);
}
//.c-mmh__image-link {
// width: column(5.5, 12);
//}
.c-mmh__image {
width: column(5.5, 12);
img {
height: 100%;
object-fit: cover;
}
}
.c-mmh__main {
width: column(6.5, 12);
}
}