.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; } }