Tea Cozy code review request

I am 17% of the way through the front-end career path and would be grateful for any feed back,
I decided to try a mobile first approach to the site
All critiques welcome

thanks
rob

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta rel="viewport" content="width=device-width, initial-scale=-1">

        <title>Tea Cozy</title>

        <link rel="stylesheet" type="text/css" href="resources/styles/style.css">

    </head>

    <body>

    <!-- Header - logo and nav -->

        <header>

            <img id="logo" src="resources/images/img-tea-cozy-logo.webp" alt="">

            <nav>

                <ul>

                    <li class="nav-link"><a href="#banner">Mission</a></li>

                    <li class="nav-link"><a href="#featured-tea">Featured Tea</a></li>

                    <li class="nav-link"><a href="#locations">Locations</a></li>

                </ul>

            </nav>

        </header>

        <main>

    <!-- Banner Section -->

            <section id="banner">

                <div id="banner-text">

                    <h2>Our Mission</h2>

                    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

                </div>

            </section>

    <!-- Featured Tea -->

            <section id="featured-tea">

                <div id="featured-text">

                    <h2>Tea of the Month</h2>

                    <p>What's steeping at the tea cozy?</p>

                </div>

                <div id="featured-img-container">

                    <figure>

                        <img class="featured-img" src="resources/images/img-berryblitz.webp" alt="Berryblitz tea placed on a table being">

                        <figcaption>Fall Berry Blitz Tea</figcaption>

                    </figure>

                    <figure>

                        <img class="featured-img" src="./resources/images/img-spiced-rum.webp" alt="wodden cuboid container full off lose tea leaves wrapped in silver foil, with it pays to buy tea written on the side">

                        <figcaption>Spiced Rum Tea</figcaption>

                    </figure>

                    <figure>

                        <img class="featured-img" src="./resources/images/img-donut.webp" alt="Home made chocolate covered christmas donut, covered with icing sugar presented on a white rectangular plate">

                        <figcaption>Seasonal Donuts</figcaption>

                    </figure>

                    <figure>

                        <img class="featured-img" src="./resources/images/img-myrtle-ave.webp" alt="Stepping pepper mint tea placed on a circular place matt">

                        <figcaption>Myrtle Ave Tea</figcaption>

                    </figure>

                    <figure>

                        <img  class="featured-img" src="./resources/images/img-bedford-bizarre.webp" alt="Bedford bizarre tea with a side of lemon drizzle cake accompanied by a jar of sugar with tea spoon">

                        <figcaption>Bedford Tizzare Tea</figcaption>

                    </figure>

                </div>                

            </section>

    <!-- Locations -->

            <section id="locations">

                <h2>Locations</h2>

                <div id="location-article-container">

                    <article>

                        <h3>Downtown</h3>

                        <p>384 West 4th St</p>

                        <p>Suite 108</p>

                        <p>Portland, Maine</p>

                    </article>

                    <article>

                        <h3>East Bayside</h3>

                        <p>3433 Phisherman's Avenue</p>

                        <p>(Nortwest Corner)</p>

                        <p>Portland, Maine</p>

                    </article>

                    <article>

                        <h3>Oakdale</h3>

                        <p>515 Crescent Avenue</p>

                        <p>Second Floor</p>

                        <p>Portland, Maine</p>

                    </article>

                </div>

            </section>

    <!-- Footer -->

            <footer>

                <div id="contact-information">

                    <h2>The Tea Cozy</h2>

                    <h5 class="address">contact@theteacozy.com</h5>

                    <p class="address">917-555-8904</p>

                </div>    

                <p id="copyright">&#xa9; copyright The Tea Cozy</p>        

            </footer>

        </main>

    </body>

</html>
/* 
**SECTIONS**
    1. Global
    2. Header
    3. Banner
    4. Featured Tea
    5. Locations
    6. Footer
    7. Media querys
        -A. 668px and above
        -B. 668px - 1036px;
*/


/* 1. GLOBAL */
    *,
    *:before,
    *:after{
        box-sizing: inherit;
        margin: 0;
        padding: 0;
    }

    html{
        box-sizing: border-box;
        font-family: Helvetica, Arial;
        font-size: 16px;
        text-align: center;
        color: seashell;
        background-color: black;
        opacity: .9;
    }

    a {
        text-decoration: underlined;
        color: seashell;
    }


/* 2. HEADER */
    header{
        min-height: 69px;
        background-color: black;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        position: fixed;
        width: 100%;
        padding: 10px;
        margin-top: -69px;
        border-bottom: 1px solid seashell ;
    }

    header #logo {
        height: 25px;
        width: auto;
    }

    header nav ul li{
        display: inline-block;
        padding: 0 5px;
    }


/* 3. Banner */
    #banner {
        margin: 69px auto 0 auto;
        background: url("..//images/img-mission-background.webp") no-repeat center;
        max-width: 1200px;
        height: 700px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    #banner #banner-text {
        background-color:  black;
        width: 100%;
        padding: 10px;
    }

    #banner #banner-text h4 {
        margin-top: 10px;
        font-size: 0.75rem;
    }


/* 4. Tea of the month */
    #featured-tea {
        width: 100%;
        margin: 50px 0;
    }

    #featured-tea #featured-text{
        margin-bottom: 20px;
    }

    #featured-tea #featured-text h2{
        margin-bottom: 10px;
    }

    #featured-tea #featured-img-container{
        display: flex;
        flex-flow: column nowrap;
    }

    #featured-tea #featured-img-container > figure{
        padding-bottom: 15px;
    }

    #featured-tea #featured-img-container figure figcaption{
        padding-top: 10px;
    }

    #featured-tea #featured-img-container figure > img {
        width: 100%;
        height: auto;
    }


/* 5. Locations */
    #locations {
        background: url('../images/img-locations-background.webp') no-repeat center;
        min-height: 500px;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content:center;
        align-items: center;
    }

    #location-article-container {
        margin-top: 15px;
    }

    #location-article-container > article {
        background-color: #000;
        width: 300px;
        margin: 20px 0px;
        opacity: 1;
    }

    #location-article-container article > h3, #location-article-container article > p {
        line-height: 2;
        letter-spacing: 1px;
    }


/* 6. Footer */
    #contact-information {
        margin: 20px auto;       
    }

    .address, #copyright {
        font-size: .8rem;
        padding: 10px;
    }

    #copyright {
        border-top: 1px solid seashell;
        width: 70%;
        margin: auto;
    }

/* 7. Media query */
    /* 
    -A. 668px and above
        1. global
        2. Header
        3. Tea of the month
        4. Locations
        5. Footer

    -B. 668px - 1036px; 
        1. Locations
    */

    /* A. 668px and above */
        @media only screen and (min-width: 668px){

            /* 1. global */
                html {
                    font-size: 22px;
                }

                /* 2.Header */
                header{
                    flex-direction: row;
                    justify-content: space-between;
                }

                header #logo{
                    display: block;
                    height: 50px;
                    margin-left: 10px;
                }

            /* 3. Tea of the month */
                #featured-tea {
                    max-width: 1000px;
                    margin: auto;
                    min-height: 750px;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: center;
                }

                #featured-tea #featured-img-container{
                    flex-flow: row wrap;
                    justify-content: center;
                }

                #featured-tea #featured-img-container > figure {
                    padding: 15px;
                }

                #featured-tea #featured-img-container figure > img {
                    width: 300px;
                    height: 200px;
                }

            /* 4. Locations */
                #location-article-container {
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: center;
                    align-items: center;
                } 

                #location-article-container > article {
                    margin: 0 20px;
                }

                #location-article-container article > h3, #location-article-container article > p {
                    line-height: 3;
                    letter-spacing: -1px;
                }

            /* 5. Footer */
                #contact-information {
                    height: 200px;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-between;
                    align-items: center; 
                }

                #copyright {
                    text-align: left;
                    border-top: none;
                    width: 100%;
                    margin-left: 20px;
                }
        }

    /*B. 668px - 1036px */
        /* 1. Locations */
        @media only screen and (min-width: 668px) and (max-width: 1036px){
            #location-article-container article {
                margin: 10px;
            }
        }