.layout__grid {
    margin: 0 var(--inner-margin-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.layout__col {
    min-width: 0;
    z-index: 0;
}

.layout__col--left {
    padding-bottom: var(--margin-4xl);
}

/* --- Desktop: 2 kolumny 50/50 [ left | right ] --------------------------- */
@media screen and (min-width: 720px) {
    .layout__grid {
        margin: 0;
        grid-template-columns: 1fr minmax(0, calc(var(--inner-width) / 2)) minmax(0, calc(var(--inner-width) / 2)) 1fr;
        grid-template-areas: ". left right .";
        align-content: start;
        overflow-x: clip; /* zabezpieczenie przed horyzontalnym scrollem przez ::after na kolumnach */
    }

    .layout__col--left {
        grid-area: left;
        padding-right: var(--space-2xl);
        padding-bottom: var(--margin-7xl);
        width: 100%;
        box-sizing: border-box;
        margin: 0 var(--inner-margin-x);
    }

    .layout__col--right {
        grid-area: right;
        align-items: flex-start;
        gap: var(--space-2xl);
        padding-top: var(--margin-2xl);
        padding-bottom: var(--margin-7xl);
        padding-left: var(--space-2xl);
        position: relative;
    }

    .layout__col--right::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: -100vw;
        z-index: -1;
        background: var(--layout-bg-right, transparent);
    }
}