Building responsive squares

How do I build a square that is responsive? A square that responds to the behavior of the window element. If the window shrinks, the square should also shrink relative to the window. With the nice CSS function aspect-ratio: 1/1 this can be done easily and quickly.

<div class="w">
    <div class="c"></div> 
</div> 

* {   
  margin: 0;   
  padding: 0;   
  box-sizing: border-box; 
} 
.w {   
  width: 100%;   
  padding:20px; 
} 
.c {   
  border: 2px solid #000;   
  width:100%;   
  max-width:600px;   
  aspect-ratio: 1/1;   
}

That was it 🙂