/* Serbest tasarım alanı — ön yüz ve builder için ortak temel stiller.
 * Yalnız bu dosya ön yüze yüklenir; builder ek olarak pb-canvas-editor.css
 * dosyasını da yükler. Buraya düzenleyiciye özel kurallar (hover outline,
 * tutamaç, klavuz vb.) konulmaz. */

/* === Animasyonlar (canvas bileşen stilleri) === */
@keyframes pb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pb-slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pb-zoom-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pb-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pb-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pb-scale-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes pb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes pb-blink-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pb-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 184, 0, 0.5)); } 50% { filter: drop-shadow(0 0 18px rgba(255, 184, 0, 0.95)); } }
@keyframes pb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pb-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }
@keyframes pb-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } }
@keyframes pb-wobble { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px) rotate(-2deg); } 30% { transform: translateX(5px) rotate(2deg); } }
@keyframes pb-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.2; } }
@keyframes pb-swing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } }
@keyframes pb-blur-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

/* === Canvas — taban yerleşim === */
.pb-canvas-scaler {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    overflow: hidden;
}
/* Site chrome — her satır kendi canvas yüksekliğine göre ölçeklenir (80px tavan yok) */
.site-chrome .pb-canvas-scaler {
    max-height: none;
}
/* Çok kolonlu satır — kolonlar ve serbest alanlar eşit yükseklikte */
.layout-row .grid > [data-col-id] {
    min-height: 0;
}
.layout-row .grid:has(> [data-col-id] .pb-canvas-scaler) {
    align-items: stretch;
}
.layout-row .grid > [data-col-id]:has(.pb-canvas-scaler) {
    display: flex;
    flex-direction: column;
}
.layout-row .grid > [data-col-id] .pb-canvas-scaler {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.pb-canvas-zone {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    box-sizing: border-box;
}
.pb-canvas-zone__bgimg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.45;
    pointer-events: none;
}
.pb-canvas-zone__stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* === Element kutusu === */
.pb-canvas-el {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
}
.pb-canvas-el img,
.pb-canvas-el iframe,
.pb-canvas-el video {
    display: block;
    width: 100%;
    height: 100%;
}
.pb-canvas-el--module {
    overflow: hidden;
}

/* === İçerik türleri === */
.pb-canvas-heading,
.pb-canvas-paragraph {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: auto;
}
.pb-canvas-el--heading > .pb-canvas-heading,
.pb-canvas-el--paragraph > .pb-canvas-paragraph,
.pb-canvas-el--slider .pb-canvas-slide-cap {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
}
.pb-canvas-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}
.pb-canvas-container-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 40px;
}
.pb-canvas-container-inner.grid,
.pb-canvas-container-inner.inline-grid {
    height: auto;
    min-height: 100%;
}
.pb-canvas-el[data-grid-child="1"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
}
.pb-canvas-container-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
.pb-canvas-shape-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* === Slider === */
.pb-canvas-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}
.pb-canvas-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.pb-canvas-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.pb-canvas-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pb-canvas-slide-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    color: #fff;
}
.pb-canvas-slide-cap strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}
.pb-canvas-slide-cap span {
    display: block;
    font-size: 13px;
    opacity: 0.85;
}
.pb-canvas-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 12;
    pointer-events: auto;
}
.pb-canvas-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    transition: background 0.2s, transform 0.2s;
}
.pb-canvas-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}
.pb-canvas-dot.active {
    background: #ffb800;
    transform: scale(1.2);
}
.pb-canvas-slider-prev,
.pb-canvas-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: background 0.2s;
}
.pb-canvas-slider-prev { left: 12px; }
.pb-canvas-slider-next { right: 12px; }
.pb-canvas-slider-prev:hover,
.pb-canvas-slider-next:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* === Modül embed === */
.pb-canvas-module-embed,
.pb-canvas-module-embed--live {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.pb-canvas-module-embed .module,
.pb-canvas-module-embed section,
.pb-canvas-module-embed .lp-skin,
.pb-canvas-module-embed--live .module,
.pb-canvas-module-embed--live section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
.pb-canvas-module-embed .lp-module--flush,
.pb-canvas-module-embed .module.lp-module--flush,
.pb-canvas-module-embed--live .lp-module--flush {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}
/* Gömülü modül — satır yüksekliğini doldur (logo, menü vb.) */
.pb-canvas-module-embed .module,
.pb-canvas-module-embed--live .module {
    height: 100% !important;
    min-height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}
.pb-canvas-module-embed .module-site_logo,
.pb-canvas-module-embed--live .module-site_logo {
    display: flex !important;
    align-items: stretch !important;
}
.pb-canvas-module-embed .site-logo-mod--fill,
.pb-canvas-module-embed--live .site-logo-mod--fill {
    height: 100% !important;
    min-height: 100% !important;
    padding: 2px 4px !important;
    box-sizing: border-box;
}
.pb-canvas-module-embed .site-logo-mod--fill img,
.pb-canvas-module-embed--live .site-logo-mod--fill img {
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}
/* Ön yüzde modül embed tam etkileşimli (yalnızca builder olmayan body'lerde) */
body:not([data-pb-builder="1"]) .pb-canvas-module-embed,
body:not([data-pb-builder="1"]) .pb-canvas-module-embed--live {
    pointer-events: auto;
}

/* === Animasyon hizmetçileri === */
.pb-fade-in, .pb-slide-up, .pb-slide-down, .pb-zoom-in, .pb-bounce, .pb-pulse,
.pb-rotate, .pb-scale-pop, .pb-shake, .pb-blink-soft, .pb-glow, .pb-float, .pb-wave,
.pb-heartbeat, .pb-wobble, .pb-flash, .pb-swing, .pb-blur-in {
    animation-fill-mode: both;
}

/* CMS dinamik veri bağlama */
.cdb-panel,
.cdb-repeater-panel {
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid rgba(255, 184, 0, 0.35);
    border-radius: 10px;
    background: rgba(255, 184, 0, 0.06);
}
.cdb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.cdb-preview {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    line-height: 1.45;
}
.cdb-preview-label {
    display: block;
    opacity: 0.65;
    margin-bottom: 4px;
}
.cdb-preview-value {
    display: block;
    word-break: break-word;
}
.cdb-unbind {
    margin-top: 8px;
}
.pb-data-bind-badge {
    display: inline-flex;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.2;
    vertical-align: middle;
    background: rgba(255, 184, 0, 0.25);
    color: #ffb800;
    pointer-events: none;
}

/* Dinamik Liste (Modül 12) — akış modu, scrollbar yok */
.pb-canvas-el--dynamic_list,
.pb-canvas-el--flow {
    overflow: visible !important;
    height: auto !important;
}

.pb-dynamic-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.pb-dynamic-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: inherit;
}

@media (max-width: 640px) {
    .pb-dynamic-list--grid {
        grid-template-columns: 1fr;
    }
}

.pb-dynamic-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    height: auto;
    overflow: visible;
}

.pb-dynamic-list-item.flex-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.pb-dynamic-list-template-el,
.pb-dynamic-list-field {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

/* Liste içinde metin — sabit yükseklik / scrollbar KAPALI */
.pb-dynamic-list .pb-canvas-heading,
.pb-dynamic-list .pb-canvas-paragraph,
.pb-dynamic-list-field .pb-canvas-heading,
.pb-dynamic-list-field .pb-canvas-paragraph {
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin: 0;
    overflow: visible !important;
    line-height: 1.35;
}

.pb-dynamic-list-field--heading .pb-canvas-heading {
    font-size: inherit;
    font-weight: inherit;
}

.pb-dynamic-list-field--paragraph .pb-canvas-paragraph {
    font-size: inherit;
}

.pb-dynamic-list-field img {
    width: 100%;
    height: auto;
    max-height: 12rem;
    object-fit: cover;
}

.pb-dynamic-list-meta {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    padding: 8px 4px 0;
    margin-top: 4px;
}

.pb-dynamic-list-empty,
.pb-dynamic-list-hint {
    font-size: 13px;
    color: #94a3b8;
    padding: 12px;
    text-align: center;
}

.pb-api-bind-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
    background: rgba(255, 184, 0, 0.2);
    color: #ffb800;
    padding: 1px 5px;
    border-radius: 4px;
    pointer-events: none;
}

.pb-canvas-nested-el {
    cursor: pointer;
}

.pb-canvas-nested-el:hover {
    outline: 1px dashed rgba(255, 184, 0, 0.45);
}

/* Tuvalde dinamik liste olan zone — içerik kırpılmasın */
.pb-canvas-zone:has(.pb-canvas-el--dynamic_list) {
    overflow: visible;
}

.pb-canvas-scaler:has(.pb-canvas-el--dynamic_list) {
    overflow: visible;
}

/* === Satır bento ızgara (ön yüz + builder) === */
.layout-row .layout-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: stretch;
}
.layout-row .layout-bento--ratio-8-4 { grid-template-columns: 2fr 1fr; }
.layout-row .layout-bento--ratio-4-8 { grid-template-columns: 1fr 2fr; }
.layout-row .layout-bento--ratio-7-5 { grid-template-columns: 7fr 5fr; }
.layout-row .layout-bento--ratio-5-7 { grid-template-columns: 5fr 7fr; }
.layout-row .layout-bento--ratio-9-3 { grid-template-columns: 3fr 1fr; }
.layout-row .layout-bento--ratio-3-9 { grid-template-columns: 1fr 3fr; }
.layout-row .layout-bento--ratio-2-10 { grid-template-columns: 1fr 5fr; }
.layout-row .layout-bento--ratio-10-2 { grid-template-columns: 5fr 1fr; }
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-8-4,
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-7-5,
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-9-3,
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-10-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-4-8,
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-5-7,
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-3-9,
.layout-row .layout-bento--top_2bottom.layout-bento--ratio-2-10 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 2fr; }
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-8-4,
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-7-5,
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-9-3,
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-10-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 2fr; }
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-4-8,
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-5-7,
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-3-9,
.layout-row .layout-bento--bottom_2top.layout-bento--ratio-2-10 { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
.layout-row .layout-bento > [data-col-id] { min-height: 0; width: 100%; }
.layout-bento--left_2right > [data-col-id]:nth-child(1),
.layout-bento--left_2right_narrow > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.layout-bento--left_2right > [data-col-id]:nth-child(2),
.layout-bento--left_2right_narrow > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-bento--left_2right > [data-col-id]:nth-child(3),
.layout-bento--left_2right_narrow > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 2; }
.layout-bento--right_2left > [data-col-id]:nth-child(1),
.layout-bento--right_2left_narrow > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-bento--right_2left > [data-col-id]:nth-child(2),
.layout-bento--right_2left_narrow > [data-col-id]:nth-child(2) { grid-column: 1; grid-row: 2; }
.layout-bento--right_2left > [data-col-id]:nth-child(3),
.layout-bento--right_2left_narrow > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
.layout-bento--top_2bottom > [data-col-id]:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.layout-bento--top_2bottom > [data-col-id]:nth-child(2) { grid-column: 1; grid-row: 2; }
.layout-bento--top_2bottom > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 2; }
.layout-bento--bottom_2top > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-bento--bottom_2top > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-bento--bottom_2top > [data-col-id]:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.layout-bento--left_tall_3 > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.layout-bento--left_tall_3 > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-bento--left_tall_3 > [data-col-id]:nth-child(3) { grid-column: 3; grid-row: 1; }
.layout-bento--right_tall_3 > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-bento--right_tall_3 > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-bento--right_tall_3 > [data-col-id]:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
.layout-bento--middle_tall {
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.layout-bento--middle_tall > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-bento--middle_tall > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.layout-bento--middle_tall > [data-col-id]:nth-child(3) { grid-column: 3; grid-row: 1; }
.layout-bento--mosaic_4 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.layout-bento--mosaic_4 > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.layout-bento--mosaic_4 > [data-col-id]:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.layout-bento--mosaic_4 > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 2; }
.layout-bento--mosaic_4 > [data-col-id]:nth-child(4) { grid-column: 3; grid-row: 2; }
.layout-bento--mosaic_4_rev {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.layout-bento--mosaic_4_rev > [data-col-id]:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.layout-bento--mosaic_4_rev > [data-col-id]:nth-child(2) { grid-column: 1; grid-row: 2; }
.layout-bento--mosaic_4_rev > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 2; }
.layout-bento--mosaic_4_rev > [data-col-id]:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.layout-bento--left_3right {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.layout-bento--left_3right > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.layout-bento--left_3right > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-bento--left_3right > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 2; }
.layout-bento--left_3right > [data-col-id]:nth-child(4) { grid-column: 2; grid-row: 3; }
.layout-bento--right_3left {
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.layout-bento--right_3left > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-bento--right_3left > [data-col-id]:nth-child(2) { grid-column: 1; grid-row: 2; }
.layout-bento--right_3left > [data-col-id]:nth-child(3) { grid-column: 1; grid-row: 3; }
.layout-bento--right_3left > [data-col-id]:nth-child(4) { grid-column: 2; grid-row: 1 / 4; }
.layout-bento--top_3bottom {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1.4fr 1fr;
}
.layout-bento--top_3bottom > [data-col-id]:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.layout-bento--top_3bottom > [data-col-id]:nth-child(2) { grid-column: 1; grid-row: 2; }
.layout-bento--top_3bottom > [data-col-id]:nth-child(3) { grid-column: 2; grid-row: 2; }
.layout-bento--top_3bottom > [data-col-id]:nth-child(4) { grid-column: 3; grid-row: 2; }
.layout-bento--bottom_3top {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1.4fr;
}
.layout-bento--bottom_3top > [data-col-id]:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-bento--bottom_3top > [data-col-id]:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-bento--bottom_3top > [data-col-id]:nth-child(3) { grid-column: 3; grid-row: 1; }
.layout-bento--bottom_3top > [data-col-id]:nth-child(4) { grid-column: 1 / 4; grid-row: 2; }
@media (max-width: 768px) {
    .layout-row .layout-bento,
    .layout-row .layout-bento--mobile-stack,
    .layout-row .layout-bento--ratio-8-4,
    .layout-row .layout-bento--ratio-4-8 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .layout-row .layout-bento > [data-col-id],
    .layout-row .layout-bento--mobile-stack > [data-col-id] {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}