/***************************************************************************
* Wrapper
****************************************************************************/
.wrapper {overflow: hidden;}

/***************************************************************************
* Row
****************************************************************************/

.row {max-width: 110rem;}

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


.vertical_row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}


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

/***************************************************************************
* Gaps | Section
****************************************************************************/
.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 {
    padding: var(--typo-section-gap);
}

/***************************************************************************
* Images
****************************************************************************/
.rounded_image .data_ratio,
.rounded_image img {
    border-radius: var(--typo-border-radius);
}

/***************************************************************************
* Margin
****************************************************************************/
.margin_top {
    margin-top: var(--typo-double-gap);
}


/***************************************************************************
* Video
****************************************************************************/
.video_wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 0 56.25%;
}

.video_wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%
}