.hero_banner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--white);
overflow: hidden;
min-height: clamp(560px, 82vh, 820px); & img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
} &::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .55));
z-index: 1;
}
& .cover_gradient,
& .cover {
position: absolute;
inset: 0;
z-index: 1;
}
& > .container {
position: relative;
z-index: 4;
width: 100%;
display: flex;
flex-direction: column;
&.center {
align-items: center;
text-align: center;
}
&.right {
align-items: flex-end;
text-align: right;
}
}
& .hero_banner_inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
min-height: clamp(560px, 82vh, 820px);
padding-top: clamp(48px, 8vw, 96px);
padding-bottom: clamp(48px, 8vw, 96px);
justify-content: flex-end;
@media (min-width: 992px) {
&.top { justify-content: flex-start; }
&.middle { justify-content: center; }
&.bottom { justify-content: flex-end; }
}
.center & {
align-items: center;
}
.right & {
align-items: flex-end;
}
}
& .eyebrow {
color: rgba(255, 255, 255, .9);
font-size: 14px;
letter-spacing: .26em;
margin: 0 0 14px;
}
& .hero_banner_title,
& h1, & h2, & h3 {
font-family: "Mulish", sans-serif;
font-weight: 800;
font-size: clamp(44px, 8vw, 104px);
line-height: .98;
letter-spacing: -2px;
color: var(--white);
margin: 0;
}
& .text_area {
max-width: 460px;
& p {
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, .92);
margin: 0;
}
}
& .btn_wrapper {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 26px;
} & .btn_secondary {
background: transparent;
border-color: rgba(255, 255, 255, .7);
color: var(--white);
&:hover {
background: var(--white);
border-color: var(--white);
color: var(--ink);
}
}
@media (max-width: 991px) {
& > .container {
align-items: flex-start;
text-align: left;
}
& .hero_banner_inner {
align-items: flex-start;
}
}
}.image_tile_grid {
width: 100%;
> .container {
padding-top: clamp(56px, 8vw, 110px);
padding-bottom: clamp(56px, 8vw, 110px);
}
.image_tile_grid_head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: clamp(16px, 3vw, 32px);
}
.image_tile_grid_heading {
.eyebrow {
margin-bottom: 8px;
}
}
.image_tile_grid_title {
margin: 0;
}
.image_tile_grid_list {
list-style: none !important; margin: 0;
padding-left: 0 !important;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
} &.cols_2 .image_tile_grid_list {
grid-template-columns: repeat(2, 1fr);
}
.image_tile_grid_item {
margin: 0 !important; }
.image_tile_grid_tile {
position: relative;
display: flex;
align-items: flex-end;
aspect-ratio: 3 / 4;
border-radius: var(--radius);
overflow: hidden;
color: var(--white);
text-decoration: none;
.image_tile_grid_image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease);
}
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .5));
transition: background .4s var(--ease);
}
&:hover .image_tile_grid_image {
transform: scale(1.07);
}
}
.image_tile_grid_label {
position: relative;
z-index: 2;
padding: 22px;
}
.image_tile_grid_tile_eyebrow {
display: block;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
opacity: .9;
color: var(--white);
}
.image_tile_grid_tile_title {
display: block;
font-family: "Mulish", sans-serif;
font-weight: 800;
font-size: clamp(20px, 2.4vw, 26px);
letter-spacing: -.4px;
line-height: 1.05;
color: var(--white);
}
@media (max-width: 991px) {
.image_tile_grid_list,
&.cols_2 .image_tile_grid_list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.image_tile_grid_list,
&.cols_2 .image_tile_grid_list {
grid-template-columns: 1fr;
}
}
}