.section {
  .carosello {
    display: grid;
    &[data-alignment="right"] {
      grid-template-columns: 1fr 2fr;
    }
    &[data-alignment="left"] {
      grid-template-columns: 2fr 1fr;
      .right-content {
        order: -1;
      }
      .left-content {
        padding: var(--spacing-xl) var(--spacing-side) var(--spacing-xl)
          var(--spacing-md);
      }
    }

    @media screen and (max-width: 64rem) {
      grid-template-rows: auto auto !important;
      grid-template-columns: 1fr !important;
    }

    .left-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--fiandre-gradient-2);
      padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xl)
        var(--spacing-side);
      gap: var(--spacing-xxl);
      /* max-width: calc(100dvw / 2); */

      @media screen and (max-width: 64rem) {
        padding: var(--spacing-xl) var(--spacing-side);
        max-width: unset;
      }

      .tag-content {
        display: flex;
        justify-content: space-between;
      }
      .text-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        & h2 {
          max-width: 20rem;
        }
      }
    }
    .right-content {
      position: relative;
      width: 100%;
      overflow: hidden;

      @media screen and (max-width: 48rem) {
        order: -1;
      }
      .carosello-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }
      .carosello-swiper {
        width: 100%;
        height: 100%;
        .carosello-swiper-wrapper {
          cursor: grab;
          &:active {
            cursor: grabbing;
          }
          .carosello-swiper-slide {
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .carosello-swiper-button-wrapper {
          position: absolute;
          bottom: 5%;
          z-index: 1;
          right: 5%;
          display: flex;
          width: fit-content;
          gap: var(--spacing-md);
          cursor: pointer;
          @media screen and (max-width: 48rem) {
            display: none;
          }
          .carosello-swiper-button-prev {
            all: unset;
            position: relative;
            transform: scale(1.25);
            transition: all 0.3s ease-in-out;
            &:hover {
              transform: scale(1.5);
            }
            &::after {
              all: unset;
            }
          }
          .carosello-swiper-button-next {
            all: unset;
            position: relative;
            transform: scale(1.25);
            transition: all 0.3s ease-in-out;
            &:hover {
              transform: scale(1.5);
            }
            &::after {
              all: unset;
            }
          }
        }
      }
    }
  }
}