.home {
background: url('./images/background/bg.jpg') top left / cover no-repeat; min-height: calc(100vh - 96px); width: 100%; @media screen and (min-width: $desktop) { display: flex; flex-direction: column; justify-content: center; } @media screen and (max-width: $tablet) { min-height: calc(100vh - 56px); background-position: -300px 0; } @media screen and (max-width: $mobile) { background: $whisper; } @media screen and (max-height: $max-height) { padding: 0; background-position: 0 0; } .container { align-items: flex-end; display: flex; flex-direction: column; } &__content { padding: 30px 0 0; align-items: flex-end; display: flex; flex-direction: column; max-width: 100%; width: 672px; @media screen and (min-width: $desktop) { padding: 0; } @media screen and (max-width: $mobile) { align-items: flex-start; } } &__title { color: $cardinal; font-family: $ft-galano; font-size: 32px; font-weight: 400; line-height: 1.25; margin: 10px 0 0; width: calc(100% - 100px); @media screen and (max-width: $mobile) { font-size: 22px; line-height: 1.36; margin: 24px 0 0; width: 100%; } @media screen and (max-width: $tablet) { margin: 16px 0 0; } &--row { display: block; } } &__description { color: $manatee; font-family: $ft-open-sans; font-size: 13px; line-height: 1.5; margin: 10px 0 0px; @media screen and (max-width: $mobile) { font-size: 14px; } @media screen and (max-height: $max-height) { font-size: 13px; } @media screen and (min-width: $desktop) { font-size: 14px; } strong { font-weight: 600; } &--first { width: calc(100% - 100px); @media screen and (max-width: $mobile) { width: 100%; } } &--subtitle { margin-top: 5px; } &--footer { font-size: 14px; margin: 0; @media screen and (max-height: $max-height) { font-size: 10px; margin-bottom: 0; } } }
}