/**
  * Image grid component
 */

.block-image-grid {
  @media (min-width: 550px) {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .col {
    transition: .5s var(--transition-easing) .25s;
    position: relative;
    opacity: 0;
    padding: 0 calc(var(--bs-gutter-x) * 1.25) calc(var(--bs-gutter-x) * 1.5);

    @media (max-width: 1280px) {
      display: flex;
      flex-wrap: wrap;
      flex: auto;
      width: 50%;
      max-width: 50%
    }

    @media (max-width: 540px) {
      width: 100%;
      max-width: 100%;
    }
  }

  &.is-in-viewport {
    .col {
      opacity: 1;

      @media (min-width: 540px) {
        &:nth-child(1) {
          transform: translate3d(0, 0, 0);
        }

        &:nth-child(2) {
          transform: translate3d(0, 180px, 0);
        }

        &:nth-child(3) {
          transform: translate3d(0, 90px, 0);
        }

        &:nth-child(4) {
          transform: translate3d(0, 45px, 0);
        }
      }
    }

    .even-number .col {
      @media (min-width: 540px) {
        &:nth-child(1) {
          transform: translate3d(0, 90px, 0);
        }

        &:nth-child(2) {
          transform: translate3d(0, 0, 0);
        }

        &:nth-child(3) {
          transform: translate3d(0, 180px, 0);
        }

        &:nth-child(4) {
          transform: translate3d(0, 45px, 0);
        }
      }

      @media (min-width: 1280px) {
        &:nth-child(2) {
          transform: translate3d(0, 45%, 0);
        }
      }
    }
  }

  .image-grid-item {
    color: var(--white);
    text-decoration: none;
    margin-bottom: calc(var(--spacing) * 1.5);

    @media (max-width: 550px) {
      padding-bottom: 0;
    }
  }

  .image {
    display: block;
    aspect-ratio: 1 / 1;

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

  caption {
    font-size: var(--font-size-20);
  }
}

/* Exception for the grid */
.section {
  &:not(.one-column):not(.one-column-narrow) {
    .block-image-grid {
      @media (max-width: 1400px) {
        padding-bottom: 48px;
      }

      @media (max-width: 540px) {
        padding-bottom: 0;
      }
    }
  }

  &.section.three-columns {
    .block-image-grid {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
}