@import 'https://unpkg.com/@bobanm/cardinal@latest';

:root {
    --orange: #f2bc0f;
    --gray: #bd94a4;
    --green: #4bc190;
    --blue: #00adfe;
}

main {
    grid-template-areas: 
        'one   one'
        'two   two'
        'three three'
        'four  four';
}

#one {
    grid-area: one;
}
#two {
    grid-area: two;
}
#three {
    grid-area: three;
}
#four {
    grid-area: four;
}

section.square {
    text-align: center;
}
section.square img {
    display: block;
    width: 8em;
    margin: 0 auto;
}
section.square h2 {
    margin: 0.7em auto;
}

img {
    width: 6em;
    margin-left: 2em;
}

section.top-green {
    border-top-color: var(--green);
}
section.top-blue {
    border-top-color: var(--blue);
}
section.top-gray {
    border-top-color: var(--gray);
}

a {
    display: contents;
}
a.coming-soon {
    cursor: default;
}

@media (min-width: 44rem) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 95vh;
    }
    main {
        max-width: 50rem;
        gap: 1em;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 23rem 23rem;
        grid-template-areas: 
            'one   two'
            'three four';
    }
}