:root {
    --body-container: 1400px;
    --bg-section: #141414;
    --border-section: rgba(255, 255, 0, 0.774);
    --bg-container: rgb(164, 255, 122);
    --bg-grid-box: rgb(139, 213, 247);
}

body,
html {
    margin: 0;
    padding: 0;
}

h1,h2 {
    margin: 0;
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 8vw;
    padding-bottom: 8vw;
    background-color: var(--bg-section);
    border-bottom: 3px solid var(--border-section);
}

.container {
    width: 100%;
    background-color: var(--bg-container);
    display: flex;
    flex-direction: column;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

.section-boxed .container {
    max-width: var(--body-container);
}


/* section: intro */

section#intro .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /*grid-template-columns: 1fr 200px 1fr;*/
    row-gap: 1vw;
    column-gap: 1vw;
    grid-auto-rows: minmax(2vw, auto);
}

section#intro .grid-wrapper .grid-box {
    background-color: var(--bg-grid-box);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

section#intro .grid-wrapper .grid-box.grid-box-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

section#intro .grid-wrapper .grid-box.grid-box-2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}

section#intro .grid-wrapper .grid-box.grid-box-3 {
    grid-column: 1 / 4; /*shorthand*/
    grid-row: 3 / 4; /*shorthand*/
}


/* section: mech-human */

section#mech-human-gallery .grid-wrapper {
    display: grid;
    gap: 1vw;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 8.333vw;
}

section#mech-human-gallery .grid-wrapper .grid-box {
    background-color: rgb(90, 90, 211);
}

section#mech-human-gallery .grid-wrapper .grid-box.grid-box-1 {
    justify-content: center;
    grid-row: 1 / 4;
    grid-column: 3 / 6;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-2 {
    grid-row: 1 / 4;
    grid-column: 7 / 10;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-3 {
    grid-row: 1 / 3;
    grid-column: 10 / 12;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-4 {
    grid-row: 3 / 6;
    grid-column: 10 / 13;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-5 {
    grid-row: 5 / 6;
    grid-column: 2 / 5;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-6 {
    grid-row: 5 / 6;
    grid-column: 6 / 9;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-7 {
    grid-row: 7 / 8;
    grid-column: 2 / 5;
}
section#mech-human-gallery .grid-wrapper .grid-box.grid-box-8 {
    grid-row: 7 / 8;
    grid-column: 6 / 9;
}