.worked-section {
    padding: 0.5rem 0 2.75rem;
}

.worked-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.worked-header .sec-title {
    text-align: center;
}

.worked-header .sec-title::after {
    margin-inline: auto;
}

.worked-hint {
    margin: 0.5rem auto 0;
    font-size: var(--fs-meta);
    color: var(--muted);
    max-width: 36rem;
}

.worked-carousel {
    direction: ltr;
    max-width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.worked-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.worked-track {
    display: flex;
    width: max-content;
    animation: worked-scroll 32s linear infinite;
}

.worked-viewport:hover .worked-track {
    animation-play-state: paused;
}

.worked-row {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1.25rem;
    padding-inline: 0.65rem;
}

.worked-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 11.5rem;
    height: 4.25rem;
    padding: 0 1.4rem;
    background: var(--paper);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.worked-logo {
    display: block;
    height: 2.15rem;
    width: auto;
    max-width: 10.5rem;
    object-fit: contain;
}

[data-theme="dark"] .worked-logo {
    filter: brightness(0) invert(0.88);
}

@keyframes worked-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .worked-track {
        animation: none;
        width: 100%;
        justify-content: center;
    }
    .worked-row:last-child {
        display: none;
    }
    .worked-row {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .worked-viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 640px) {
    .worked-carousel {
        max-width: calc(100% - 24px);
    }
    .worked-item {
        min-width: 9.5rem;
        height: 3.75rem;
        padding: 0 1rem;
    }
    .worked-logo {
        height: 1.85rem;
        max-width: 8.5rem;
    }
}