.walker-recruitment-wall {
--wrw-gap: 4px;
--wrw-pad: 4px;
--wrw-tile-size: 140px;
--wrw-row-width: 1400px;
position: relative;
overflow: hidden;
background: #050505;
color: #fff;
height: 560px;
isolation: isolate;
}
.walker-recruitment-wall__media {
position: absolute;
inset: -18px 0 0 0;
z-index: 1;
overflow: hidden;
}
.walker-recruitment-wall__rows {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: var(--wrw-gap);
padding: var(--wrw-pad);
}
.walker-recruitment-wall__row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--wrw-tile-size);
gap: var(--wrw-gap);
width: max-content;
min-width: var(--wrw-row-width);
will-change: transform;
}
.walker-recruitment-wall__tile {
position: relative;
width: var(--wrw-tile-size);
height: var(--wrw-tile-size);
overflow: hidden;
background: #111;
margin: 0px !important;
}
where(figure) {
margin: 0 0 0em !important;
}
.walker-recruitment-wall__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.65;
filter: saturate(0.96) contrast(1.02) brightness(0.98);transform: scale(1);
transition:
opacity 0.24s ease,
filter 0.24s ease,
transform 0.24s ease;
}
.walker-recruitment-wall__content {
position: relative;
max-width: 360px;
pointer-events: auto;
z-index: 1;
}
.walker-recruitment-wall__content::before {
content: "";
position: absolute;
inset: -20px -24px -20px -24px;
background: linear-gradient(
to right,
rgba(5, 5, 5, 0.72) 0%,
rgba(5, 5, 5, 0.58) 55%,
rgba(5, 5, 5, 0.24) 82%,
rgba(5, 5, 5, 0) 100%
);
z-index: -1;
pointer-events: none;
}
.walker-recruitment-wall__tile:hover .walker-recruitment-wall__img,
.walker-recruitment-wall__tile:focus-within .walker-recruitment-wall__img {
opacity: 1;
filter: saturate(1.12) contrast(1.05) brightness(1.06);
transform: scale(1.02);
}
.walker-recruitment-wall__overlay {
background:
linear-gradient(to right, rgba(5,5,5,0.58) 0%, rgba(5,5,5,0.34) 16%, rgba(5,5,5,0.10) 36%, rgba(5,5,5,0.04) 62%, rgba(5,5,5,0.14) 100%),
linear-gradient(to bottom, rgba(5,5,5,0.04) 0%, rgba(5,5,5,0.10) 100%);
}
.walker-recruitment-wall__content-wrap {
position: relative;
z-index: 3;
max-width: 1440px;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
padding: 24px 32px;
pointer-events: none;
}
.walker-recruitment-wall__content {
max-width: 360px;
pointer-events: auto;
}
.walker-recruitment-wall__eyebrow {
font-size: 0.82rem;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 16px;
opacity: 0.95;
}
.walker-recruitment-wall__title {
margin: 0 0 14px;
font-size: clamp(3rem, 5vw, 5.2rem);
line-height: 0.94;
letter-spacing: -0.04em;
font-weight: 700;
color: #17b7c9;
max-width: 9ch;
}
.walker-recruitment-wall__text {
font-size: 1rem;
line-height: 1.6;
max-width: 44ch;
color: rgba(255,255,255,0.94);
}
.walker-recruitment-wall__text p {
margin: 0 0 1em;
}
.walker-recruitment-wall__actions {
margin-top: 24px;
}
.walker-recruitment-wall__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
text-decoration: none;
background: #00a4b0;
color: #fff;
font-weight: 700;
font-size: 0.96rem;
letter-spacing: 0.01em;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.walker-recruitment-wall__button:hover,
.walker-recruitment-wall__button:focus {
background: #008e99;
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
@media (max-width: 1300px) {
.walker-recruitment-wall {
height: 520px;
}
.walker-recruitment-wall__content-wrap {
padding: 28px 32px;
}
}
@media (max-width: 900px) {
.walker-recruitment-wall {
height: 500px;
}
.walker-recruitment-wall__content-wrap {
align-items: flex-end;
padding: 24px 24px 30px;
}
}
@media (max-width: 767px) {
.walker-recruitment-wall {
height: auto;
}
.walker-recruitment-wall__media {
position: relative;
inset: 0;
min-height: 320px;
}
.walker-recruitment-wall__rows {
position: relative;
}
.walker-recruitment-wall__row {
transform: none !important;
}
.walker-recruitment-wall__overlay {
background: linear-gradient(to top, rgba(5,5,5,0.84) 0%, rgba(5,5,5,0.36) 38%, rgba(5,5,5,0.05) 100%);
}
.walker-recruitment-wall__content-wrap {
height: auto;
padding: 24px 18px 30px;
}
.walker-recruitment-wall__title {
font-size: clamp(2.2rem, 10vw, 3.4rem);
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.walker-recruitment-wall__row,
.walker-recruitment-wall__img {
transition: none !important;
transform: none !important;
}
}