:root {
  /* Layout constants */
  --square: 1;
  --potrait: 3/4;
  --landscape: 4/3;

  --grid-gap: 0.5rem;
  --mobile-padding: 1.5rem;
}

.section.composizione-immagini-e-testo-centro {
  padding: var(--section-padding-desktop);
  max-width: var(--max-section-grid-width);
  margin-inline: auto;

  @media screen and (max-width: 64rem) {
    padding: var(--section-padding-mobile);
    padding-inline: 0;
    padding-block: 5.5rem 3.5rem;
  }

  .content {
    display: grid;
    position: relative;
    width: 100%;
    @media screen and (max-width: 64rem) {
      grid-template-areas: 'text' 'image';
      grid-template-rows: auto auto;
      grid-template-columns: 1fr;
    }
    @media screen and (min-width: 64rem) {
      grid-template-areas:
        'img1 img2 img3'
        'img4 txt img5'
        'img6 img7 img8';
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
      column-gap: var(--grid-gap);
    }
  }

  .text {
    grid-area: txt;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media screen and (max-width: 64rem) {
      grid-area: unset;
      padding-block-start: 65%;
      width: 100%;
      justify-content: flex-end;
    }

    h2 {
      position: absolute;
      top: 30%;
      width: 100%;
      text-align: center;
      font-size: clamp(60px, 8vw, 120px) !important;
      font-weight: 400 !important;
      left: 0;

      @media screen and (max-width: 64rem) {
        position: static;
        text-align: initial;
        letter-spacing: -1.817px;
      }
    }

    p {
      text-align: center;
      @media screen and (max-width: 64rem) {
        text-align: left;
      }
    }

    .col {
      z-index: 1;
      @media screen and (max-width: 64rem) {
        padding-inline: var(--spacing-side-mobile);
      }

      @media screen and (min-width: 64rem) {
        &:has(.button-outline) {
          margin-inline: auto;
        }
      }

      &:has(p) {
        padding-block-start: 30%;
        @media screen and (max-width: 64rem) {
          padding-block-start: unset;
        }
      }

      > .button-outline {
        width: fit-content;
      }
    }
  }

  .images {
    @media screen and (max-width: 64rem) {
      aspect-ratio: 10/18;
      display: block;
    }

    @media screen and (min-width: 64rem) {
      display: contents;
      width: 100%;
    }

    .image {
      margin: 0;
      padding: 0;
      position: absolute;
      width: 45%; /* era var(--image-width-large) */
      display: flex;
      flex-direction: column;
      justify-content: center;
      @media screen and (min-width: 64rem) {
        position: static;
        margin: auto;
        padding: 4rem;
        width: 100%;
      }

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

      &[data-position='1'] {
        grid-area: img1;
        aspect-ratio: var(--square);
        @media screen and (max-width: 64rem) {
          grid-area: text;
          top: 22%;
          left: 0;
        }
      }

      &[data-position='2'] {
        grid-area: img2;
        aspect-ratio: var(--potrait);
        @media screen and (max-width: 64rem) {
          grid-area: text;
          top: -10%;
          right: 0;
        }
      }

      &[data-position='3'] {
        grid-area: img3;
        aspect-ratio: var(--portrait);
        @media screen and (max-width: 64rem) {
          display: none;
          top: 0;
          left: 0;
        }
      }

      &[data-position='4'] {
        grid-area: img4;
        aspect-ratio: var(--portrait);
        @media screen and (max-width: 64rem) {
          grid-area: image;
          top: 5%;
          left: 0;
          aspect-ratio: 2/4;
        }
      }

      &[data-position='5'] {
        grid-area: img5;
        aspect-ratio: var(--portrait);
        @media screen and (max-width: 64rem) {
          grid-area: image;
          top: 0;
          right: 0;
          width: 36%;
          aspect-ratio: 2/4;

          img {
            object-position: left;
          }
        }
      }

      &[data-position='6'] {
        grid-area: img6;
        aspect-ratio: var(--landscape);
        @media screen and (max-width: 64rem) {
          grid-area: image;
          bottom: 0;
          left: 0;
          right: 0;
          margin-inline: auto;
          width: 50%;
          aspect-ratio: var(--square);
        }
      }

      &[data-position='7'] {
        grid-area: img7;
        aspect-ratio: var(--portrait);
        @media screen and (max-width: 64rem) {
          display: none;
          top: 66%;
          left: 0;
        }
      }

      &[data-position='8'] {
        grid-area: img8;
        aspect-ratio: var(--square);
        @media screen and (max-width: 64rem) {
          grid-area: image;
          top: 43%;
          right: 0;
        }
      }
    }
  }
}