/* global */
:root {
    --color-blue: #4858e7;
    --color-cyan: #7f9af9;
    --color-green: #87e22b;
    --color-white: #ffffff;
    --color-black: #000000;
}
/* END global */

/* section__preview */
.section__preview > .container {
    padding: 6rem;
    max-width: initial;
    width: 368rem;
    height: 722rem;
    background: url(../media/courses/preview_back-mobile.svg) center / contain no-repeat;
    position: relative;
}
.preview__info {
    z-index: 2;
    position: relative;
    padding: 60rem 25rem;
    width: 100%;
    height: 100%;
}
.spreview__subtitle {
    margin-bottom: 20rem;
    font-family: "Jura", sans-serif;
    font-size: 20rem;
    line-height: normal;
    text-transform: uppercase;
    color: var(--color-blue);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.spreview__subtitle span {
    margin-top: 5rem;
    font-family: "Montserrat", sans-serif;
    font-size: 16rem;
    line-height: 140%;
    text-transform: none;
}
.preview_desc {
    margin-top: 20rem;
}
.preview__img {
    z-index: -1;
    position: absolute;
    bottom: -40rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: calc(100% - 20rem);
    height: 300rem;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center bottom;
    object-position: center bottom;
}
@media (min-width: 900px) {
    .section__preview > .container {
        width: 972rem;
        height: 422rem;
        background-image: url(../media/unit/preview_back-table.svg);
    }
    .preview__info {
        padding: 60rem 60rem 40rem;
    }
    .spreview__subtitle {
        margin-bottom: 15rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .spreview__subtitle span {
        margin: 0 0 0 10rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10rem;
    }
    .spreview__subtitle span::before {
        content: "";
        display: block;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        background: var(--color-green);
    }
    .preview_title {
        max-width: 460rem;
    }
    .preview_desc {
        max-width: 460rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }
    .preview__img {
        left: auto;
        right: 0;
        bottom: -25rem;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        width: 450rem;
        height: calc(100% + 75rem);
    }
    .preview__img-full {
        max-height: 100%;
    }
    .preview__img-right {
        -o-object-position: bottom right;
        object-position: bottom right;
    }
}
@media (min-width: 1390px) {
    .section__preview > .container {
        padding: 8rem;
        width: 1370rem;
        height: 480rem;
        background-image: url(../media/courses/preview_back-desk.svg);
    }
    .preview__info {
        padding: 70rem 100rem;
    }
    .preview_title {
        max-width: 560rem;
    }
    .preview_desc {
        max-width: 560rem;
    }
    .preview__img {
        width: 700rem;
    }
}
/* END section__preview */

/* section__courses */
.section__courses {
    padding-top: 90rem;
}
.courses__subtitle {
    margin-bottom: 10rem;
    color: var(--color-blue);
}
.courses__desc {
    margin-top: 20rem;
}
.courses__filters {
    margin-top: 40rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40rem;
}
.courses__search {
    padding: 9rem 20rem 11rem;
    width: 100%;
    border-radius: 20rem;
    border: 1rem solid var(--color-blue);
    font-family: "Montserrat", sans-serif;
    font-size: 14rem;
    font-weight: 400;
    line-height: 140%;
    color: var(--color-blue);
}
.courses__ages {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 10rem;
    -webkit-column-gap: 15rem;
    -moz-column-gap: 15rem;
    column-gap: 15rem;
}
.courses__age {
    padding: 5rem 15rem;
    border-radius: 20rem;
    font-family: "Montserrat", sans-serif;
    font-size: 14rem;
    line-height: 140%;
    color: var(--color-white);
    background: var(--color-blue);
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
}
.courses__age:hover,
.courses__age.active {
    color: var(--color-black);
    background: var(--color-green);
}

.courses__box {
    margin-top: 40rem;
}
.courses__box-title {
    margin-bottom: 15rem;
    color: var(--color-blue);
}
.courses__items {
    display: grid;
    grid-gap: 20rem;
}
.courses__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 10rem;
}
.courses__item-img {
    width: 100%;
    height: 180rem;
    border-radius: 20rem;
}
.courses__item-title {
    margin-top: 20rem;
}
.courses__item-desc {
    margin-top: 10rem;
}
.courses__item-link {
    padding-bottom: 2rem;
    width: 100%;
    height: 40rem;
    color: var(--color-black);
    font-family: "Jura", sans-serif;
    line-height: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 20rem;
    background: var(--color-green);
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.courses__item-link:hover {
    color: var(--color-white);
    background: var(--color-blue);
}
@media (min-width: 900px) {
    .section__courses {
        padding-top: 100rem;
    }
    .courses__line {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 50rem;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .courses__title {
        max-width: 550rem;
    }
    .courses__title-full {
        grid-area: 1 / 1 / 2 / 3;
    }
    .courses__desc {
        margin: 0;
        max-width: 360rem;
    }
    .courses__filters {
        margin-top: 35rem;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .courses__search {
        width: 260rem;
    }
    .courses__ages {
        gap: 20rem;
    }
    .courses__box:not(:first-child) {
        margin-top: 60rem;
    }
    .courses__items {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40rem;
    }
    .courses__box-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .courses__box-col-5,
    .courses__box-col-7 {
        grid-template-columns: repeat(6, 1fr);
    }
    .courses__box-col-5 .courses__item:nth-child(5n + 1),
    .courses__box-col-7 .courses__item:nth-child(7n + 1) {
        grid-area: 1 / 1 / 2 / 3;
    }
    .courses__box-col-5 .courses__item:nth-child(5n + 2),
    .courses__box-col-7 .courses__item:nth-child(7n + 2) {
        grid-area: 1 / 3 / 2 / 5;
    }
    .courses__box-col-5 .courses__item:nth-child(5n + 3),
    .courses__box-col-7 .courses__item:nth-child(7n + 3) {
        grid-area: 1 / 5 / 2 / 7;
    }
    .courses__box-col-5 .courses__item:nth-child(5n + 4),
    .courses__box-col-7 .courses__item:nth-child(7n + 4) {
        grid-area: 2 / 1 / 3 / 4;
    }
    .courses__box-col-5 .courses__item:nth-child(5n + 5),
    .courses__box-col-7 .courses__item:nth-child(7n + 5) {
        grid-area: 2 / 4 / 3 / 7;
    }
    .courses__box-col-7 .courses__item:nth-child(7n + 6) {
        grid-area: 3 / 1 / 4 / 4;
    }
    .courses__box-col-7 .courses__item:nth-child(7n + 7) {
        grid-area: 3 / 4 / 4 / 7;
    }
    .courses__item {
        gap: 15rem;
    }
    .courses__item-desc {
        margin-top: 15rem;
    }
}
@media (min-width: 1200px) {
    .section__courses {
        padding-top: 100rem;
    }
    .courses__line {
        gap: 20rem;
    }
    .courses__title {
        max-width: 600rem;
    }
    .courses__desc {
        max-width: 560rem;
    }
    .courses__filters {
        margin-top: 45rem;
    }
    .courses__search {
        width: 360rem;
    }
    .courses__box {
        margin-top: 30rem;
    }
    .courses__box:not(:first-child) {
        margin-top: 40rem;
    }
    .courses__items {
        row-gap: 75rem;
    }
    .courses__item {
        gap: 15rem;
    }
    .courses__item-desc {
        margin-top: 15rem;
    }
}
/* END section__courses */