main {
    grid-template-areas:
        ". introduction ."
        "fizz-logo fizzier-fizz ."
        ". betrayal-at-house-on-the-hill betrayal-at-house-on-the-hill-board-game-cover"
        "risc-v-logo risc-v-assembler ."
        ". kebab2snake .";
}

.betrayal-at-house-on-the-hill {
    grid-area: betrayal-at-house-on-the-hill;
}

.betrayal-at-house-on-the-hill-board-game-cover {
    width: 250px;
    border-radius: 35px;
    grid-area: betrayal-at-house-on-the-hill-board-game-cover;
}

.fizz-logo {
    width: 150px;
    border-radius: 100px;
    grid-area: fizz-logo;
}

.fizzier-fizz {
    grid-area: fizzier-fizz;
}

.introduction {
    grid-area: introduction;
}

.kebab2snake {
    grid-area: kebab2snake;
}

.risc-v-assembler {
    grid-area: risc-v-assembler;
}

.risc-v-logo {
    width: 200px;
    border-radius: 65px;
    grid-area: risc-v-logo;
}

@media (max-width: 1300px) {
    .betrayal-at-house-on-the-hill-board-game-cover {
        width: 200px;
        border-radius: 25px;
    }
}

@media (max-width: 1120px) {
    .betrayal-at-house-on-the-hill-board-game-cover {
        width: 150px;
        border-radius: 15px;
    }

    .fizz-logo {
        width: 120px;
    }

    .risc-v-logo {
        width: 130px;
        border-radius: 35px;
    }
}

@media (max-width: 820px) {
    main {
        grid-template-areas:
            "introduction"
            "fizzier-fizz"
            "fizz-logo"
            "betrayal-at-house-on-the-hill"
            "betrayal-at-house-on-the-hill-board-game-cover"
            "risc-v-assembler"
            "risc-v-logo"
            "kebab2snake";
    }

    .betrayal-at-house-on-the-hill-board-game-cover {
        width: 300px;
        border-radius: 40px;
    }

    .risc-v-logo {
        margin-bottom: 10px;
    }
}