*{
    margin: 0;
    padding: 0;
    font-family:  Arial, Helvetica, sans-serif;
    box-sizing: content-box;
}

body{
    background: var(--color-fondo);
}

.container{
    margin: 20px;
    background: #fefefe;
    width: 95%;
    max-height: 95vh;
    padding-inline: 20px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(27, 1fr);
    grid-template-areas:
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja2 caja2 caja2 caja2 caja2 caja3 caja3 caja3 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja1 caja1 caja1 caja1 caja1 caja1 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja5 caja5 caja5 caja6 caja6 caja6 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja5 caja5 caja5 caja6 caja6 caja6 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja4 caja4 caja4 caja4 caja4 caja4"
    "caja5 caja5 caja5 caja6 caja6 caja6 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja8 caja8 caja8 caja9 caja9 caja9"
    "caja10 caja10 caja10 caja10 caja10 caja10 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja11 caja11 caja11 caja11 caja11 caja11"
    "caja10 caja10 caja10 caja10 caja10 caja10 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja11 caja11 caja11 caja11 caja11 caja11"
    "caja10 caja10 caja10 caja10 caja10 caja10 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja11 caja11 caja11 caja11 caja11 caja11"
    "caja10 caja10 caja10 caja10 caja10 caja10 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja11 caja11 caja11 caja11 caja11 caja11"
    "caja10 caja10 caja10 caja10 caja10 caja10 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja7 caja11 caja11 caja11 caja11 caja11 caja11"
    "caja12 caja12 caja12 caja12 caja13 caja13 caja14 caja14 caja15 caja15 caja15 caja15 caja16 caja16 caja17 caja17 caja17 caja17 caja17 caja17"
    ;
}

.item1{
    grid-area: caja1;
}
.item1{
    grid-area: caja1;
    display: grid;
    place-items: center;
}

.item2{
    grid-area: caja2;
}

.item3{
    grid-area: caja3;
}

.item4{
    grid-area: caja4;
}

.item5{
    grid-area: caja5;
}

.item6{
    grid-area: caja6;
}

.item7{
    grid-area: caja7;
}

.item8{
    grid-area: caja8;
}

.item9{
    grid-area: caja9;
}

.item10{
    grid-area: caja10;
}

.item11{
    grid-area: caja11;
}

.item12{
    grid-area: caja12;
}

.item13{
    grid-area: caja13;
}

.item14{
    grid-area: caja14;
}

.item15{
    grid-area: caja15;
}

.item16{
    grid-area: caja16;
}

.item17{
    grid-area: caja17;
}

.imagen4{
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    object-fit: cover;
    background: #e7e9e8;
    border-radius: 50px;
}

.imagen1{
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    object-fit: cover;
    background: #e7e9e8;
    border-radius: 50px;
}

.imagen3{
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    object-fit: cover;
    background: #e7e9e8;
    border-radius: 50px;
}

.imagen5{
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    object-fit: cover;
    background: #e7e9e8;
    border-radius: 50px;
}

.imagen6{
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    object-fit: cover;
    background: #e7e9e8;
    border-radius: 50px;
}

.item2 img,
.item3 img,
.item5 img,
.item6 img,
.item7 img,
.item8 img,
.item9 img,
.item10 img,
.item11 img,
.item12 img,
.item13 img,
.item14 img,
.item15 img,
.item16 img,
.item17 img {
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    object-fit: contain;
    background: #e7e9e8;
    border-radius: 20px;
}


@media (max-width: 800px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "caja1"
            "caja2"
            "caja3"
            "caja4"
            "caja5"
            "caja6"
            "caja7"
            "caja8"
            "caja9"
            "caja10"
            "caja11"
            "caja12"
            "caja13"
            "caja14"
            "caja15"
            "caja16"
            "caja17";
    }
}