.section.griglia-contenuti-con-testo-colonne {
  display: grid;
  grid-template-columns: 1fr;
  &.grey {
    background-color: rgba(174, 183, 192, 0.33);
  }
  .content {
    display: grid;
    grid-template-rows: repeat(3, auto);
    padding: var(--section-padding-desktop);
    gap: var(--spacing-xxl);
    max-width: var(--max-section-grid-width);
    margin: 0 auto;
    @media screen and (max-width: 48rem) {
      padding: unset;
      gap: var(--spacing-lg);
    }
    .top-section {
      display: flex;
      gap: var(--spacing-md);
      @media screen and (max-width: 64rem) {
        flex-direction: column;
        gap: var(--spacing-lg);
      }

      &.align-left-layout {
        align-items: center; /* Centra verticalmente i contenuti */
        gap: var(
          --spacing-xxxxl
        ); /* Aumenta lo spazio orizzontale tra immagine e testo */

        .left-content {
          justify-content: center; /* Centra verticalmente il contenuto testuale */
        }
      }

      .left-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        width: 40%;
        @media screen and (max-width: 64rem) {
          width: 100%;
          padding: var(--section-padding-mobile);
          padding-block: unset;
        }
        .cta {
          margin-block-start: var(--spacing-md);
        }
      }
      .right-content {
        display: flex;
        flex-direction: column;
        width: 60%;
        @media screen and (max-width: 64rem) {
          min-height: 23rem;
          width: 100%;
          order: -1;
        }
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
    .divider {
      width: 100%;
      height: 1px;
      background-color: var(--divider);
      @media screen and (max-width: 64rem) {
        width: calc(100% - (var(--spacing-side) / 2));
        margin-inline: auto;
      }
    }
    .bottom-section {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-xxl);
      @media screen and (max-width: 64rem) {
        flex-direction: column;
        padding: var(--section-padding-mobile);
        padding-block-start: unset;
        gap: var(--spacing-lg);
      }
      .col {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        .bottom-cta {
          margin-block-start: auto;
        }
      }
    }
  }
}