body{
    background-image: url(https://i.pinimg.com/736x/5b/85/2c/5b852ccb6c89cd577232e82b6de6f447.jpg);
}
main{
    display: grid;
    grid-template-columns: 200px 200px 200px 400px;
    grid-template-rows: max-content 180px 300px 300px 300px;
    grid-gap: 5px;
    padding: 2px;
}
.amelie{
    grid-column: 1 / 2;
    grid-row: 3/ 4;
    background-color: blanchedalmond;
    border-radius: 15px;
}
nav{
    grid-column: 1 / 5;
    grid-rows: 1 / 2;
}
.lilychouchou{
    grid-column: 2 / 3;
    grid-row: 3/ 4;
    background-color: blanchedalmond;
    border-radius: 15px;
}
.gueros{
    grid-column: 3 / 4;
    grid-row: 3/ 4;
    background-color: blanchedalmond;
    border-radius: 15px;
}
.minijournal{
    justify-content: center;
    grid-column: 4 / 5;
    grid-row: 3/ 4;
    background-color: blanchedalmond;
    border-radius: 15px;
    padding: 5px; /* El padding lo maneja el #container interno */
}
#container {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 270px;
    padding: 5px;
}

::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%); }
::-webkit-scrollbar-thumb:vertical {
    background: url("https://i.imgur.com/bfyvjnx.png") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
    border: 1.5px solid #888;
    border-radius: 3px;
}
.contenedorz {
    /* Eliminamos el borde rosa si ya no lo necesitas para debugear */
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: auto; /* Deja que el contenido defina el alto natural */
    width: 100%; 
    overflow: hidden; /* Evita que los hijos se salgan */
}

.carrusel {
    grid-row: 2 / 3;
    grid-column: 1 / 5;
    display: flex;
    overflow: hidden; 
    width: 100%; /* Cambiado de max-width a 100% */
    height: 200px;
}
.feria {
    grid-row: 1 / 2;
    grid-column: 1 / 5;
}


@keyframes spin {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.group {
    display: flex;
    gap: 3px;
    animation: spin 18s infinite linear; 
 
}
.group{
    display: flex;
    gap: 3px;
    animation: spin 18s infinite linear; 
  
}

.card {
    flex: 0 0 50px;
    gap: 2px;
    height: 100px; /*5em*/
    padding: 1px;
    color: white;
    text-align: center;
    display: grid;   
}