@import 'base';
.content-section {
padding-top: 0.1px; margin-top: $navHeightMobile; @include desktop { margin-top: $navHeight; }
}
.hero-carousel-wrapper, .hero-carousel-item, hero-carousel {
@include desktop { height: 340px; }
}
.hero-carousel-item-width {
max-width: 1400px; margin: 0 auto; position: relative; height: 100%;
}
.hero-carousel-item {
background-size: cover; background-position: center top; position: relative;
}
a.hero-caorousel-item-link:hover {
text-decoration: none;
}
.hero-carousel-copy-title {
line-height: 38px; @include desktop { line-height: 56px; }
}
.hero-carousel-copy-description {
font-size: 18px; font-weight: bold; color: $font-color-primary; @include desktop { line-height: 28px; font-size: 21px; font-weight: normal; } h1, h2, h3, h4, h5 { color: inherit; }
}
.hero-carousel-copy-link {
font-size: 16px; font-weight: bold; line-height: 25px; color: $link-color; &:hover { color: $link-color-hover; } @include desktop { font-size: 16px; font-weight: normal; }
}
.hero-carousel-item–left-aligned-copy {
.hero-carousel-copy { text-align: center; max-width: 480px; @include mobile-only { margin: 24px auto 16px; } @include desktop { max-width: 100%; text-align: left; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0; } } .hero-carousel-productImgWrapper { @include mobile-only { margin: 0 auto; width: 240px; height: 170px; } @include desktop { width: 480px; height: 340px; } }
}
hero-carousel .owl-dots {
@include desktop { @include hero-owl-dots }
}
@media screen and (max-width: $convertToMobileBreakpoint) {
.hero-carousel-wrapper, .hero-carousel-item, .hero-carousel-item-z-controller, #hero-carousel { height: 340px; .row { position: static; } .h1, h1 { font-size: 28px; font-weight: 300; line-height: 32px; } .h2, h2 { font-size: 24px; font-weight: 400; line-height: 28px; } .h3, h3 { font-size: 21px; font-weight: 400; line-height: 25px; } .h4, h4 { font-size: 18px; font-weight: 300; line-height: 20px; } } .hero-carousel-productImgWrapper { overflow: hidden; position: absolute; margin: auto; bottom: 0; left: 0; right: 0; } .hero-carousel-copy { margin-top: 24px; } .hero-carousel-copy-title { margin-bottom: 8px; padding: 0; } .hero-carousel-copy-description, .hero-carousel-copy-description p{ font-size: 14px; }
}