/* 要素を2列に並べるcolum layoutの実装 */

/* grid */
.grid-2cols {
    display: grid;
    gap: var(--space--4);
    grid-template-columns: 1fr 1fr;
}

/* flex */
.flex-2cols {
    --gap: var(--space--4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
.flex-2cols > * {
    flex-basis: calc(50% - var(--gap));
    flex-grow: 1;
}

/* grid */
.grid-2\:1 {
    display: grid;
    gap: var(--space--4);
    grid-template-columns: 2fr 1fr;
}

/* flex */
.flex-2\:1 {
    --gap:var(--space--4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
.flex-2\:1 > :nth-child(2n-1) {
    flex-basis: calc(66.66% - var(--gap));
    flex-grow: 1;
}
.flex-2\:1 > :nth-child(2n) {
    flex-basis: calc(33.33% - var(--gap));
    flex-grow: 1;
}

/* 複数要素をcenter寄せする記述の例 */

/* grid */
.grid-center {
    display: grid;
    place-content: center;
    place-items: center;
    aspect-ratio: 16/9;
}

/* flex */
.flex-center {
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
    aspect-ratio: 16/9;
}


/* 画像の上にcolor layerとcontentを重ねて表示する */

/* 共通styling */
.layered-box__content {
    color: #fff;
    font-size: var(--font-size--lg);
    padding: var(--space--2);
    border-bottom: solid 1px;
}
.layered-box__blacklayer {
    background: rgb(0 0 0 / 0.5);
}

/* gridでの実装 */
.layered-box--grid {
    display: grid;
}
.layered-box--grid > * {
    grid-area: 1 / 1;
}
.layered-box--grid > .layered-box__content {
    place-self: center;
}


/* position: absolute での実装 */
.layered-box--absolute {
    position: relative;
}
.layered-box--absolute > .layered-box__blacklayer {
    position: absolute;
    inset: 0;
}
.layered-box--absolute > .layered-box__content {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: max-content;
    max-width: 100%";
}

/* 4*4のgridに要素を配置 */
.grid-4x4 {
    display: grid;
    border: dashed 1px;
    gap: var(--space--2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    min-height: 400px;
    padding: 1px;
}
.box-a {
    grid-column: 1 /span 2;
    grid-row: 1 / span 4;
}
.box-b {
    grid-column: 3 / span 2;
    grid-row: 1 / span 2;
}
.box-c {
    grid-column: 3;
    grid-row: 3;
}
.box-d {
    grid-column: 4;
    grid-row: 4;
}

/* 名前付きgrid area */
.area-grid {
    display: grid;
    border: dashed 1px;
    gap: var(--space--2);
    max-width: 1200px;
    min-height: 100vh;
    margin-inline: auto;
    grid-template-areas: 
        "header"
        "main"
        "aside"
        "footer";
    grid-template-rows: auto 1fr auto auto;
    padding: 1px;
}
.header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.aside {
    grid-area: aside;
}
.footer {
    grid-area: footer;
}

/* 広いsaize */
@media (min-width: 768px) {
    .area-grid {
        grid-template-areas: 
            "header header"
            "main aside"
            "footer footer";
        grid-template-columns: 1fr 240px;
        grid-template-rows: auto 1fr auto;
    }
}