main {
    overflow-x: clip;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#wedding-party-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

#wedding-party {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
}

.party-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.party-member:not(:first-child) {
    &:nth-child(even) {
        animation: linear slide-in-left;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        animation-fill-mode: backwards;
        transition: transform 0.1s ease, opacity 0.1s ease;
    }
    
    &:nth-child(odd) {
        animation: linear slide-in-right;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        animation-fill-mode: backwards;
        transition: transform 0.1s ease, opacity 0.1s ease;
    }
}

.party-member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: block;
}

.party-member-name {
    font-size: 1.5rem;
    margin-block: 0;
    color: var(--accent-color);
}

.party-member-role {
    font-size: 1.2rem;
    margin-block: 0;
    color: var(--alt-text-color);
}

@keyframes slide-in-left {
    0%,
    30% {
        opacity: 0;
        transform: translateX(-30%);
    }
    30%,
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0%,
    30% {
        opacity: 0;
        transform: translateX(30%);
    }
    30%,
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}