.fancy-container {
    max-width: 1100px;
    width: 100%;
    margin: 42px auto 44px auto;
    border-radius: 28px;
    box-shadow:
        0 20px 80px -4px rgba(44, 60, 180, 0.72),
        0 28px 128px 0 rgba(44, 50, 100, 0.19);
    overflow: visible;
    background: none;
    position: relative;
    display: block;
}

.fancy-banner-image-wrapper {
    border-radius: 28px;
    overflow: hidden;    /* ensures image corners are rounded */
    width: 100%;
    height: 136px;
    /* Flat banner */
}

.fancy-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #dde8fc;
    border: 0;
}

.fancy-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    /* Transparent to avoid white/black peeking through */
    border-radius: 16px;
    /* Optional, for look—but only the image needs it */
}

/* Regular image style for rounded corners */
.fancy-image {
    border-radius: 16px;
    max-width: 100%;
    height: auto;
    display: block;
    background: #dde8fc;
    /* Soft color for PNG transparency, matches banners, or use transparent if you prefer */
    margin: 0 auto;
    border: 0;
}

/* Caption styles */
.fancy-image-caption {
    margin-top: 0.6em;
    font-size: 1em;
    color: #5a5a5a;
    text-align: center;
    /* Ensure no border-radius, overflow, or position/absolute */
}