html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; /* ¡Esta es la clave! Asegura que el body ocupe el 100% de la altura visible */
    box-sizing: border-box;
}

/* Puedes mantener el fondo de degradado aquí, si lo quieres para el resto de la página */
body {
    background: linear-gradient(#FEDC85 ,#CCFFE1, #D7F7CC, #FEDC85);
    position: relative;
    color: #0C3A1C;
}

.card-img-container {
    height: 200px; /* O la altura que desees, por ejemplo, 250px o 300px */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Esto recorta cualquier parte de la imagen que se salga */
}

.card-img-top {
    width: auto;
    height: 100%;
    object-fit: contain; /* Ajusta la imagen para que quepa en el contenedor sin distorsionarla */
}