.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.flex-fill-height {
    flex: 2;
    display: flex;
}

.align-c {
    justify-content: center;
}

.align-m {
    display: flex;
    align-items: center;
}

.align-t {
    display: flex;
    align-items: flex-start;
}

.align-b {
    display: flex;
    align-items: flex-end;
}

.align-r {
    display: flex;
    justify-content: flex-end;
}

.align-l {
    display: flex;
    justify-content: flex-start;
}

.pull-top {
    vertical-align: top;
}

.distribute-fit {
    justify-content: space-between;
}

.distribute-fit-y {
    flex-direction: column;
    justify-content: space-between;
}

.space-evenly {
    justify-content: space-evenly;
}

.flex-start-y {
    align-items: flex-start;
}

.flex-fit {
    flex-basis: fit-content;
}

.flex-nowrap {
    flex-wrap: nowrap;
}


/* //RATIO */

.ratio::before {
    content: '';
    float: left;
}

.ratio::after {
    content: '';
    display: block;
    clear: both;
}

.ratio.ratio-100::before {
    padding-top: 100%;
}

.ratio.ratio-50::before {
    padding-top: 50%;
}

.ratio.ratio-20::before {
    padding-top: 20%;
}


/* BORDER */

.border {
    border-width: 1px;
    border-color: #333;
}

.border.border-top {
    border-top-style: solid;
}

.border.border-all {
    border-style: solid;
}


/* WIDTH */

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}


/* PADDING */

.p-sm {
    padding: 1rem;
}

.p-md {
    padding: 2rem;
}

.p-lg {
    padding: 3rem;
}


/* BG COLORS */

.bg-color-while {
    background-color: #ffffff;
}

.bg-color-light {
    background-color: #c7cdd4;
}

.bg-color-dark {
    background-color: #5a7686;
}


/* HEIGHT */

.h-600 {
    height: 60rem;
}

.h-300 {
    height: 30rem;
}

.h-400 {
    height: 40rem;
}