body {
    padding: 0;
    margin: 0;
    background-color: yellow;
}

.container {
    position: relative;
    width: 50%; /* Adjust as needed */
    height: auto; /* You can set a specific height if desired */
    margin: 0 auto; /* Center the container */
}

img {
    position: absolute; /* Positioning for overlap */
    display: block;
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

.overlay {
    top: 0; /* All images start at the same point */
    left: 0; /* Align all images to the left */
}

.dynamic {
    top: 0; /* Aligns on top */
    left: 0; /* Aligns on left */
    z-index: 2; /* Dynamic image is on top */
}

.underlay {
    top: 0; /* Aligns on bottom */
    left: 0; /* Aligns on left */
    z-index: 1; /* Underlay image is below */
}