.header-container h2, .header-container h1, .header-container div {
    position: relative;
    font-size: 3.9rem;
    font-weight: bold;
    color: #292C3D;
    line-height: 3.333rem;
}

.header-container h2.border::after, .header-container h1.border::after, .header-container div.border::after {
    content: "";
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: 100vw;
    height: 0.2rem;
    background-color: #CACACE;
    z-index: 100;
}

.header-container h2::before, .header-container h1::before, .header-container div::before {
    content: "";
    position: absolute;
    left: -9rem;
    top: 1.4rem;
    width: 6.73rem;
    height: 0.27rem;
    background-color: #F42A3E;
    z-index: 100;
}

@media screen and (max-width: 768px) {
    .header-container h2.border::after, .header-container h1.border::after, .header-container div.border::after {
        content: "";
        position: absolute;
        bottom: -2.8rem;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        width: 100vw;
        height: 0.2rem;
        background-color: #CACACE;
        z-index: 100;
    }
}
@media screen and (max-width: 480px) {
    .header-container h2, .header-container h1, .header-container div {
        font-size: 1.944rem;
        line-height: 2.08rem;
    }
    .header-container h2::before, .header-container h1::before, .header-container div::before {
        left: -1.5rem;
        top: 0.8rem;
        width: 1.5rem;
    }
    .header-container h2.no-line::before, .header-container h1.no-line::before, .header-container div.no-line::before {
        display: none;
    }
}

.additional-body .show {
    display: block;
}

:is(.additional-body, .courses-slider) .card:hover {
    box-shadow: 5px 10px 30px 5px rgba(178, 181, 204, 0.6);
}

:is(.additional-body, .courses-slider) .card {
    padding: 2rem 2rem;
    border-radius: 1.6616rem;
    background: var(--cardColor);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    transition-property: transform, box-shadow;
    box-shadow: unset;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    text-overflow: ellipsis;
}
:is(.additional-body, .courses-slider) .card.hovered {
    box-shadow: 10px 15px 15px rgba(0, 0, 0, 0.25);
}
:is(.additional-body, .courses-slider) .card .card__top--box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.3rem;
    height: 3.5rem;
    font-size: 0.85rem;
    line-height: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #8A8A93;
}
:is(.additional-body, .courses-slider) .card .card_partner {
    text-align: right;
    margin-left: 5px;
    transition: 0.5s;
}
:is(.additional-body, .courses-slider) .card .card_partner:hover {
    color: #F42A3E;
}
:is(.additional-body, .courses-slider) .card .card_title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 6rem;
}
:is(.additional-body, .courses-slider) .card .card_description {
    margin-bottom: 1rem;
    color: #4f4f4f;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
:is(.additional-body, .courses-slider) .card .card_time,
:is(.additional-body, .courses-slider) .card .card_date {
    font-size: 1.3rem;
    line-height: 1.5rem;
}
:is(.additional-body, .courses-slider) .card .card_time {
    color: #292C3D;
    margin-bottom: 1rem;
}
:is(.additional-body, .courses-slider) .card .card_date {
    color: #292C3D;
    margin-bottom: 1.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
:is(.additional-body, .courses-slider) .card .card_date br {
    display: none;
}
:is(.additional-body, .courses-slider) .card .card_month {
    font-weight: 700;
}
:is(.additional-body, .courses-slider) .card .button {
    padding: 0.6rem 1rem;
    background: linear-gradient(141.72deg, #E61A2E 0%, #E82C5E 100%);
    border-radius: 2.014rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2rem;
    color: #FFFFFF;
    white-space: nowrapn;
}
:is(.additional-body, .courses-slider) .card .button.recommends {
    background: #069D93;
}
:is(.additional-body, .courses-slider) .card .button.recommends2 {
    background: #069D93;
}
:is(.additional-body, .courses-slider) .card .button.recommends3 {
    background: #069D93;
}
:is(.additional-body, .courses-slider) .card .button.recommends4 {
    background: #069D93;
}
:is(.additional-body, .courses-slider) .card .card__footer {
    /*height: 2.451rem;*/
    flex-wrap: wrap;
    gap: 7px;
}
:is(.additional-body, .courses-slider) .card .card__footer,
:is(.additional-body, .courses-slider) .card .card__bottom {
    display: flex;
    width: 100%;
}
:is(.additional-body, .courses-slider) .card .card__footer--left, :is(.additional-body, .courses-slider) .card .card__footer--right,
:is(.additional-body, .courses-slider) .card .card__bottom--left,
:is(.additional-body, .courses-slider) .card .card__bottom--right {
    flex-shrink: 1;
}
:is(.additional-body, .courses-slider) .card .card__footer--left,
:is(.additional-body, .courses-slider) .card .card__bottom--left {
    flex-grow: 1;
}
:is(.additional-body, .courses-slider) .card .card__footer--right,
:is(.additional-body, .courses-slider) .card .card__bottom--right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}
:is(.additional-body, .courses-slider) .card .card__footer--right img,
:is(.additional-body, .courses-slider) .card .card__bottom--right img {
    margin-bottom: 1px;
    cursor: pointer;
}

/*.button+.button {
    margin-left: 8px
}*/
@media (max-width: 480px) {
    :is(.additional-body, .courses-slider) .card .card__top--box {
        font-size: 0.65rem;
        line-height: 1rem;
        height: 2rem;
    }
    :is(.additional-body, .courses-slider) .card .card_title {
        font-size: 1.1rem;
        line-height: 1.5rem;
        margin-bottom: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 4.3rem;
    }
    :is(.additional-body, .courses-slider) .card .card_description {
        font-size: 1rem;
        line-height: 1.2rem;
        margin-bottom: 1.5rem;
    }
    :is(.additional-body, .courses-slider) .card .card_time, .card .card_date {
        font-size: 1rem;
        line-height: 1.2rem;
    }
    :is(.additional-body, .courses-slider) .card .card__footer {
        flex-direction: column;
        align-items: baseline;
        position: relative;
        height: auto;
    }
    :is(.additional-body, .courses-slider) .card .card__footer--right {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    :is(.additional-body, .courses-slider) .card .button {
        display: inline-block;
        padding: 0.8rem 0.5rem;
        font-size: 0.8rem;
        line-height: 0.8rem;
        margin-bottom: 0.5rem;
    }
    :is(.additional-body, .courses-slider) .card .button + .button {
        margin-left: 0;
    }
    :is(.additional-body, .courses-slider) .overflow {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
:is(.additional-body, .courses-slider) .card .card_date br {
    display: none;
}
.pagination_wrapper {
    display: flex;
    justify-content: center;
}
.pagination_wrapper a {
    width: 2.777rem;
    height: 2.777rem;
    border-radius: 100%;
    border: 0.138rem solid #CACACE;
    box-sizing: border-box;
    background: inherit;
    margin-right: 1.111rem;
    color: #CACACE;
    transition: all 0.35s;
    font-weight: bold;
    font-size: 1.11rem;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination_wrapper a:hover {
    color: #fff;
    border-color: #E61A2E;
    background-color: #E61A2E;
}
.pagination_wrapper .active {
    color: #fff;
    border-color: #E61A2E;
    background: linear-gradient(111.68deg, #E61A2E 0%, #E82C5E 100%);
}

@media screen and (max-width: 480px) {
    .pagination_wrapper a {
        width: 2.2rem;
        height: 2.2rem;
        margin-right: 0.2rem;
    }
}

/* Обёртки серверной разметки не должны ломать flex-раскладку родителя */
.dpo-tabs,
.dpo-cards {
    display: contents;
}

/* Вкладки направлений (стили components/Tabs/FilterTab.vue) */
.dpo-tabs .tab {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    padding: 1.11rem 1.38rem;
    border: .1rem solid #F1F1F1;
    margin-right: 1.1rem;
    background: #FFFFFF;
    border-radius: 3.33rem;
    cursor: pointer;
    transition: .35s;
    white-space: nowrap;
}
.dpo-tabs .tab span {
    color: #292C3D;
    font-size: 1.1rem;
    font-weight: bold;
}
.dpo-tabs .tab:hover {
    border: .1rem solid var(--tabColor);
    background-color: var(--tabColor);
}
.dpo-tabs .tab.isSelected {
    border: .1rem solid var(--tabColor) !important;
    background: var(--tabColor) !important;
}
/* Вкладки лежат в обёртке, поэтому повторяем правила dpo.css для прямых детей .container-search */
.dpo-tabs > * {
    margin-bottom: 2.3rem;
}
@media screen and (max-width: 768px) {
    .sticky-search .dpo-tabs > * {
        margin-bottom: 0 !important;
    }
}
.dpo-tabs:not(.dpo-tabs_open) .tab_extra,
.dpo-tabs_open .more {
    display: none;
}
@media screen and (max-width: 480px) {
    .dpo-tabs .tab {
        margin-bottom: 1rem;
    }
}

/* Пагинация каталога (стили components/CardsPagination.vue из блока «Курсы для вас») */
.cards-pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 1.4rem 0 3rem;
}
.cards-pagination__number,
.cards-pagination__arrow {
    display: flex;
    width: 2.6rem;
    height: 2.6rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid #292C3D;
    border-radius: 50%;
    color: #292C3D;
    cursor: pointer;
}
.cards-pagination > * + * {
    margin-left: 0.9rem;
}
.cards-pagination__number {
    font-size: 1.1rem;
    font-weight: bold;
    transition: color 0.3s, background-color 0.3s;
}
.cards-pagination__number:hover,
.cards-pagination__number.active {
    background: #292C3D;
    color: #ffffff;
}
.cards-pagination__arrow {
    transition: opacity .2s ease-in-out, background-color .2s ease;
}
.cards-pagination__arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.cards-pagination__arrow:hover {
    background: #292C3D;
}
.cards-pagination__arrow:hover .cards-pagination__arrow-img {
    filter: invert(100%);
}
.cards-pagination__arrow-img {
    width: 0.86rem;
    height: 0.86rem;
    background-image: url('/images/arrow.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotateZ(180deg);
}
.cards-pagination__arrow-img_first {
    background-image: url('/images/arrow-double.svg');
}
.cards-pagination__arrow-img_last {
    background-image: url('/images/arrow-double.svg');
    transform: rotateZ(360deg);
}
.cards-pagination__arrow-img_next {
    transform: rotateZ(360deg);
}

/* layout2 делает поля ввода жирными, в SPA поиск обычного начертания */
.container-search .search-input input {
    font-weight: 400;
}

/* layout2 ограничивает .container до 1520px, а карточки и фильтр размерены в rem (растут с vw) —
   после ~1665px вторая карточка переставала помещаться в ряд */
.container.dpo {
    max-width: none;
}

/* В SPA border-box для всех элементов включался только до 768px (base.css),
   а layout2 задаёт его на всех ширинах — возвращаем карточкам content-box на десктопе */
@media screen and (min-width: 769px) {
    :is(.additional-body, .courses-slider) .card {
        box-sizing: content-box;
    }
}

/* Блок «Курсы для вас» */
.courses-slider__title {
    position: relative;
    color: #292C3D;
    font-size: 3.9rem;
    font-weight: bold;
    line-height: 3.333rem;
}
.courses-slider__title::before {
    position: absolute;
    z-index: 100;
    top: 1.4rem;
    left: -9rem;
    width: 6.73rem;
    height: .27rem;
    background-color: #F42A3E;
    content: '';
}
@media screen and (max-width: 480px) {
    .courses-slider__title {
        font-size: 1.944rem;
        line-height: 2.08rem;
    }
    .courses-slider__title::before {
        top: 0.8rem;
        left: -1.5rem;
        width: 1.5rem;
    }
}
.courses-slider__cards {
    display: contents;
}
/* Размеры карточек (стили components/CardsPagination.vue) */
.courses-slider .card-item {
    height: 28.682rem;
    margin-right: 1.5rem;
}
.courses-slider .card-item_2 {
    width: calc(50% - 15rem);
}
.courses-slider .card-item_3 {
    width: calc(33% - 5rem);
}
/* Последняя видимая карточка страницы (её отмечает CardsPager) или заглушка */
.courses-slider .card-item_last,
.courses-slider .card-place-fixer {
    margin-right: 0;
}
.courses-slider .card-item_hidden {
    display: none;
}
.courses-slider .card-place-fixer {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
@media screen and (max-width: 768px) {
    .courses-slider .card-item {
        height: 33rem;
    }
}