/*
 * layout.css
 * Copyright (C) 2022 Benoit Rapidel
 *
 * Distributed under terms of the MIT license.
 */

:root {
    --grid-margin: 3rem;
}

/* Grid split in 2 columns */
.grid-col-halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--page-margin-lr);
    max-width: calc(100% - 2 * var(--page-margin-lr));
}

.grid-col-halves img {
    width: 100%;
}

.grid-col-halves .one {
    grid-column: 1;
}
.grid-col-halves .two {
    grid-column: 2;
}
.grid-col-halves .one.two {
    grid-column: 1 / span 2;
}
.grid-col-halves .all {
    grid-column: 1 / span 2;
}

/* Grid split in 3 columns */
.grid-col-thirds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--page-margin-lr);
    max-width: calc(100% - 2 * var(--page-margin-lr));
}

.grid-col-thirds img {
    width: 100%;
}

.grid-col-thirds .one {
    grid-column: 1;
}
.grid-col-thirds .two {
    grid-column: 2;
}
.grid-col-thirds .three {
    grid-column: 3;
}
.grid-col-thirds .one.two {
    grid-column: 1 / span 2;
}
.grid-col-thirds .two.three {
    grid-column: 2 / span 2;
}
.grid-col-thirds .all {
    grid-column: 1 / span 3;
}

/* Grid split in quarter with margins */
.grid-quarters-margin {
    display: grid;
    grid-template-rows: var(--grid-margin) repeat(4, auto) var(--grid-margin);
    grid-template-columns: var(--grid-margin) repeat(4, auto) var(--grid-margin);
}

.grid-quarters-margin .full {
    grid-row: 1 / 7;
    grid-column: 1 / 7;
    place-self: center;
}
.grid-quarters-margin .top-left {
    grid-row: 2;
    grid-column: 2;
}
.grid-quarters-margin .top-right {
    grid-row: 2;
    grid-column: 5;
}
.grid-quarters-margin .bottom-left {
    grid-row: 5;
    grid-column: 2;
}
.grid-quarters-margin .bottom-right {
    grid-row: 5;
    grid-column: 5;
}

:is(.grid-col-halves, .grid-col-thirds, .grid-quarters-margin) > * {
    margin: 0 !important;
}

.assembly-steps ol :is(.grid-col-halves, .grid-col-thirds, .grid-quarters-margin) {
    max-width: initial;
}


@media screen and (max-width: 520px) {
    :root {
        --grid-margin: 1rem;
    }
    .grid-col-halves, .grid-col-thirds {
        grid-template-columns: 1fr;
    }
    :is(.grid-col-halves, .grid-col-thirds) :is(.one, .two, .three, .one.two, .two.three, .all) {
        grid-column: initial;
    }
}