body {
    background-color: #1b1b1d;
    color: #fff;
    font-family: sans-serif;
}

.wrapper {
    padding: 50px;
    min-height: 100%;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

.grid {
    margin-bottom: 200px;
    padding-bottom: 200px;
    border-bottom: 10px solid #363636;
    min-height: 100vh;
}

.item {
    border: 5px dashed #555;
    font-size: 40px;
    padding: .8em;
    text-align: center;
}

/* ======================================================== */

.grid-1 {
    display: grid;
    grid-template: 300px 200px / repeat(3, 1fr);
    /* justify-content: center;
    align-content: center; */
    gap: 20px 100px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);

    grid-auto-columns: 400px;
    grid-auto-rows: auto;
    grid-auto-flow: column;
}

.grid-4 {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.grid-4__item--1 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    order: 4;
}
.grid-4__item--2 {
    grid-column: 1 / 4;
}
.grid-4__item--3 {
    grid-column: 1/4;
}
.grid-4__item--4 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}
.grid-4__item--5 {
    grid-column: 2 / 3 ;
}
.grid-4__item--6 {
   
}