Changeset View
Changeset View
Standalone View
Standalone View
landing/landing.css
Show All 20 Lines | |||||
.innerContainerMobileNav { | .innerContainerMobileNav { | ||||
overflow-y: hidden; | overflow-y: hidden; | ||||
} | } | ||||
.pageContentContainer { | .pageContentContainer { | ||||
position: relative; | position: relative; | ||||
} | } | ||||
.wrapper { | .heroSection { | ||||
transition-property: max-width; | display: flex; | ||||
transition: 300ms; | justify-content: center; | ||||
max-width: 1850px; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
display: grid; | |||||
align-items: center; | |||||
padding-top: 7vh; | |||||
padding-bottom: 235px; | |||||
grid-template-columns: 40px repeat(12, 1fr) 40px; | |||||
grid-template-rows: repeat(auto-fill, 1fr); | |||||
column-gap: 1.5%; | |||||
row-gap: 75px; | |||||
grid-template-areas: '. hImg hImg hImg hImg . hInfo hInfo hInfo hInfo hInfo hInfo hInfo .'; | |||||
} | } | ||||
@media screen and (max-width: 1099px) { | .heroContainer { | ||||
.wrapper { | width: 1850px; | ||||
margin-left: auto; | display: flex; | ||||
margin-right: auto; | flex-direction: row-reverse; | ||||
display: grid; | overflow: hidden; | ||||
align-items: center; | |||||
padding-top: 7vh; | |||||
padding-bottom: 235px; | |||||
grid-template-columns: 16px repeat(6, 1fr) 16px; | |||||
grid-template-rows: repeat(auto-fill, 1fr); | |||||
column-gap: 1.5%; | |||||
row-gap: 75px; | |||||
grid-template-areas: '. hInfo hInfo hInfo hInfo hInfo hInfo .'; | |||||
} | } | ||||
.heroImage { | .heroImage { | ||||
display: none; | flex: 1; | ||||
position: relative; | |||||
} | } | ||||
.heroInfo { | .heroImage picture img { | ||||
display: flex; | object-fit: cover; | ||||
flex-direction: column; | object-position: left center; | ||||
padding-bottom: 1.5rem; | position: absolute; | ||||
left: 120px; | |||||
top: 120px; | |||||
width: 624px; | |||||
height: 472px; | |||||
} | } | ||||
@media screen and (max-width: 1280px) { | |||||
.heroContainer { | |||||
flex-direction: column; | |||||
align-items: center; | |||||
padding: 16px 32px; | |||||
} | } | ||||
.heroImage { | .heroImage { | ||||
grid-area: hImg; | margin-bottom: 24px; | ||||
max-width: 600px; | |||||
} | } | ||||
.heroInfo { | .heroImage picture img { | ||||
grid-area: hInfo; | top: 0; | ||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
position: relative; | |||||
} | |||||
} | } |