.main {

  .section__carousel {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: blue; */
    border-radius: var(--radio-borde);
    overflow: hidden;

    .wrapper {
      /* background-color: azure; */
      
      position: relative;
      /* background-color: pink; */
      
      .i {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
        
        background-color: var(--fondo-secundario);
        border-radius: 50%;
        cursor: pointer;

        &:first-child {
          left: 8px;
        }
        &:last-child {
          right: 8px;
        }
        &:hover {
          background-color: var(--fondo-principal);
        }
      }

      .carousel {
        display: grid;
        grid-auto-flow: column;
        /* grid-auto-columns: calc((100% / 3) - 0px); */
        grid-auto-columns: 100%;

        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: 0;

        &::-webkit-scrollbar {
          
          display: none;
        }

        .card {
          scroll-snap-align: start;
          height: 360px;

          scroll-snap-align: start;
          list-style: none;

          .img {
            height: 100%;

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

      .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
      } 
      .carousel.dragging .card {
        cursor: grab;
        user-select: none;
      }
      .carousel.no-transition {
        scroll-behavior: auto;
      }
    }
  }
}