.article-image {
position: relative;
}
.article-image img {
height: 100%;
width:100%;
}
.preview-gallery {
position: relative;
}
.preview-gallery .preview-gallery-main img:hover {
cursor: zoom-in;
filter: saturate(0);
}
.preview-gallery img {
border-radius: 7px;
}
.article-image.gallery img.gallery-main-image { aspect-ratio: 16/9;
object-fit:cover;
border-radius:15px;
}
.gallery-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #34332f;
z-index: 10000;
}
.gallery-popup-content {
margin: 0% auto;
padding: 0px;
width: 100%;
text-align: center;
height:100%!important;
}
.popupCloseBtn svg *, .gallery-popup .slider__next svg *, 
.gallery-popup .slider__prev svg *{
fill:#fff;
}
.close.popupCloseBtn {
position: relative;
color: white!important;
font-size: 1.875rem;
cursor: pointer;
}
.close.popupCloseBtn:hover svg *{
fill:#478087!important;
}
.thumbSwiper {
width: 100%;
height: 90vh!important;
box-sizing: border-box;
padding: 10px 0;
}
.thumbSwiper .swiper-slide {
width: 96%;
opacity: 0.4;
}
.thumbSwiper .swiper-slide img{
border: 5px solid transparent;
}
.thumbSwiper .swiper-slide-thumb-active {
opacity: 1;
}
.thumbSwiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mainSwiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
max-height: 80vh;
}
.mainSwiper .swiper-wrapper {
align-items: center;
}
.swiper-button-next:after, .swiper-button-prev:after {
color:white!important;
font-size: 1.25rem;
}
.swiper-button-prev, .swiper-button-next {
position: relative;
top: 0!important;
margin-top: 0px!important;
}
.swiper-button-prev:hover:after, .swiper-button-next:hover:after {
color: #477F87!important;
}
.close-button-container {
text-align:end!important;
}
.slider-alt-text, .slider-counter {
color:white;
}
.slider-counter {
color: #959595!important;
}
.thumbnail-swiper-container {
background-color: #4e4c47;
padding: 0px 40px;
}
.thumbSwiper .swiper-slide-thumb-active img {
border:5px solid white;
}
.thumbnail-swiper-wrapper {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
display: none!important;
}
.gallery-size {
position: absolute;
display: flex;
right: 20px;
bottom: 30px;
background-color: #FAF9F6;
border-radius: 15px;
padding: 12px 17px;
justify-content: space-between;
align-items: center;
gap: 15px;
font-family: "Lab Grotesque", serif;
font-weight: 700;
z-index: 100;
}
.preview-swiper-btn {
position: absolute;
z-index: 100;
top: 35%;
padding: 8px 12px;
background-color: #FAF9F6;
display: block;
position: absolute;
color: white;
border: 1px solid #e3e1dc;
border-radius: 16px;
cursor: pointer;
}
.preview-swiper-btn:hover {
background-color: #dfddd7!important;
}
.preview-swiper-button-prev {
left: 20px;
}
.preview-swiper-button-next {
right: 20px;
}
.vc-gallery-thumbnails-wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
gap: 10px;
margin-top: 5px;
}
.vc-gallery-thumbnails-wrapper 
.vc-gallery-thumbnail-container {
display: flex;
flex: 1;
}
.vc-gallery-thumbnails-wrapper 
.vc-gallery-thumbnail-container
.vc-gallery-thumbnail{
display: block;
width: 100%;
object-fit: cover;
max-height:200px;
}
@media only screen and (max-width: 1200px) {
.gallery-popup-content {
align-items: center;
display: flex;
}
.mainSwiper .swiper-wrapper {
align-items: center;
}
.gallery-size {
right: 20px;
bottom: 20px;
}
.article-image.gallery img.gallery-main-image {
height: 100%!important;
}
.vc-gallery-thumbnails-wrapper 
.vc-gallery-thumbnail-container
.vc-gallery-thumbnail{
display: block;
width: 100%;
object-fit: cover;
max-height:100px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1800px) {
.gallery-popup-content .col-xxl-10 {
width: 80%!important;
}
.gallery-popup-content .col-xxl-2 {
width: 20%!important;
}
}