Make image aspect ratio to be 1:1 in a grid shaped layout

For example, there are cards aligned in a grid shaped layout with 33.33% column width, then to make the images in those cards to be of square dimensions, we could do something like this -

<div class="card">
    <div class="image-wrapper">
        <img src="...">
    </div>
    <div class="content">
        ...
    </div>
</div>

.image-wrapper {
    width: 100%;
    position: relative;
    padding-top: 100%;
    margin-bottom: 10px;

    img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 100%;
        object-fit: cover;
        height: auto;
        margin-bottom: 0;
    }
}

Reference - https://www.w3schools.com/howto/howtocssaspect_ratio.asp