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

    xs-sm-md — mobile-view

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

/* при ширине менее 576px | класс — xs | вертикальная раскладка телефона */
@media (max-width: 576px) {
    h1 {
        font-size: 2rem;
    }
    footer {
        padding: 3rem 0;
    }
    .subtitles {
        font-size: 1.2rem;
        padding: .35rem 1rem;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0;
        width: 100%;
        text-align: center;
    }
    .section-title {
        font-size: 1.5rem;
        margin: 2.5rem 0;
    }
    .subsection {
        margin-bottom: 3rem;
    }
    .new-of-brand-block {
        box-shadow: none;
    }
}

/* ширина от 576px до 758px | класс — sm | гориз. раскладка телефона и вертик. планшета */
@media (min-width: 576px) {
    h1 {
        font-size: 2rem;
    }
    footer {
        padding: 3rem 0;
    }
    .subtitles {
        font-size: 1.2rem;
        padding: .35rem 1rem;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0;
        width: 100%;
        text-align: center;
    }
    .section-title {
        font-size: 1.5rem;
        margin: 2.5rem 0;
    }
    .subsection {
        margin-bottom: 3rem;
    }
    .new-of-brand-block {
        box-shadow: none;
    }
}

/* ширина от 768px до 992px | класс — md | вертик\гориз. раскладка планшета */
@media (min-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    footer {
        padding: 3rem 0;
    }
    .subtitles {
        font-size: 1.2rem;
        padding: .35rem 1rem;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0;
        width: 100%;
        text-align: center;
    }
    .section-title {
        font-size: 1.5rem;
        margin: 2.5rem 0;
    }
    .subsection {
        margin-bottom: 3rem;
    }
    .new-of-brand-block {
        box-shadow: none;
    }
}

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

/* ширина от 992px до 1200px | класс — lg */
@media (min-width: 992px) {
    h1 {
        font-size: 2.2rem;
    }
    footer {
        padding: 4rem 0;
    }
    .subtitles {
        font-size: 1.6rem;
        font-weight: bold;
        padding: .65rem 2rem;
        margin-bottom: 2rem;
        text-transform: uppercase;
        letter-spacing: .1rem;
        width: fit-content;
    }
    .section-title {
        font-size: 2.3rem;
        font-weight: bold;
        margin-bottom: 4rem;
    }
    .subsection {
        margin-bottom: 4rem;
    }
    .new-of-brand-block {
        box-shadow: 0 -6px 5px 0 rgb(162 162 162 / 21%);
    }
}

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

}

/* а для экранов от 1366px (шире большинства ноутов) можно сделать контейнер и пошире чем 1140 */
@media (min-width: 1366px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1290px;
    }
    h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1600px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1560px;
    }
    h1 {
        font-size: 2.5rem;
    }
}