@media screen and (min-resolution: 100dpi) {
    html {
        font-size: 90%;
    }
}
@media screen and (min-resolution: 150dpi) {
    html {
        font-size: 80%;
    }
}
@media screen and (min-resolution: 200dpi) {
    html {
        font-size: 70%;
    }
}
@media (max-width: 1680px) {
    html {
        font-size: 100%;
    }
}

@media (max-width: 1600px) {
     
}

@media (max-width: 1440px) {
    html {
        font-size: 100%;
    }
}

@media (max-width: 1366px) {
    html {
        font-size: 100%;
    }
}

@media (max-width: 1280px) {
    html {
        font-size: 100%;
    }
    /* .cases .slider__item {
        width: 23em;
    } */
}

@media (max-width: 1200px) {
    html {
        font-size: 100%;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 100%;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 100%;
    }
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .row {
        position: static;
    }
    .col-sm {
        flex: 1 0 0%;
    }
    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .col-sm-hidden {
        display: none;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 414px) {
    html {
        font-size: 100%;
    }
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 375px) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 320px) {
    html {
        font-size: 60%;
    }
}