* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f5f5f5;
}

.ycg-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.column {
    /*background: #f9f9f9;*/
}

.column-left {
    border-color: #90caf9;
}

.column-center {
    border-color: #ce93d8;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .ycg-container {
        grid-template-columns: 1fr 300px;
    }

    .column-left {
        grid-column: 1;
    }

    .column-center {
        grid-column: 1;
    }

    .column-right {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 768px) {
    .ycg-container {
        grid-template-columns: 1fr;
    }

    .column-left {
        grid-column: 1;
        grid-row: auto;
    }

    .column-center {
        grid-column: 1;
        grid-row: auto;
    }

    .column-right {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Three-column layout (default) */
.ycg-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Two-column layout: center and right only, or left and right only */
.ycg-container.two-col {
    grid-template-columns: 1fr 300px;
}

/* Responsive adjustments */
@media (max-width: 992px) {

    .ycg-container,
    .ycg-container.two-col {
        grid-template-columns: 1fr 300px;
    }

    .column-left,
    .column-center {
        grid-column: 1;
    }

    .column-right {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 768px) {

    .ycg-container,
    .ycg-container.two-col {
        grid-template-columns: 1fr;
    }

    .column-left,
    .column-center,
    .column-right {
        grid-column: 1;
        grid-row: auto;
    }
}

/* One-column layout: no right rail */
.ycg-container.one-col {
    grid-template-columns: 1fr;
}

/* Responsive adjustments for one-col (optional, but keeps it explicit) */
@media (max-width: 992px),
(max-width: 768px) {
    .ycg-container.one-col {
        grid-template-columns: 1fr;
    }
}

.span-left-center {
    grid-column: 1 / 3;
    /* Optional: make it visually distinct */
    /* background: #f0f0f0; */
    /* margin-bottom: 1rem; */
}

@media (max-width: 992px) {
    .span-left-center {
        grid-column: 1 / 2;
    }
}


.ycg-container.center-split {
    .span-left-center {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .column-right {
        grid-column: 3;
        grid-row: 1 / span 2;
        /* Stays on the right, spanning both rows */
    }

    .column-left {
        grid-column: 1;
        grid-row: 2;
    }

    .column-center {
        grid-column: 2;
        grid-row: 2;
    }

    @media (max-width: 992px) {

        .span-left-center,
        .column-left,
        .column-center,
        .column-right {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
        }
    }
}

.ycg-container.left-fixed {
    display: grid;
    grid-template-columns: 350px 1fr 160px;
    gap: 20px;
}

.ycg-container.left-fixed .span-left-center {
    grid-column: 1 / 4;
    grid-row: 1;
}

.ycg-container.left-fixed .column-left {
    grid-column: 1;
    grid-row: 2;
}

.ycg-container.left-fixed .column-center {
    grid-column: 2;
    grid-row: 2;
}

.ycg-container.left-fixed .column-right {
    grid-column: 3;
    grid-row: 2;
}

.ycg-bs {
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 1320px;
    margin: 0 auto 1.5rem auto;
}