.container {
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

nav {
    @media (min-width: 600px) {
        ul {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-inline-start: -2rem;
        }

        li:first-child {
            margin-inline-end: auto;
        }
    }
}

.form {
    @media (min-width: 600px) {
        body {
            margin: 0.5rem;
        }
        h1 {
            font-size: 3rem;
            font-weight: 600;
            margin: 0 0 2.5rem 0;
        }
    }
}

.cards {
    gap: 1rem;
}

.grid1 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(4, 25%);
    gap: 2rem;

    a {
        text-decoration: none;
        color: #FFFFFF;
    }

    > article {
        background-color: var(--secondary);
        color: var(--bg);
        text-align: center;

        &:nth-child(1) {
            grid-area: 2 / 2 / 4 / 5;
        }
    }
}