full

template-parts/la-components/blocks/gallery-tabs/gallery-tabs.css

@@ -0,0 +1,55 @@
+.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%);
+}
+.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;
+}
+