/* make photo strip auto scrolling horizontal when hit bp */

/* PHOTOS */
.photo-strip {
    position: absolute;
    top: 60px;
    left: 40px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.photo-row {
    display: none;
}

.photo {
    position: relative;
}

.photo img {
    width: 190px;
    border-radius: 16px;
    object-fit: cover;

    transform: rotate(-4deg);
    transition: transform 0.35s ease;
}

.photo:nth-child(even) img {
    transform: rotate(4deg);
}

.photo:hover img {
    transform: rotate(0deg) scale(1.1);
}

.photo-label {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;

    color: var(--white);
    background: color-mix(in srgb, var(--sectionbg) 80%, transparent);
    border: 1px dashed var(--muted);
    border-radius: 8px;

    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}

.photo:hover .photo-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.phone-photo {
    display: none;
}

.phone-photo img {
    width: 110px;
    border-radius: 16px;
    object-fit: cover;

    transform: rotate(4deg);
    transition: transform 0.35s ease;
}

.phone-photo:hover img {
    transform: rotate(0deg) scale(1.1);
}