/* Styles for cover image with template overlay */
.cover-image-container {
    position: relative;
    display: inline-block; /* Or block, depending on layout needs */
    line-height: 0; /* Helps remove potential whitespace issues with inline-block images */
}

.cover-image-container .cover-mockup-image {
    display: block; /* Remove extra space below image if container is block */
    max-width: 100%;
    height: auto;
    position: relative; /* To ensure it's part of the stacking context if needed */
    z-index: 0;
}

.cover-image-container .template-overlay-image {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 90% !important;
    height: 90% !important;
    object-fit: contain; /* Ensures the entire overlay is visible, maintaining aspect ratio */
    pointer-events: none; /* So the overlay doesn't interfere with clicks on the link */
    z-index: 1; /* Ensure it's above the mockup image */
}

.cover-image-container .template-overlay-image-non-2d {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* Ensures the entire overlay is visible, maintaining aspect ratio */
    pointer-events: none; /* So the overlay doesn't interfere with clicks on the link */
    z-index: 1; /* Ensure it's above the mockup image */
}