/**
  * Image grid component
 */

.block-image-grid {
  > h2 {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
  }

  .grid {
    display: grid;
    gap: var(--spacing-sm);

    @media (width >= 576px) {
      grid-template-columns: 1fr 1fr;
    }
    @media (width >= 992px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
    @media (width >= 1440px) {
      margin-left: -90px;
      margin-right: -90px;
    }

    .item {
      margin-bottom: 0;

      @media (width >= 992px) {
        &:first-child,
        &:nth-child(4) {
          grid-row: 1 / span 2;

          .image-wrapper img {
            width: auto;
            height: 100%;
          }
        }

        &:first-child {
          grid-column: 1;
        }

        &:nth-child(2) {
          grid-column: 2;
        }

        &:nth-child(3) {
          grid-column: 2;
          grid-row: 2;
        }

        &:nth-child(4) {
          grid-column: 3;
        }
      }
    }

    .figure {
      position: relative;

      .heading {
        color: var(--white);
        font-size: var(--heading-h4-font-size);
        line-height: var(--heading-line-height);
        display: grid;
        align-content: end;
        position: absolute;
        inset: 0;
        width: 100%;
        padding: var(--spacing-xl) var(--spacing-3xl);
        margin: 0;
        z-index: 10;

        a {
          color: currentcolor;
          text-decoration: none;

          span {
            text-shadow: var(--text-shadow);
          }

          &::before {
            content: '';
            position: absolute;
            inset: 0;
          }
        }
      }

      .image-wrapper {
        height: 100%;
        overflow: hidden;

        &::after {
          content: '';
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.70) 100%);
          border-radius: var(--image-radius);
          display: block;
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
        }

        img {
          transition: transform var(--transition);
          object-fit: cover;
          will-change: transform;
          transform: scale(1);
        }
      }

      &:has(a:hover),
      &:has(:focus-within) {
        img {
          transform: scale(1.025);
        }
      }
    }
  }
}