.rc-team{
position: relative;
}
.rc-team__heading{
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
font-size: clamp(28px, 3vw, 56px);
margin-bottom: 24px;
}
.rc-team__viewport{
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
outline: none;
}
.rc-team__viewport::-webkit-scrollbar{ display:none; }
.rc-team__track{
display: flex;
gap: 40px;
padding-bottom: 10px;
}
.rc-team{ --per-view: 4; --gap: 40px; }
@media (max-width: 1024px){ .rc-team{ --per-view: 2; } }
@media (max-width: 640px){ .rc-team{ --per-view: 1; } }
.rc-team__card{
flex: 0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
scroll-snap-align: start;
}
.rc-team__photo{
width: 100%;
aspect-ratio: 3 / 4;
background: rgba(0,0,0,0.05);
overflow: hidden;
}
.rc-team__photo img{
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}
.rc-team__meta{
margin-top: 18px;
}
.rc-team__name{
font-weight: 800;
text-transform: uppercase;
font-size: 20px;
line-height: 1.1;
}
.rc-team__role{
margin-top: 10px;
font-size: 14px;
}
.rc-team__li{
display: inline-flex;
margin-top: 14px;
font-weight: 800;
text-decoration: none;
color: inherit;
}
.rc-team__footer{
display:flex;
align-items:flex-end;
justify-content:space-between;
margin-top: 26px;
gap: 24px;
}
.rc-team__cta{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
font-weight: 900;
text-transform: uppercase;
line-height: 1;
cursor: pointer; background: #F2E64E;
padding: 28px 56px;
}
.rc-team__cta::before{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:0; background: #F2E64E;
transition: width .18s ease;
} .rc-team__cta::after{
content:"";
position:absolute;
left: 64px; bottom: 0;
height: 3px;
width: 0;
background: currentColor;
transform-origin: left;
transition: width .22s ease;
}
.rc-team__cta span{
display:inline-block;
font-size: 44px;
} .rc-team__cta:hover{
background: transparent;
justify-content: flex-start;
padding: 18px 0 14px;
padding-left: 64px;
}
.rc-team__cta:hover::before{
width: 52px; }
.rc-team__cta:hover::after{
width: 420px; }
.rc-team__pagination{
min-width: 320px;
display:flex;
justify-content:flex-end;
}
.rc-team__page-track{
position: relative;
height: 4px;
width: 360px;
background: transparent;
cursor: pointer;
}
.rc-team__page-segs{
display:flex;
width:100%;
height:100%;
gap: 0;
}
.rc-team__page-seg{
flex: 1 1 0;
height: 5px;
background: rgba(0,0,0,0.25);
}
.rc-team__page-seg.is-active{
background: rgba(0,0,0,0.9);
}