/* page自由排版使用 */
/* CSS Grid System for xxx_column.php */
:root {
    --gap-size: 0px; /* Default gap size */
}
/* 1_1_column: Two columns with equal width */
.mygrid-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-size);
}

/* 1_2_column: Two columns with 1:2 ratio */
.mygrid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap-size);
}

/* 1_1_1_column: Three columns with equal width */
.mygrid-1-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-size);
}

/* 1_column: Single column */
.mygrid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-size);
}

/* 2_1_column: Two columns with 2:1 ratio */
.mygrid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gap-size);
}

/* 3_1_column: Two columns with 3:1 ratio */
.mygrid-3-1 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--gap-size);
}

/* gap_column: Customizable gap-only layout */
.mygrid-gap {
    display: grid;
    gap: var(--gap-size);
}

/* default_page: Default layout */
.mygrid-default {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-size);
}

/* Responsive Design */
@media (max-width: 768px) {
    .mygrid-1-1,
    .mygrid-1-2,
    .mygrid-1-1-1,
    .mygrid-2-1,
    .mygrid-3-1 {
        grid-template-columns: 1fr;
    }
}