html {max-width: 100%;}
       
body {background-image: linear-gradient(to right, #ed157d 0%, #ed157d 20%, #aed768 20%, #aed768 80%, #ed157d 80%, #ed157d 100%);}


.listcentered {text-align: center;
margin: 10%;}

.bodytextcentered {text-align:center;
margin: 10%;}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 18px;
}
    
.div1 {
    grid-row: span 4 / span 4;
}

.div2 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
}

.div3 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
}

.div4 {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div5 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 5;
}

.div6 {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 9;
}

.div7 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 9;
}

.div8 {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 3;
}

.div9 {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 3;
}

.div10 {
    grid-row: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 3;
}

.div11 {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 6;
}

.div12 {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 6;
}

.div13 {
    grid-row: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 6;
}

.div14 {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 9;
}                 






.parent2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 18px;
}
    
.div21 {
    grid-row: span 4 / span 4;
}

.div22 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
}

.div23 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
}

.div24 {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div25 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 5;
}

.div26 {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 9;
}

.div27 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 9;
}

.div28 {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 3;
}

.div29 {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 3;
}

.div30 {
    grid-row: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 3;
}

.div31 {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 6;
}

.div32 {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 6;
}

.div33 {
    grid-row: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 6;
}






.parentATF {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}
    
.div1ATF {
    grid-row: span 4 / span 4;
}

.div2ATF {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
}

.div3ATF {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
}

.div4ATF {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div5ATF {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 3;
}

.div6ATF {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 3;
}

.div7ATF {
    grid-row: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 3;
}

.div8ATF {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 5;
}

.div9ATF {
    grid-row: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 9;
}

.div10ATF {
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 6;
}

.div11ATF {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 6;
}

.div12ATF {
    grid-row: span 7 / span 7;
    grid-column-start: 4;
    grid-row-start: 6;
}

.div13ATF {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 9;
}

.div14ATF {
    grid-row: span 11 / span 11;
    grid-column-start: 2;
    grid-row-start: 9;
}

.div15ATF {
    grid-row: span 11 / span 11;
    grid-column-start: 3;
    grid-row-start: 9;
}
        






footer {text-align: center;}