Square Eyes

movies.html

        <h1>New Movies</h1>
        <section class="new-movies">
            <div class="flex-col">
                <div class="container">
                    <a href="Products/product.html">
                        <img src="images/thebatman.jpeg" alt="The Batman" class="img-fit">
                    </a>
                </div>
                <div>
                    <h3 class="inline">The Batman&#x2022;</h3>
                    <a href="#" class="inline link">Action</a>
                </div>
            </div>
            <div class="flex-col">
                <div class="container">
                    <a href="Products/product.html">
                        <img src="images/godzilla.jpeg" alt="Godzilla-poster" class="img-fit">
                    </a>
                </div>
                <div>
                    <h3 class="inline">Godzilla&#x2022;</h3>
                    <a href="#" class="inline link">Sci-Fi</a>
                </div>
            </div>
            <div class="flex-col">
                <div class="container">
                    <a href="Products/product.html">
                        <img src="images/hollywood.jpeg" alt="Once upon a Time" class="img-fit">
                    </a>
                </div>
                <div>
                    <h3 class="inline">Once Upon a Time&#x2022;</h3>
                    <a href="#" class="inline link">Thriller</a>
                </div>
            </div>
            <div class="flex-col">
                <div class="container">
                    <a href="Products/product.html">
                        <img src="images/dunecover.jpg" alt="DunePart2" class="img-fit">
                    </a>
                </div>
                <div>
                    <h3 class="inline">Dune Part 2&#x2022;</h3>
                    <a href="#" class="inline link">Sci-Fi</a>
                </div>
            </div>
        </section>

style.css

main{
    margin-top: 5px;
    margin-left: 16px;
    margin-right: 16px;
}


.flex-col {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.inline {
    display: inline;
}

.container {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.img-fit {
    height: 100%;
    width: 80%;
    object-fit: cover;
}

.link {
    color: #0DC6C6;
}

/* BREAKPOINTS */
@media (max-width: 992px) {
   .header {
    padding: 1.3rem 5%;
   } 
    /* The new style */
   .new-movies {
    flex-direction: column;
   }
}