/*Section width*/

.container-full-width {
    width: 100%;
    max-width: 2500px;
    margin-left:auto;
    margin-right:auto;
}

.container-page-width {
    width: 100%;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;
}

.container-page-width-wide {
    width: 100%;
    max-width: 1440px;
    margin-left:auto;
    margin-right:auto;
}

.container-page-width-small {
    width: 100%;
    max-width: 900px;
    margin-left:auto;
    margin-right:auto;
}


/*Section styling*/

.flex__center_top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.flex__center_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex__center_bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.flex__left_top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-start;
}
.flex__left_center {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-start;
}
.flex__left_bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-start;
}
.flex__right_top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-end;
}
.flex__right_center {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-end;
}
.flex__right_bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-end;
}

.container-flex-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
}


.full-screen-relative {
    position: relative;
    aspect-ratio: 2 / 3;
    width: 100%;
    max-height: 100vh;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media only screen and (min-width: 992px) {
        :root {
        --container-width: 960px;
    }
}

@media only screen and (min-width: 1200px) {
    :root {
        --container-width: 1140px;
    }
}

@media only screen and (min-width: 1400px) {
    :root {
        --container-width: 1320px;
    }
}

@media only screen and (min-width: 1700px) {

    :root {
        --container-width: 1640px;
    }

    .container-wide {
        max-width: var(--container-width);
    }
}