.section.sezione-con-due-immagini {
  background-color: var(--beige-section-background);

  .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    padding: var(--section-padding-desktop);
    column-gap: var(--spacing-xxxxl);
    margin: 0 auto;
    max-width: var(--max-section-grid-width);

    @media screen and (max-width: 64rem) {
      padding: var(--section-padding-mobile);
      column-gap: unset;
      row-gap: var(--spacing-lg);
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, auto);
    }
  }

  .left-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    @media screen and (max-width: 64rem) {
      aspect-ratio: 1;
      max-height: 28rem;
    }

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

  .right-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: var(--spacing-xxxxl);
    z-index: 1;
    justify-content: space-between;

    .text-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
    }
    .text-wrapper .paragraph-sm {
      max-width: 300px;
      margin: 0;
      word-wrap: break-word;
    }

    .bottom-wrapper {
      position: relative;
      display: flex;
      width: 100%;
      align-items: center;
      margin-block-start: 15%;

      .cta {
        max-width: 55%;
      }

      .right-image {
        position: absolute;
        width: fit-content;
        max-width: 45%;
        right: 0;
        aspect-ratio: 2/3;
        max-height: 18rem;
        transform-origin: center right;

        @media screen and (max-width: 48rem) {
          margin-block-end: 2rem;
          max-height: 15rem;
        }
      }
    }
  }
}