.slogan {background: var(--white);max-width: 1920px;margin: 0 auto;position: relative; } .slogan .col {z-index: 2; } .slogan .image {position: absolute;left: 0;width: 100%;z-index: 1;top: 0;height: 100%;display: flex;align-items: center;justify-content: center; } .slogan .image .img-fluid {width: auto;height: calc(100% + 18.75rem);max-width: none;position: absolute;display: block;top: -6.25rem;transform: translateX(-42%); } @media only screen and (max-width: 675px) {.slogan .image .img-fluid {display: none;} } .slogan .col-title {display: flex;flex-direction: column;align-items: center; } .slogan .col-content {padding-left: 9.25rem;padding-top: 7.5625rem;padding-bottom: 8.4375rem;z-index: 1;color: var(--white); } @media only screen and (max-width: 675px) {.slogan .col-content {padding: 2.5rem;text-align: center;} } .slogan h1, .slogan .h1 {padding-top: 16.0625rem;color: var(--black);font-size: 4rem;padding-bottom: 0; } @media only screen and (max-width: 675px) {.slogan h1, .slogan .h1 {padding-top: 2.5rem;} } .slogan .content {width: 14.5625rem;margin-bottom: 3.4375rem;line-height: 194%; } @media only screen and (max-width: 675px) {.slogan .content {width: 100%;} } @media (max-width: 650.98px) {.slogan .content {color: var(--primary);} } .slogan .background {position: absolute;z-index: 0;top: 0;height: 100%;width: 50%; } .slogan .background.background-left {left: 0; } @media (max-width: 650.98px) {.slogan .background.background-left {width: 100%;} } .slogan .background.background-right {left: 50%;background: var(--primary); } @media (max-width: 650.98px) {.slogan .background.background-right {display: none;} } .slogan .background .img-fluid {top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; } .slogan .background .blur {position: absolute;top: 0;left: 0;width: 58%;height: 100%;background: rgba(var(--white), 0.73);backdrop-filter: blur(0.46875rem); }