/**
  * Gallery component
 */

.block-image-gallery-wall {
  position: relative;

  @media screen and (min-width: 960px) {
    h2 {
      margin-bottom: 0;
    }
  }
}

.image-gallery-container {
  @media screen and (min-width: 960px) {
    margin-bottom: 0 !important;
    height: 200vh !important;

    .img-content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translate3d(-50%, -22%, 0);
    }
  }

  .scroll-img {
    top: 0 !important;

    figure {
      aspect-ratio: 89 / 50;

      img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
      }
    }

    @media screen and (min-width: 960px) {
      .img-container {
        position: relative;
        transform-origin: top center;  /* Scale from the top */
        height: 100vh;
      }

      figure {
        position: absolute;

        img {
          height: calc(100% - 60px);
          width: calc(100% - 60px);
          margin: 30px;
          object-fit: cover;
          display: block;
        }
      }

      .image-1 {
        width: 33.333%;
        height: 33.333%;
        top: 23.3333%;
        left: 33.3333%;
      }

      .image-2 {
        width: 25%;
        height: 25%;
        top: 15%;
        left: 8.333%;
      }

      .image-3 {
        width: 16.666%;
        height: 33.333%;
        top: 40%;
        left: 16.666%;
      }

      .image-4 {
        width: 16.6666%;
        height: 33.3333%;
        top: 56.666%;
        left: 33.3333%;
      }

      .image-5 {
        width: 16.6666%;
        height: 16.6666%;
        top: 56.6666%;
        left: 50%;
      }

      .image-6 {
        width: 25%;
        height: 33.333%;
        top: 46%;
        left: 66.666%;
      }

      .image-7 {
        width: 16.666%;
        height: 33.333%;
        top: 12.666%;
        left: 66.6666%;
      }

      .image-with-opacity {
        opacity: 0;

        @media screen and (max-width: 1820px) {
          opacity: 1 !important;
        }
      }
    }
  }
}