/***************************************************************************
* 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);}