.ad-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.ad-container img {
    width: 100%;
    display: block;
    transition: opacity 1s ease-in-out;
}

.client-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 10;
}

/* Ensure this is present and correct */
.ad-container img {
    /* ... (other styles like width, aspect-ratio) ... */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out, filter 1s ease-in-out;
}

/* Make sure all these "out" and "in" classes are defined */

/* Fade Effect */
.fade-out {
    opacity: 0;
}
.fade-in {
    opacity: 1;
}

/* Slide Left Effect */
.slide-left-out {
    transform: translateX(-100%);
    opacity: 0;
}
.slide-left-in {
    transform: translateX(0);
    opacity: 1;
}

/* Zoom Effect */
.zoom-out {
    transform: scale(0.8);
    opacity: 0;
}
.zoom-in {
    transform: scale(1);
    opacity: 1;
}

/* Rotate Effect */
.rotate-out {
    transform: rotateY(90deg);
    opacity: 0;
}
.rotate-in {
    transform: rotateY(0deg);
    opacity: 1;
}

/* Blur Effect */
.blur-out {
    filter: blur(5px);
    opacity: 0;
}
.blur-in {
    filter: blur(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .ad-container {
        max-width: 100%;
    }
}