/* /Components/SiteBannerSlot.razor.rz.scp.css */
.site-banner-slot-stack[b-7zw7734b50] {
    display: grid;
    gap: 1px;
}

.site-banner-group[b-7zw7734b50] {
    width: var(--banner-width);
    margin: var(--banner-margin-top) auto var(--banner-margin-bottom);
    display: grid;
    grid-template-columns: repeat(var(--banner-columns-desktop), minmax(0, 1fr));
    gap: var(--banner-gap);
}

.site-banner-card[b-7zw7734b50] {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #f6f7fb;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
}

.site-banner-card img[b-7zw7734b50] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--banner-ratio);
    object-fit: var(--banner-fit);
}

.site-banner-group.card-soft .site-banner-card[b-7zw7734b50] {
    border: 1px solid rgba(148, 163, 184, .34);
    box-shadow: none;
}

.site-banner-group.card-plain .site-banner-card[b-7zw7734b50] {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-banner-group.layout-single[b-7zw7734b50],
.site-banner-group.layout-carousel[b-7zw7734b50] {
    grid-template-columns: 1fr;
}

.site-banner-group.layout-grid-2x2[b-7zw7734b50] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-banner-group.layout-feature-grid[b-7zw7734b50] {
    grid-template-columns: 2fr 1fr;
}

.site-banner-group.layout-feature-grid .site-banner-card:first-child[b-7zw7734b50] {
    grid-row: span 2;
}

.site-banner-group.layout-feature-grid .site-banner-card:first-child img[b-7zw7734b50] {
    height: 100%;
}

@media (max-width: 1024px) {
    .site-banner-group[b-7zw7734b50],
    .site-banner-group.layout-feature-grid[b-7zw7734b50],
    .site-banner-group.layout-grid-2x2[b-7zw7734b50] {
        grid-template-columns: repeat(var(--banner-columns-tablet), minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .site-banner-group[b-7zw7734b50],
    .site-banner-group.layout-feature-grid[b-7zw7734b50],
    .site-banner-group.layout-grid-2x2[b-7zw7734b50] {
        width: min(100% - 20px, 1180px);
        grid-template-columns: repeat(var(--banner-columns-mobile), minmax(0, 1fr));
        margin-block: 20px;
    }

    .site-banner-card[b-7zw7734b50] {
        border-radius: 8px;
    }
}
