Nesting CSS styling elements

I am trying to create a style sheet for an image gallery. I want to nest the styling elements so that they only apply when they are children of elements with a certain class. I’ve written the CSS like this:

.media {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
img {
    max-width: 100%;
    height: auto;
  }
}

Where the corresponding HTML looks like this:

  <div class="media" style="margin: 3px;">
    <div class="layer">
        <p><b>Yamaha R3 </b><br> 300cc - quick & agile <br> Great for beginners</p>
    </div>
    <img src="{% static 'random_image.png' %}" alt="" />
  </div>

But none of the styling related to img that I’ve specified in the style sheet is actually being used. Am I nesting the styling rules incorrectly?

>Solution :

CSS nesting isn’t yet available, unless you use CSS Pre-processor like SASS/LESS

You have to do this:

.media {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media img {
  max-width: 100%;
  height: auto;
}

Or set a specific a class in your img

<img class="media-image" src="{% static 'random_image.png' %}" alt="" />

And in the CSS do this:

.media-image {
  max-width: 100%;
  height: auto;
}