:root {
    --white-font: #fff;
    --black-font: #000;
    --colour-one: #ddeedf;
    --colour-two: #8bc34a;
    --colour-three: #388e3c;
    --colour-four: #f2f9f1;
}

.main-container {
    max-width: 72em;
    margin: 0 auto;
    color: #000;
}

.banner {
    background-color: var(--colour-three);
    padding: 1em;
}

.banner-title {
    font-size: 3em;
    text-align: center;
    font-family: Imperial Script;
    color: var(--colour-four);
}

.topic-card {
    background-color: var(--colour-two);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topic-image {
    width: 100%;
    height: 320px;
}

.topic-label {
    padding: 0.5em;
    text-align: center;
    font-family: Imperial Script;
    font-size: 3em;
    color: var(--colour-four);
}

.topic-writeup {
    background-color: var(--colour-one);
    text-align: center;
    width: 100%;
    font-size: 1.5em;
    font-family: Inter;
}

.writeup {
    padding: 2em;
    overflow: hidden;
}

#banner {
    grid-area: ban;
}

#first-topic-card {
    grid-area: ftc;
}

#second-topic-card {
    grid-area: stc;
}

#third-topic-card {
    grid-area: ttc;
}

#first-topic-banner {
    grid-area: ftb;
}

#first-topic-image1 {
    grid-area: ft1;
}

#first-topic-image2 {
    grid-area: ft2;
}

#first-topic-image3 {
    grid-area: ft3;
}

#first-topic-writeup {
    grid-area: ftw;
}

#second-topic-banner {
    grid-area: stb;
}

#second-topic-image1 {
    grid-area: st1;
}

#second-topic-image2 {
    grid-area: st2;
}

#second-topic-image3 {
    grid-area: st3;
}

#second-topic-writeup {
    grid-area: stw;
}

#third-topic-banner {
    grid-area: ttb;
}

#third-topic-image1 {
    grid-area: tt1;
}

#third-topic-image2 {
    grid-area: tt2;
}

#third-topic-image3 {
    grid-area: tt3;
}

#third-topic-writeup {
    grid-area: ttw;
}

.main-container {
    display: grid;
    column-gap: 1em;
}

.main-container {
    grid-template:
        "ban ban ban ban" minmax(6em, auto) " .   .   .   . " minmax(2em, auto) "ftc ftc ftc ftc" minmax(30em, auto) " .   .   .   . " minmax(2em, auto) "stc stc stc stc" minmax(30em, auto) " .   .   .   . " minmax(2em, auto) "ttc ttc ttc ttc" minmax(30em, auto) " .   .   .   . " minmax(2em, auto) "ftb ftb ftb ftb" minmax(6em, auto) " .   .   .   . " minmax(2em, auto) "ft1 ft1 ft1 ft1" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "ft2 ft2 ft2 ft2" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "ft3 ft3 ft3 ft3" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "ftw ftw ftw ftw" minmax(30em, auto) " .   .   .   . " minmax(2em, auto) "stb stb stb stb" minmax(6em, auto) " .   .   .   . " minmax(2em, auto) "st1 st1 st1 st1" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "st2 st2 st2 st2" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "st3 st3 st3 st3" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "stw stw stw stw" minmax(30em, auto) " .   .   .   . " minmax(2em, auto) "ttb ttb ttb ttb" minmax(6em, auto) " .   .   .   . " minmax(2em, auto) "tt1 tt1 tt1 tt1" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "tt2 tt2 tt2 tt2" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "tt3 tt3 tt3 tt3" minmax(25em, auto) " .   .   .   . " minmax(2em, auto) "ttw ttw ttw ttw" minmax(30em, auto)
}

@media (min-width: 50em) {
    .main-container {
        grid-template:
            "ban ban ban ban ban ban ban ban" minmax(6em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "ftc ftc ftc ftc stc stc stc stc" minmax(30em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) " .   .  ttc ttc ttc ttc  .   . " minmax(30em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "ftb ftb ftb ftb ftb ftb ftb ftb" minmax(6em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "ft1 ft1 ft1 ft1 ft2 ft2 ft2 ft2" minmax(25em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) " .   .  ft3 ft3 ft3 ft3  .   . " minmax(25em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "ftw ftw ftw ftw ftw ftw ftw ftw" minmax(20em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "stb stb stb stb stb stb stb stb" minmax(6em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "st1 st1 st1 st1 st2 st2 st2 st2" minmax(25em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) " .   .  st3 st3 st3 st3  .   . " minmax(25em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "stw stw stw stw stw stw stw stw" minmax(20em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "ttb ttb ttb ttb ttb ttb ttb ttb" minmax(6em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "tt1 tt1 tt1 tt1 tt2 tt2 tt2 tt2" minmax(25em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) " .   .  tt3 tt3 tt3 tt3  .   . " minmax(25em, auto) " .   .   .   .   .   .   .   . " minmax(2em, auto) "ttw ttw ttw ttw ttw ttw ttw ttw" minmax(20em, auto)
    }
}

@media (min-width: 75em) {
    .main-container {
        grid-template:
            "ban ban ban ban ban ban ban ban ban ban ban ban" minmax(6em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "ftc ftc ftc ftc stc stc stc stc ttc ttc ttc ttc" minmax(30em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "ftb ftb ftb ftb ftb ftb ftb ftb ftb ftb ftb ftb" minmax(6em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "ft1 ft1 ft1 ft1 ft2 ft2 ft2 ft2 ft3 ft3 ft3 ft3" minmax(25em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "ftw ftw ftw ftw ftw ftw ftw ftw ftw ftw ftw ftw" minmax(25em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "stb stb stb stb stb stb stb stb stb stb stb stb" minmax(6em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "st1 st1 st1 st1 st2 st2 st2 st2 st3 st3 st3 st3" minmax(25em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "stw stw stw stw stw stw stw stw stw stw stw stw" minmax(25em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "ttb ttb ttb ttb ttb ttb ttb ttb ttb ttb ttb ttb" minmax(6em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "tt1 tt1 tt1 tt1 tt2 tt2 tt2 tt2 tt3 tt3 tt3 tt3" minmax(25em, auto) " .   .   .   .   .   .   .   .   .   .   .   . " minmax(2em, auto) "ttw ttw ttw ttw ttw ttw ttw ttw ttw ttw ttw ttw" minmax(25em, auto)
    }
}