.galeria-section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto; /* Centra la sección */
}

.grid-container {
    display: grid;
    /* Esto crea columnas automáticas que se adaptan al tamaño */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.card {
    background-color: var(--blanco);
    border: 2px solid var(--dorado);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.card:hover {
    background-color: #fff8e1; /* Un color crema suave al pasar el mouse */
    border-color: var(--rojo-navidad);
}

.card h3 {
    color: var(--rojo-navidad);
    margin-top: 0;
}

/* css/galeria.css - Agrega esto al final */

.card {
    /* Agregamos 'overflow: hidden' para que la imagen respete las esquinas redondeadas de la carta */
    overflow: hidden; 
    padding: 0; /* Quitamos el relleno para que la foto llegue al borde */
    padding-bottom: 20px; /* Dejamos espacio solo abajo para el texto */
}

.card img {
    width: 100%; /* Que ocupe todo el ancho de la tarjeta */
    height: 180px; /* Una altura fija para que todas las cartas se vean parejas */
    object-fit: cover; /* MÁGICO: Esto recorta la imagen para que no se estire ni se aplaste */
    border-bottom: 3px solid var(--dorado); /* Un borde dorado decorativo debajo de la foto */
}

/* Un pequeño ajuste para que el texto no quede pegado a los bordes ahora que quitamos el padding general */
.card h3, .card p {
    padding: 0 15px;
}