.gallery-block .thumbnail { opacity: 0.5; transition: 180ms ease-in-out; } .gallery-block .thumbnail.active { opacity: 1; transition: 180ms ease-in-out; } .gallery-block .tab-button { box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03); background: #fff; font-weight: 500; font-size: 18px; line-height: 195%; color: #222; } .gallery-block .tab-button.active { font-size: 18px; line-height: 195%; color: #f8f8f8; box-shadow: none; background: linear-gradient(90deg, #9d9994 39.42%, #ccc9c4 92.9%); } @media (max-width: 767px) { .gallery-block .tab-button{ font-size: 15px!important; } } .dark .gallery-block .tab-button.active { background: linear-gradient(90deg, #2b2c35 39.42%, #6e7996 92.9%); color: #f8f8f8; } .gallery-block .swiper-slide img { transition: opacity 180ms ease-in-out; } .gallery-block .swiper-slide img[loading="lazy"] { opacity: 0; } .gallery-block .swiper-slide img[loading="lazy"].loaded, .gallery-block .swiper-slide img:not([loading="lazy"]) { opacity: 1; } .gallery-block .thumbnail:not(.active) { opacity: 0.6; transition: opacity 180ms ease-in-out; } .gallery-block .thumbnail.active { opacity: 1; }