#main-slider img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    #thumbnail-slider .splide__slide {
      opacity: 1;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    #thumbnail-slider .is-active {
      opacity: .5;
      border: 2px solid #333;
    }

    @media (max-width: 768px) {
      #thumbnail-slider .splide__track {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      #thumbnail-slider .splide__list {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        width: 100%;
      }

      #thumbnail-slider .splide__slide {
        flex: 0 0 calc(33.333% - 10px);
        height: auto;
        margin-bottom: 10px;
      }
    }

    #main-slider .splide__slide.is-active img {
      animation: zoomFade 1s ease forwards;
    }

    @keyframes zoomFade {
      0% {
        opacity: 0;
        transform: scale(1.1);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }