.promo { &__section { position: relative; padding-top: 150px; @media screen and (max-width: $lg) { min-height: 460px; } @media screen and (min-width: $lg) and (max-width: $xl) { min-height: 580px; } color: #fff; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; &::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background-color: rgba(24, 38, 54, 0.4); } } &__container { position: relative; margin-bottom: 70px; font-size: 1.5rem; @media screen and (max-width: $lg) { padding-top: 17.5vw; } @media screen and (min-width: $lg) and (max-width: $xl) { padding-top: 10vw; } .promo-wrapper { width: 50%; @media screen and (max-width: $lg) { width: 100%; } } p { margin-bottom: 0; } } &__title { &._large { font-size: calc(1.525rem + 3.3vw); @media (min-width: 1200px) { font-size: 4rem; } } } }