html {
    height: 100%;
    font-size: max(1rem, vw($fontSizeBase));
    overflow-x: clip;
    position: relative;
    scroll-behavior: smooth;
}

body {
    font-family: $baseFont;
    font-size: $baseFontSize;
    line-height: $baseLineHeight;
    color: $baseFontColor;
    background: $white;
    font-weight: $baseFontWeight;
    margin: 0;
    padding: 0;
    min-height: 100%;
    max-width: 100vw;
    overflow-x: clip;
    position: relative;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; 

    /* sticky footer */
    display: flex;
    flex-direction: column;
}

/* Box sizing */

*,
*:after,
*:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Forms */

form {
    display: block;
}
fieldset {
    border: none;
}
label {
    font-weight: bold;
}
input,
select,
button {
    vertical-align: top;
}
a,
a:hover,
a:active,
a:focus {
    outline: 0;
}

/* Various */

img {
    max-width: 100%;
    height: auto;
}

.last {
    margin-bottom: 0 !important;
}

/* Alignment */

.d-block {
    display: block;
}
.d-flex {
    display: flex;
}

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

.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}

.flex-grow-1 {
    flex-grow: 1;
}

.col-set {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.col2-set .col {
    width: 50%;
    margin-bottom: 1em;
}
.col3-set .col {
    width: 33.33333%;
    margin-bottom: 1em;
}
.col4-set .col {
    width: 25%;
    margin-bottom: 1em;
}

/* laptop < 1370 */
@media screen and (max-width: $xl) {
}

@media screen and (max-width: $lg) {
}

@media screen and (max-width: $md) {
}

/* mobile < 768 */
@media screen and (max-width: $sm) {
}

@media screen and (max-width: $xs) {
}

@media screen and (max-width: $xxs) {
}
