diff --git a/dev/styles/main/contentElements/heroImage.less b/dev/styles/main/contentElements/heroImage.less index c88cfa3..47eee40 100644 --- a/dev/styles/main/contentElements/heroImage.less +++ b/dev/styles/main/contentElements/heroImage.less @@ -2,7 +2,8 @@ // HERO IMAGE ----------------------------------// //--------------------------------------------------// .hero-image{ - overflow: auto; + position: relative; + overflow: hidden; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; @@ -12,27 +13,54 @@ .hero-image__caption-wrp._left-align{ text-align: left; } -.hero-image__caption-wrp._left-align .hero-image__caption{ +.hero-image__caption-wrp._left-align._vertical-top-align .hero-image__caption{ float: left; } +.hero-image__caption-wrp._left-align._vertical-center-align .hero-image__caption{ + left: 0; +} +.hero-image__caption-wrp._left-align._vertical-bottom-align .hero-image__caption{ + left: 0; +} .hero-image__caption-wrp._center-align{ text-align: center; } -.hero-image__caption-wrp._center-align .hero-image__caption{ - margin: auto; +.hero-image__caption-wrp._center-align._vertical-center-align .hero-image__caption{ + left: 0; + right: 0; +} +.hero-image__caption-wrp._center-align._vertical-bottom-align .hero-image__caption{ + left: 0; + right: 0; } .hero-image__caption-wrp._right-align{ text-align: right; } -.hero-image__caption-wrp._right-align .hero-image__caption{ +.hero-image__caption-wrp._right-align._vertical-top-align .hero-image__caption{ float: right; } +.hero-image__caption-wrp._right-align._vertical-center-align .hero-image__caption{ + right: 0; +} +.hero-image__caption-wrp._right-align._vertical-bottom-align .hero-image__caption{ + right: 0; +} .hero-image__caption{ padding: 20px 60px; color: @main-body-bg; - overflow: hidden; + // overflow: hidden; + max-height: 100%; -webkit-font-smoothing: antialiased; } +.hero-image__caption-wrp._vertical-center-align .hero-image__caption{ + position: absolute; + top: 50%; + transform: translate3D(0, -50%, 0); +} +.hero-image__caption-wrp._vertical-bottom-align .hero-image__caption{ + position: absolute; + bottom: 0; +} .hero-image__caption .hero-image__caption-header{ color: @main-body-bg; font-style: normal; @@ -58,6 +86,11 @@ .slider-container._full-width .swiper-slide-next .hero-image__caption > *{ transition: none; } +@media(max-width: 991px) { + .hero-image__caption{ + max-width: 100%; + } +} @media(min-width: 992px){ .slider-container._full-width .swiper-button-next, .slider-container._full-width .swiper-button-prev{