.hero-card[data-position="0"] {
    --offset: 0;
    --scale: 1;
    --opacity: 1;
    --gray: 0;
    z-index: 6;
}

.hero-card[data-position="1"] {
    --offset: 1;
    --scale: .9;
    --opacity: .92;
    --gray: .15;
    z-index: 5;
}

.hero-card[data-position="2"] {
    --offset: 2;
    --scale: .78;
    --opacity: .72;
    --gray: .25;
    z-index: 4;
}

.hero-card[data-position="3"] {
    --offset: 3;
    --scale: .66;
    --opacity: .1;
    --gray: 1;
    z-index: 1;
}

.hero-card[data-position="-1"] {
    --offset: -1;
    --scale: .9;
    --opacity: .92;
    --gray: .15;
    z-index: 5;
}

.hero-card[data-position="-2"] {
    --offset: -2;
    --scale: .78;
    --opacity: .72;
    --gray: .25;
    z-index: 4;
}

.hero-card[data-position="-3"] {
    --offset: -3;
    --scale: .66;
    --opacity: .1;
    --gray: 1;
    z-index: 1;
}

.site-header,
.hero-intro,
.hero-meta,
.numbered,
.portfolio,
.clients,
.studio,
.awards,
.testimonial,
.journal,
.footer {
    isolation: isolate;
}

.portfolio-item a::after,
.studio-track article::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 0 solid #fff;
    transition: border-width .42s cubic-bezier(.22, .61, .36, 1);
}

.portfolio-item a:hover::after,
.studio-track article:hover::after {
    border-width: 14px;
}

.studio-track article {
    overflow: hidden;
}

.studio-track article img {
    transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s cubic-bezier(.22, .61, .36, 1);
}

.studio-track article:hover img {
    transform: scale(1.055);
    filter: grayscale(1);
}