/* Typography */
.typo-headline {
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 140%;
    letter-spacing: -10;
}
.typo-title {
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 140%;
}
.typo-body {
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
}
.typo-label {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 150%;
}

/* Colors */
.color-gray--10 { color: #f9f9f9; }
.color-gray--20 { color: #e9e9e9; }
.color-gray--30 { color: #D4D4D4; }
.color-gray--50 { color: #707070; }
.color-gray--70 { color: #4E4E4E; }
.color-gray--100 { color: #303030; }
.color-error--10 { color: #FFF2F2; }
.color-error--100 { color: #FF0000; }
.color-primary { color: #1C873B; }

/* Spacing */
.row-gap--96 { row-gap: 6rem; }
.row-gap--80 { row-gap: 5rem; }
.row-gap--64 { row-gap: 4rem; }
.row-gap--40 { row-gap: 2.5rem; }
.row-gap--32 { row-gap: 2rem; }
.row-gap--24 { row-gap: 1.5rem; }
.row-gap--20 { row-gap: 1.25rem; }
.row-gap--16 { row-gap: 1rem; }
.row-gap--12 { row-gap: 0.75rem; }
.row-gap--10 { row-gap: 0.625rem; }
.row-gap--8 { row-gap: 0.5rem; }
.row-gap--4 { row-gap: 0.25rem; }

.col-gap--96 { column-gap: 6rem; }
.col-gap--80 { column-gap: 5rem; }
.col-gap--64 { column-gap: 4rem; }
.col-gap--40 { column-gap: 2.5rem; }
.col-gap--32 { column-gap: 2rem; }
.col-gap--24 { column-gap: 1.5rem; }
.col-gap--20 { column-gap: 1.25rem; }
.col-gap--16 { column-gap: 1rem; }
.col-gap--12 { column-gap: 0.75rem; }
.col-gap--10 { column-gap: 0.625rem; }
.col-gap--8 { column-gap: 0.5rem; }
.col-gap--4 { column-gap: 0.25rem; }

/* Layout */
header,
main {
    width: 656px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 0.5rem;
}
footer {
    width: 656px;
    background-color: #D4D4D4;
    color: #303030;
    margin: 0 auto;
    border-radius: 0.5rem;
}
section {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    padding: 2.5rem;
}
article { 
    width: 100%; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}    
.item {
    width: 100%;
    display: grid;
    position: relative;
}
.col-merge {
    grid-column: 1 / 3;
}