section.segments {
    margin: auto;
    max-width: var( --page-width );
}
section.segments .segment.hidden {
    display: none;
}
body.sidebar section.segments {
    margin: 0px;
    max-width: none;
}



/**
 * Debug
 */
section {
    --debug-border-width: 0px;
    border: var( --debug-border-width ) solid white;
}
section.segments {
    border: var( --debug-border-width ) solid red;
}
section.segments > div {
    border: var( --debug-border-width ) solid orange;
}
section.segments li {
    border: var( --debug-border-width ) solid lightcoral;
}
section.segments .columnsLeft {
    border: var( --debug-border-width ) solid darkmagenta;
}
section.segments .columnsRight {
    border: var( --debug-border-width ) solid darkmagenta;
}
section.segments .segmentFeaturesItem {
    border: var( --debug-border-width ) solid lightcoral;
}
section.segments p {
    border: var( --debug-border-width ) solid plum;
}
section.segments svg {
    border: var( --debug-border-width ) solid slateblue;
}



/**
 * Columns
 */
body {
    --column-gap: 80px;
}
section.segments .columns {
    display: flex;
}
section.segments .columns.reverse {
    flex-direction: row-reverse;
}
@media ( max-width: 800px ) {
    section.segments .columns {
        flex-direction: column;
    }
    section.segments .columns.reverse {
        flex-direction: column;
    }
}

/**
 * Columns left
 */
section.segments .columns .columnsLeft {
    position: relative;
    width: 50%;
    flex-grow: 1;
    margin-left: 0px;
    margin-right: calc( var( --column-gap ) / 2 );
}
section.segments .columns.reverse .columnsLeft {
    margin-left: calc( var( --column-gap ) / 2 );
    margin-right: 0px;
}
@media ( max-width: 800px ) {
    section.segments .columns .columnsLeft {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 50px;
        padding: 0px var( --mobile-side-margin );
    }
}

/**
 * Columns right
 */
section.segments .columns .columnsRight {
    position: relative;
    width: 50%;
    flex-grow: 1;
    margin-left: calc( var( --column-gap ) / 2 );
    margin-right: 0px;
}
section.segments .columns.reverse .columnsRight {
    margin-left: 0px;
    margin-right: calc( var( --column-gap ) / 2 );
}
@media ( max-width: 800px ) {
    section.segments .columns .columnsRight {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px var( --mobile-side-margin );
    }
}



/**
 * Content
 */
section.segments .content h2 {
    font-size: 50px;
    font-weight: 300;
}
section.segments .content h3 {
    font-size: 20px;
    font-weight: bold;
}
section.segments .content h2:empty,
section.segments .content h3:empty {
    display: none;
}
section.segments .content p {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 20px;
}
section.segments .content p:last-child {
    margin-bottom: 0px;
}
section.segments.dark .content p {
    color: #dddddd;
}