NUXT_FRONTEND/assets/styles/blocks/subjects.less

.subjects {
    display: flex;
    min-height: 517px;
    &__background {
        .size(100%);
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        &::before {
            .pseudo();
            .size(100%);
            top: 0;
            left: 0;
            background-color: rgba(@color-black, .32);
        }
    }
    &__wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex-grow: 1;
        padding: 36px 76px 36px 24px;
    }
    &__title {
        position: relative;
        margin-bottom: 46px;
        max-width: 608px;
        font: 36px/43px @font-main;
        color: @color-white;
    }
    &__list {
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    &__item {
        flex: 0 1 240px;
        max-width: 240px;
    }
}

@media @media-md {
    .subjects {
        margin-left: -16px;
        &__list-wrapper {
            padding-bottom: 6px;
            width: calc(100vw - 32px);
            overflow-x: scroll;
        }
        &__list {
            width: 1100px;
        }
    }
}

@media @media-sm {
    .subjects {
        min-height: 370px;
        &__title {
            margin-bottom: 31px;
            font: 24px/29px @font-main;
        }
    }
}

.subjects-item {
    &__title {
        margin-bottom: 12px;
        min-height: 76px;
        font: 700 16px/19px @font-main;
        color: @color-white;
    }
    &__date {
        font: 14px/17px @font-main;
        color: @color-grey-dark;
    }
}