* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
}

/* container */
.container {
    width: 100%;
    /* max-width: 1280px; */
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

/* 12 column grid */
.row { 
    display: flex;
    flex-flow: row wrap; 
    margin: 0 -0.5rem;
}

[class^="col-"]{ flex: 1 0 auto; padding: 0 0.5rem; }
.col-1{ flex-basis: 8.33%; max-width: 8.33%;}
.col-2{ flex-basis: 16.66%; max-width: 16.66%;}
.col-3{ flex-basis: 25%; max-width: 25%;}
.col-4{ flex-basis: 33.33%; max-width: 33.33%;}
.col-5{ flex-basis: 41.66%; max-width: 41.66%;}
.col-6{ flex-basis: 50%; max-width: 50%;}
.col-7{ flex-basis: 58.33%; max-width: 58.33%;}
.col-8{ flex-basis: 66.66%; max-width: 66.66%;}
.col-9{ flex-basis: 75%; max-width: 75%;}
.col-10{ flex-basis: 83.33%; max-width: 83.33%;}
.col-11{ flex-basis: 91.66%; max-width: 91.66%;}
.col-12{ flex-basis: 100%; max-width: 100%;}

@media screen and (max-width: 768px) {
    .container {
        padding: 0 1rem;
        max-width: 100%;
    }

    [class^="col-"] { 
        flex-basis: 100%; 
        max-width: 100%; 
    }
}

@media screen and (min-width: 1920px) {
    .container {
        max-width: 1680px;
    }
}

@media screen and (min-width: 2560px) {
    .container {
        max-width: 1800px;
    }
}