*, *::after, *::before {
        box-sizing: border-box;
    }

    :root {
        font:1.2em/1.4 Arial, Helvetica, sans-serif;
    }

    body {
        padding: 0 0 1em;
    }

    header {
        background-color: #333;
        color: #fff;
        border: 5px solid #000;
    }

    header ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    @media (min-width: 40em) {
         header div {
            display: flex;
            justify-content: space-between;
             align-items: center;

             ul {
                 display: flex;

                 a {
                     border-top: 0;
                 }

             }
        }

        .cards {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;

            li {
                width: 17rem;
            }

        }

        main {
            display: flex;

            > .sidebar {
                margin-top: 1rem;
            }
        }
    }

    @media (min-width: 80em) {
        .container {
            max-width: 80rem;
            margin-inline: auto;
            padding-inline: 1rem;
        }
    }

    header a {
        color: #fff;
        text-decoration: none;
        display: flex;
        padding: 0.5em 1em;
        border-top: 1px solid #999;
    }

    header .title {
        font-size: 150%;
        font-style: italic;
        font-weight: bold;
        padding: 1em;
    }

    main {
        padding: 0 1em;
    }

    .cards {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cards li {
        border: 5px solid #000;
        margin-bottom: 1em;
    }

    .cards h2 {
        background-color: #333;
        color: #fff;
        margin: 0;
        padding: 0.5em 1em;
    }

    .cards .inner {
        padding: 0.5em 1em;
    }

    .sidebar {
        background-color: #333;
        border: 5px solid #000;
        padding: 0.5em 1em;
        color: #fff;
    }