/* Sheets Banners — Frontend styles */

/* ── Grupo contenedor ────────────────────────────────────── */
.sb-group {
    box-sizing: border-box;
    width: 100%;
}

/* ── Banner individual ───────────────────────────────────── */
.sb-banner {
    box-sizing: border-box;
    display: block;
    line-height: 0;
    overflow: hidden;
}

.sb-banner__link {
    display: block;
    text-decoration: none;
    transition: opacity .2s ease;
    line-height: 0;
}

.sb-banner__link:hover {
    opacity: .85;
}

.sb-banner__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ── Layout: vertical (default) ──────────────────────────── */
/* El estilo inline maneja el flex-direction:column          */

/* ── Layout: horizontal ──────────────────────────────────── */
/* El estilo inline maneja flex-direction:row con 1/N width  */
.sb-layout--horizontal .sb-banner__img {
    width: 100%;
    height: auto;
}

/* ── Layout: grid ────────────────────────────────────────── */
/* El estilo inline maneja grid-template-columns             */
.sb-layout--grid .sb-banner {
    width: 100%;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {

    /* horizontal → apila en móvil */
    .sb-layout--horizontal {
        flex-wrap: wrap !important;
    }
    .sb-layout--horizontal .sb-banner {
        flex: 0 1 100% !important;
    }

    /* grid → 2 columnas en tablet/móvil grande */
    .sb-layout--grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {

    /* grid → 1 columna en móvil chico */
    .sb-layout--grid {
        grid-template-columns: 1fr !important;
    }
}