﻿.grid-responsive {
    display: grid;
    gap: 1rem;
}

@media (min-width: 500px) {
    .grid-responsive {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 700px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .grid-responsive {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1500px) {
    .grid-responsive {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1850px) {
    .grid-responsive {
        grid-template-columns: repeat(6, 1fr);
    }
}

.grid-responsive > div {
    min-width: 0;
    border:1px;
}

.grid-responsive .card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.grid-responsive .card-body,
.grid-responsive .card-header,
.grid-responsive .card-footer {
    min-width: 0;
}

.grid-responsive .fs-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




/*.portada-evento {
    height: 400px;
}

@media (min-width: 992px) {
    .portada-evento {
        height: 290px;
    }
}*/



.img-wrap {
    /* Necesario para que funcionen las container queries respecto al ancho del contenedor */
    container-type: inline-size;
    /* opcional: limitar el ancho del contenedor */
    max-width: 100%;
}

.portada-evento {
    width: 100%;
    max-height: 400px; /* Alto máximo */
    aspect-ratio: 16/9; /* Ajustá el ratio como vos quieras */
    object-fit: cover; /* Para que mantenga proporción */
}

