/***************************************************************************
* Row
****************************************************************************/
.row {max-width: none; width: 100%;}

/*.row.no_gap_right {width: calc(100% - 1em); margin-left: 1em;}*/

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

/***************************************************************************
* Vertical Row
****************************************************************************/
.vertical_row {
    display: flex; 
    flex-direction: column;
    flex-wrap: nowrap;
}




/***************************************************************************
* Columns
****************************************************************************/
/*@media screen and (max-width:39.9375em){
    .content_section .mobile_section_column {
        padding-top: var(--typo-section-gap);
        padding-bottom: var(--typo-section-gap);
        background-color: var(--typo-color-grey-light);
        margin-top: 2rem;
    }
    .content_section:has(.mobile_section_column:last-child) {
        padding-bottom: 0;
    }
}*/


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


/***************************************************************************
* Border Bottom
****************************************************************************/
.has_border_bottom {border-bottom: 1px solid currentColor;}
.has_border_top {border-top: 1px solid currentColor;}
.has_border_left {border-left: 1px solid currentColor;}
.has_border_right {border-right: 1px solid currentColor;}




/***************************************************************************
* Tags
****************************************************************************/
.tag {
    display: inline-block;
    vertical-align: middle;
    padding: 0.25em 0.375em;
    background-color: var(--typo-color-black);
    color: var(--typo-color-white);
    border-radius: var(--typo-border-radius);
    text-transform: uppercase;
    font-size: calc(var(--typo-calc-size) * 0.8125rem);
    font-weight: 700;
    margin: 0 0.25em 0.25em 0;
    line-height: 1;
}
.tag.members-only {
    background-color: var(--typo-color-yellow);
    color: var(--typo-color-black);
}


/***************************************************************************
* Margin Gap
****************************************************************************/
.margin_gap { margin: var(--typo-gap);}
.margin_gap_x { margin-left: var(--typo-gap);margin-right: var(--typo-gap);}
.margin_gap_y { margin-top: var(--typo-gap); margin-bottom: var(--typo-gap);}
.margin_gap_top { margin-top: var(--typo-gap);}
.margin_gap_bottom { margin-bottom: var(--typo-gap);}
.margin_gap_left { margin-left: var(--typo-gap);}
.margin_gap_right { margin-right: var(--typo-gap);}


.margin_gap_section { margin: var(--typo-section-gap);}
.margin_gap_section_x { margin-left: var(--typo-section-gap);margin-right: var(--typo-section-gap);}
.margin_gap_section_y { margin-top: var(--typo-section-gap); margin-bottom: var(--typo-section-gap);}
.margin_gap_section_top { margin-top: var(--typo-section-gap);}
.margin_gap_section_bottom { margin-bottom: var(--typo-section-gap);}
.margin_gap_section_left { margin-left: var(--typo-section-gap);}
.margin_gap_section_right { margin-right: var(--typo-section-gap);}