.img-main,
.img-overlay {
    position: relative; /* overlay necesita relative en el contenedor */
    width: 100%;        /* siempre ocupa todo el ancho */
    height: auto;       /* altura proporcional según la imagen */
    object-fit: cover;  /* cubre todo el contenedor sin deformarse */
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; /* más alto que .img-main pero no exagerado */
}

/* Media query solo si quieres ajustar máximo o mínimo alto en móvil */
@media (max-width: 768px) {
    .img-main,
    .img-overlay {
        max-height: 180px; /* limita la altura en móviles */
    }
}