.header { position: relative; overflow: hidden; } .hero { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; object-fit: cover; } .wrapper { position: relative; background: linear-gradient( 60deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 50%) 50%, rgb(0 0 0 / 75%) 100% ); width: 100dvw; } .container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: var(--max-width-page); gap: var(--Space-x05); padding: var(--Space-x3) 0; margin: 0 auto; } .titleContainer { display: flex; flex-direction: column; gap: var(--Space-x05); } .mobileTitle { display: -webkit-box; } .mobileTitle, .title { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; } .title { display: none; } .address { display: none; flex-wrap: wrap; column-gap: var(--Space-x15); font-style: normal; } @media (min-width: 768px) { .address { display: flex; } .container { padding: var(--Space-x3) 0; } .mobileTitle { display: none; } .title { display: -webkit-box; } } @media screen and (min-width: 1367px) { .container { padding: var(--Space-x6) 0; } }