/*
    https://getbootstrap.com/docs/4.5/layout/overview/

    xs-sm-md — mobile-view

    сюда попадают телефоны в вертикальной и горизонтальной раскладках
    и планшеты в горизонтальной
*/

/* при ширине менее 576px | класс — xs | вертикальная раскладка телефона */
@media (max-width: 576px) {
    h1 {
        font-size: 1.6rem;
    }
    .lead {
        font-size: 1.15rem;
    }
    .card-title {
        font-size: 1rem;
    }
    .advantage {
        padding: 1.5rem;
    }
    .advantages h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    .advantage-desc {
        font-size: .9rem;
        color: #949494;
        margin-bottom: 0;
    }
    #mse2_sort .list-group-item {
        font-size: .8rem;
        padding: .15rem .25rem;
    }
    .mobile-crumbs a {
        text-decoration: none;
        color: #8a8a8a;
    }
    .product-crumbs a {
        color: #fff;
        text-decoration: none;
        font-size: .9rem;
    }
    .footer-logo {
        max-height: 50px;
    }
}

/* ширина от 576px до 758px | класс — sm | гориз. раскладка телефона и вертик. планшета */
@media (min-width: 576px) {
    h1 {
        font-size: 1.7rem;
    }
    .card-title {
        font-size: 1rem;
    }
    .header-menu {
        margin-bottom: 1.5rem;
    }
    #pills-auth-tabContent {
        width: 100%;
    }
    .login-nav-pills a.nav-link {
        font-size: 1.2rem;
        padding: .3rem 1rem;
        letter-spacing: 0;
    }
}

/* ширина от 768px до 992px | класс — md | вертик\гориз. раскладка планшета */
@media (min-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
    .card-title {
        font-size: 1rem;
    }
    #pills-auth-tabContent {
        width: 80%;
    }
    .login-nav-pills a.nav-link {
        font-size: 1.2rem;
        padding: .3rem 1rem;
        letter-spacing: 0;
    }
}

/*
    дальше уже идет desktop-view
    в lg могут попадать планшеты в горизонтальной раскладке
*/

/* ширина от 992px до 1200px | класс — lg */
@media (min-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }
    #pills-auth-tabContent {
        width: 50%;
    }
    .footer-logo {
        max-height: 80px;
    }
}

/* ширина от 1200px до бесконечности или как в данном случае до 1366 px | класс — xl */
@media (min-width: 1200px) {

}

/* а для экранов от 1366px (шире большинства ноутов) можно сделать контейнер и пошире чем 1140 */
@media (min-width: 1366px) {
    .container {
        max-width: 1300px;
    }
    .advantages h3 {
        font-size: 1.5rem;
        max-width: 230px;
        margin-bottom: 1.25rem;
        min-height: 75px;
    }
    .advantage-desc {
        font-size: 1rem;
        margin-bottom: 0;
        min-height: 80px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1350px;
    }
}