.slide {
    width: 100%;
    height: 60vh;
    border: solid 1px black;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.slide .main {
    width: 100%;
    height: 100%;
    display: flex;
    transition: 1s ease-in-out;
}

.slide .main .item {
    background: grey;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.slide .main .item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.controlls {
    position: absolute;
    display: flex;
    justify-content: space-between;
    z-index: 99;
    width: 100%;
    height: 100%;
}

.controlls button {
    height: 100%;
    border: none;
    background: transparent;
}

.controlls button:hover {
    background: linear-gradient(90.74deg, rgba(96, 96, 96, 0.59) 8.42%, rgba(217, 217, 217, 0) 99.09%);
}

.controlls button svg {
    width: 26px;
    stroke: white;
    pointer-events: none;
}

/* Ajuste general del carrusel */
.slide {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Para pantallas con altura mínima de 700px */
@media (min-height: 700px) {
    .slide {
        max-height: 70vh;
    }
}

/* Para dispositivos móviles con una altura fija más baja */
@media (max-width: 600px) {
    .slide {
        height: 35vh; /* Altura fija más pequeña en móviles */
        max-height: 35vh;
    }

    .main {
        height: 100%; /* Asegura que el contenedor principal ocupe toda la altura disponible */
    }

    .item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
    }
}