* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    height: 100vh;
    background-color: #000;
    display: grid;
    grid-template-rows: 100px 1fr 50px;
    color: #fff;
}

h1 {
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 4rem;

}

.galeria {
    height: 100%;
    width: 100%;
    background-color: rgb(37, 15, 37);
    display: grid;
    grid-template-areas:
        "f1 f2 f2 f3"
        "f1 f4 f5 f3"
        "f1 f6 f8 f8"
        "f1 f7 f8 f8";
        grid-auto-rows: 20vh;
}

.galeria .foto {
    background-color: black;
    border: 2px solid #f700ff;
}

.galeria .foto:nth-of-type(1) {
    grid-area: f1;
}

.galeria .foto:nth-of-type(2) {
    grid-area: f2;
}

.galeria .foto:nth-of-type(3) {
    grid-area: f3;
}

.galeria .foto:nth-of-type(4) {
    grid-area: f4;
}

.galeria .foto:nth-of-type(5) {
    grid-area: f5;
}

.galeria .foto:nth-of-type(6) {
    grid-area: f6;
}

.galeria .foto:nth-of-type(7) {
    grid-area: f7;
}

.galeria .foto:nth-of-type(8) {
    grid-area: f8;
}

img {
    height: 100%;
    width: 100%;
    object-fit: inherit;
}

footer {
    display: grid;
    place-content: center;
    font-style: italic;
}