/* Banner Manager Styles */
.position-relative {
    position: relative;
}

.banner-manager-container {
    max-width: 1232px;
    margin: 2rem auto;
    padding: 0 16px;
}

/* Single Row Banner */
.banner-1-1col {
    width: 100%;
    margin-bottom: 2rem;
}

.banner-1-1col .banner__item {
    width: 100%;
}

.banner-1-1col .responsive-img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-1-1col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Two Column Banners */
.banner-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.banner-2-col .banner__item {
    width: 100%;
}

.banner-2-col .responsive-img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-2-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Three Column Banners (First column bigger) */
.banner-3-col {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.banner-3-col .banner__item {
    width: 100%;
}

.banner-3-col .banner__item--large {
    grid-column: span 1;
}

.banner-3-col .responsive-img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-3-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Responsive Styles */
@media (max-width: 767px) {
    .banner-manager-container {
        padding: 0 16px;
    }

    .banner-2-col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .banner-3-col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .banner-3-col .banner__item--large {
        grid-column: span 1;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .banner-3-col {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
}

/* Link Styles */
.banner__item a.link {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.banner__item a.link:hover {
    opacity: 0.9;
}

/* Picture Element Styles */
picture.responsive-img {
    display: block;
    width: 100%;
    height: auto;
}

picture.responsive-img img {
    width: 100%;
    height: auto;
    display: block;
}