/* https://www.kevinpowell.co/article/css-remedy/ */
* { box-sizing: border-box; } /* Switch to border-box for box-sizing. */
body {
    margin: 0; /* Remove the tiny space around the edge of the page */
}
img, video, canvas, audio, iframe, embed, object  {
    display: block; /* Switch display mode to block, since that's what we usually want for images. */
    vertical-align: middle;  /* If you override, and make an image inline, it's likely you'll want middle vertical alignment. */
}

/* limit maximum page width and center the page when limited. */
body {
    max-width: 1330px;
    margin: 0 auto;
}

.header {
    margin: 1em;
    display: grid;
    grid-template:
            "logo logo logo logo logo"
            "buy rent loans . advertise" / auto auto auto 1fr auto;
    align-items: end;
    column-gap: 1em;
}
@media (min-width: 480px) {
    .header {
        grid-template:
        "logo buy rent loans . advertise" / auto auto auto auto 1fr auto;
    }
}
.logo {
    grid-area: logo;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.buy {
    grid-area: buy;
}
.rent {
    grid-area: rent;
}
.loans {
    grid-area: loans;
}
.advertise {
    grid-area: advertise;
}

.partner {
    font-style: italic;
}

.search {
    display: flex;
    justify-content: center;
    margin: 1em 0;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}
.slot {
    background-color: #D9D9D9;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}
.slot-content {
    font-style: italic;
}

.slot1,
.slot11 {
    width: 300px;
    height: 600px;
}
.slot1 .slot-size::before,
.slot11 .slot-size::before {
    content: '300 x 600';
}
.slot2,
.slot3,
.slot4,
.slot5,
.slot7,
.slot8,
.slot9,
.slot10,
.slot13,
.slot14,
.slot15,
.slot16 {
    width: 300px;
    height: 250px;
}
.slot2 .slot-size::before,
.slot3 .slot-size::before,
.slot4 .slot-size::before,
.slot5 .slot-size::before,
.slot7 .slot-size::before,
.slot8 .slot-size::before,
.slot9 .slot-size::before,
.slot10 .slot-size::before,
.slot13 .slot-size::before,
.slot14 .slot-size::before,
.slot15 .slot-size::before,
.slot16 .slot-size::before {
    content: '300 x 250';
}
.slot6,
.slot12,
.slot99 {
    width: 320px;
    height: 50px;
}
.slot6 .slot-size::before,
.slot12 .slot-size::before,
.slot99 .slot-size::before {
    content: '320 x 50';
}

.slot1 {
    grid-area: slot1;
}
.slot1 {
    grid-area: slot1;
}
.slot2 {
    grid-area: slot2;
}
.slot3 {
    grid-area: slot3;
}
.slot4 {
    grid-area: slot4;
}
.slot5 {
    grid-area: slot5;
}
.slot6 {
    grid-area: slot6;
}
.slot7 {
    grid-area: slot7;
}
.slot8 {
    grid-area: slot8;
}
.slot9 {
    grid-area: slot9;
}
.slot10 {
    grid-area: slot10;
}
.slot11 {
    grid-area: slot11;
}
.slot12 {
    grid-area: slot12;
}
.slot13 {
    grid-area: slot13;
}
.slot14 {
    grid-area: slot14;
}
.slot15 {
    grid-area: slot15;
}
.slot16 {
    grid-area: slot16;
}
.content {
    display: grid;
    grid-gap: 0.8em;
    grid-template:
    "slot3"
    "slot1"
    "slot4"
    "slot5"
    "slot2"
    "slot13"
    "slot14"
    "slot15"
    "slot16"
    "slot7"
    "slot8"
    "slot9"
    "slot10"
    "slot11" / 320px;
    justify-content: center;
    justify-items: center;
}
@media (min-width: 620px) {
    .content {
        grid-template:
                "slot1   slot2"
                "slot1   slot3"
                "slot4   slot5"
                "slot13 slot14"
                "slot15 slot16"
                "slot7   slot8"
                "slot9   slot11"
                "slot10  slot11" / 300px 300px;
        align-items: start;
    }
}
@media (min-width: 990px) {
    .content {
        grid-template:
                "slot1  slot1  slot1"
                "slot3  slot4  slot5"
                "slot2  slot7  slot13"
                "slot14 slot15 slot16"
                "slot8  slot9  slot10"
                "slot11 slot11 slot11" / 300px 300px 300px;
        align-items: start;
    }
    .slot1, .slot11 {
        width: 970px;
        height: 250px;
    }
    .slot1 .slot-size::before, .slot11 .slot-size::before {
        content: '970 x 250';
    }
    .slot6,
    .slot12 {
        width: 970px;
        height: 90px;
    }
    .slot6 .slot-size::before,
    .slot12 .slot-size::before {
        content: '970 x 90';
    }
}

@media (min-width: 1300px) {
    .content {
        grid-template:
                "slot6  slot6  slot6  slot6"
                "slot1  slot1  slot1  slot1"
                "slot2  slot3  slot4  slot5"
                "slot13 slot14 slot15 slot16"
                "slot7  slot8  slot9  slot10"
                "slot11 slot11 slot11 slot11"
                "slot12 slot12 slot12 slot12"
                / 300px 300px 300px 300px;
    }
}

/* partner ads */
.slot5, .slot12 {
    background-color: aquamarine;
}

/* our ads */
.slot6, .slot8 {
    background-color: bisque;
}

/* headlines */
.slot7 {
    background-color: lightyellow;
}
.slot6, .slot12 {
    margin: 1em auto;
}

.appStoreButtons {
    margin: 1em auto;
    width: 320px;
    background-color: #D9D9D9;
    padding: 2em;
    text-align: center;

}

.footer {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin: 1em 0;
}