.f1 .card-row {
    justify-self: start;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.f1 .photo-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.photo-row .tilt-wrap {
    flex: 1;
    width: auto;
    aspect-ratio: 4 / 3;
    --hover-scale: 1.6;
}

.tilt-wrap {
    --hover-scale: 5;
    width: 100px;
    aspect-ratio: 3 / 4;
    position: relative;
}

.tilt-photo {
    display: block;
}

.tilt-photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tilt-card {
    --rx: 0deg;
    --ry: 0deg;
    --s: 1;

    position: relative;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    pointer-events: none;

    transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
    scale: var(--s);

    transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), scale 0.3s cubic-bezier(.4, 0, 1, 1);
}

.tilt-card p {
    font-size: clamp(0.0rem, 0.3vw, 2rem);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tilt-card.is-active {
    pointer-events: auto;
    transition: transform 0.1s ease-out, scale 0.35s cubic-bezier(.2, .9, .3, 1);
}

.tilt-card.is-active p {
    opacity: 1;
    transition: opacity 0.1s ease 0.1s;
}

.tilt-wrap.is-raised {
    z-index: 20;
}

@media (prefers-reduced-motion: reduce) {
    .tilt-card {
        transition: none;
        transform: none !important;
        scale: 1 !important;
    }
}

.tilt-wrap::after {
    content: "";
    position: absolute;
    inset: calc(-50% * (var(--hover-scale) - 1));
    pointer-events: none;
}

.tilt-wrap:has(.tilt-card.is-active) {
    z-index: 20;
    transition: z-index 0s;
}

.tilt-wrap:has(.tilt-card.is-active)::after {
    pointer-events: auto;
}

.card-top0 {
    background: var(--c0_t);
    padding: 0.5rem;
    align-content: end;
}

.card-top0 p {
    color: var(--c0_b);
}

.card-bottom0 {
    background: var(--c0_b);
    padding: 0.5rem;
}

.card-bottom0 p {
    color: var(--c0_t);
}

.card-top1 {
    background: var(--c1_t);
    padding: 0.5rem;
    align-content: end;
}

.card-top1 p {
    color: var(--c1_b);
}

.card-bottom1 {
    background: var(--c1_b);
    padding: 0.5rem;
}

.card-bottom1 p {
    color: var(--c1_t);
}

.card-top2 {
    background: var(--c2_t);
    padding: 0.5rem;
    align-content: end;
}

.card-top2 p {
    color: var(--c2_b);
}

.card-bottom2 {
    background: var(--c2_b);
    padding: 0.5rem;
}

.card-bottom2 p {
    color: var(--c2_t);
}

.card-top3 {
    background: var(--c3_t);
    padding: 0.5rem;
    align-content: end;
}

.card-top3 p {
    color: var(--c3_b);
}

.card-bottom3 {
    background: var(--c3_b);
    padding: 0.5rem;
}

.card-bottom3 p {
    color: var(--c3_t);
}

.card-top4 {
    background: var(--c4_t);
    padding: 0.5rem;
    align-content: end;
}

.card-top4 p {
    color: var(--c4_b);
}

.card-bottom4 {
    background: var(--c4_b);
    padding: 0.5rem;
}

.card-bottom4 p {
    color: var(--c4_t);
}