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;
    height: 800px;
    grid-template: 200px 300px / repeat(3, 1fr);
    justify-items: end;
    align-items: end;
justify-content: center;
    gap: 100px 50px;
}

.grid-3 {
    display: grid;
    grid-template: repeat(2, auto) / repeat(3, 1fr);
    grid-auto-columns: 300px;
    grid-auto-rows: auto;
    grid-auto-flow: column;
}
.grid-4 {
    display: grid;
   grid-template: repeat(3, 1fr) /repeat(3, 2fr);
}
.grid-4__item--1{
/* grid-row-start: auto;
grid-row-end: auto;
grid-column-start: 1;
grid-column-end: 3; */
order: 6;
}
.grid-4__item--2{
order: 2;
}
.grid-4__item--3{
/* grid-column: 2 / col2; */
 /* grid-row: row2 /row4;  */
 order: 3;
}
.grid-4__item--4{
order: 4;
}
.grid-4__item--5{
/* grid-row-start: 2;
grid-row-end: 4; */
/* grid-column-start: 3;
grid-column-end: 4; */
order: 5;
}
.grid-4__item--6{
order: 1;
}