.square-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* This forces the container to be square */
    overflow: hidden; /* Ensures the image doesn't overflow the container */
}

.square-image-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This covers the area without stretching the image */
}