.ticker {
    margin-block-start: 1px;
    padding-block: 0.5rem;
    
    position: relative;
    max-width: 100%;
    overflow: hidden;
    
    display: flex;
    gap: 1rem;
    
    border-block: 3px double var(--black);
    cursor: default;
}

.ticker::before, .ticker::after {
    content: '';
    display: block;
    width: 1.5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

.ticker::before {
    left: 0;
    background: linear-gradient(to right, var(--white), transparent);
}

.ticker::after {
    right: 0;
    background: linear-gradient(to left, var(--white), transparent);
}

.ticker-scroll {
    display: flex;
    align-items: center;
    flex: 1;
    
    font-family: var(--lora);
    font-size: 1.025rem;
    font-weight: 500;
    
    overflow: hidden;
}

.ticker-content {
    margin-inline-start: 1rem;
    padding: 0;
    
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    
    width: max-content;
}

.ticker-content[data-animated="true"] {
    --animation-delay: 2s;
    --animation-duration: 130s;
    
    animation: scroll linear infinite;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-duration: var(--animation-duration);
    animation-delay: var(--animation-delay);
    
    contain: layout style;
    will-change: transform;
}

.ticker-content:hover {
    animation-play-state: paused;
}

.ticker-item {
    white-space: nowrap;
}

@keyframes scroll {
    to {
        transform: translateX(calc(-50% - 1rem / 2 + 1px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticker {
        display: none;
    }
}