Explanation about how the pictures transform when browser is resized

I’m at the “Responsive Club Website” project. Because I was lacking inspiration and felt I needed more practice first I decided to recreate the example. I looked at the CSS via good developer tools. I notice that the photo images don’t work right on my example. On the original example, they go into a column and span the width of the browser when it is made smaller but this isn’t happening on my version.

What am I doing differently and how can I get it to do this? Thanks for any answers.

Here is the original example: South Village Run Club

Here is my replica: South Village Run Club

And here is the code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>South Village Run Club</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="bar">
        <ul>
            <a href="#">
                <li>Events</li>
            </a>
            <a href="#">
                <li>Results</li>
            </a>
            <a href="#">
                <li>Partnering Restaurants</li>
            </a>
        </ul>
    </div>
    <div class="intro">
        <h1>South Village Run Club</h1>
    </div>
    <div class="summary">
        <h2>Meet up. Work out. Celebrate.</h2>
        <p>Come join our vibrant community whose focus is training hard and enjoying local post-workout cuisine - guilt-free!</p>
        <p>South Village Run Club is a free MeetUp group sponsored by <a href="">City Shoes</a>.</p>
    </div>
    <div class="photos">
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/tunnel-runners.jpg">
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/meetup-wine.jpg">
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/runners-grayscale.jpg">
    </div>
    <div class="testimonial">
        <h1>"I build my weeknight plans around their events. I can exercise and meet new people every week!"</h1>
        <p>-Bryce R. - financial advisor/frequent runner since 2018</p>
    </div>
    <div class="photos">
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/coffeshop.jpg">
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/marathon-runners.jpg">
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/hangouts.jpg">
    </div>
    <div class="meetup">
        <h1>Come join the fun!</h1>
        <img src="https://static-assets.codecademy.com/Paths/front-end-career-path/responsive-club-website/runners-church.jpg">
        <h1>We meet every evening in the city square at 7PM!</h1>
    </div>
    <div class="bar">
        <ul>
            <a href=""><li>Events</li></a>
            <a href=""><li>Results</li></a>
            <a href=""><li>Partnering Restaurants</li></a>
        </ul>
    </div>

</body>
</html>

body {
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    margin: 0;
    background-color: lightsalmon;
}

.bar {
    padding-top: 1rem;
    background-color: teal;
    color: lightsalmon;
}

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

li {
    color: lightsalmon;
    padding: 0.5rem 1.5rem;
    margin-right: 1.5rem;
    display: inline-block;
}

.intro {
    height: 30rem;
    padding-top: 1rem;
    background-image: url('https://www.ausleisure.com.au/images/ausleisure/files/_news-main/People_running_ASICS_1lr.jpg');
    background-position: center;
    background-repeat: no-repeat;
    
}
.intro h1 {
    color: coral;
    font-size: 2rem;
    margin-top: 10rem;
    padding: 2rem;
    background-color:rgba(0.5, 0.5, 0.5, 0.5);
    text-align: center;
}

.summary {
    padding: 0 1rem;
}

.summary, .testimonial, .photos, .meetup {
    margin: 4em auto;
}

.summary h2 {
    color: yellow;
}

.summary p {
    color: white;
}

.photos img {
    width: 30%;
    margin: 1.5%;
}

.testimonial {
    background-color: teal;
    height: 20rem;
    padding: 0 1 rem;
    padding-top: 1rem;
    color: yellow;
}

.testimonial h1 {
    font-size: 2.5rem;
    color: yellow;
}

.meetup {
    margin-bottom: 2rem;
}

.meetup h1 {
    color: yellow;
    text-align: center;
}

.meetup img {
    width: 50%;
    height: auto;
    display: block;
    margin: auto;
}

.bar {
    padding-top: 1rem;
    background-color: teal;
    color: lightsalmon;
}



@media only screen and (max-width: 1048px)
.photos img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}