/***************************************************************************
* Wrapper & Body
****************************************************************************/
body { background-color: #f8f5f2;}

.wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding-top: 8rem;
}
.wrapper > * {
    width: 100%; 
    flex: 0 0 auto;
}
.wrapper > .content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.wrapper > .content > * {
    width: 100%;
    flex: 0 0 auto;
}

/***************************************************************************
* Row
****************************************************************************/
@media screen and (min-width:40em){
    .row {
        width: calc(100% - 4em);
    }
}
@media screen and (min-width:64em){
    .row {
        width: calc(100% - 8em);
    }
}

/***************************************************************************
* Gaps
****************************************************************************/
.gap { padding: var(--typo-gap);}
.gap_x { padding-left: var(--typo-gap); padding-right: var(--typo-gap);}
.gap_y {padding-top: var(--typo-gap);padding-bottom: var(--typo-gap);}
.gap_top { padding-top: var(--typo-gap);}
.gap_bottom { padding-bottom: var(--typo-gap);}
.gap_left { padding-left: var(--typo-gap);}
.gap_right { padding-right: var(--typo-gap);}

.gap_half { padding: var(--typo-half-gap);}
.gap_half_x { padding-left: var(--typo-half-gap); padding-right: var(--typo-half-gap);}
.gap_half_y {padding-top: var(--typo-half-gap);padding-bottom: var(--typo-half-gap);}
.gap_half_top { padding-top: var(--typo-half-gap);}
.gap_half_bottom { padding-bottom: var(--typo-half-gap);}
.gap_half_left { padding-left: var(--typo-half-gap);}
.gap_half_right { padding-right: var(--typo-half-gap);}

.gap_double { padding: var(--typo-double-gap);}
.gap_double_x { padding-left: var(--typo-double-gap); padding-right: var(--typo-double-gap);}
.gap_double_y {padding-top: var(--typo-double-gap);padding-bottom: var(--typo-double-gap);}
.gap_double_top { padding-top: var(--typo-double-gap);}
.gap_double_bottom { padding-bottom: var(--typo-double-gap);}
.gap_double_left { padding-left: var(--typo-double-gap);}
.gap_double_right { padding-right: var(--typo-double-gap);}


.gap_section { padding: var(--typo-section-gap);}
.gap_section_x { padding-left: var(--typo-section-gap); padding-right: var(--typo-section-gap);}
.gap_section_y {padding-top: var(--typo-section-gap);padding-bottom: var(--typo-section-gap);}
.gap_section_top { padding-top: var(--typo-section-gap);}
.gap_section_bottom { padding-bottom: var(--typo-section-gap);}
.gap_section_left { padding-left: var(--typo-section-gap);}
.gap_section_right { padding-right: var(--typo-section-gap);}