.announcementbanner{
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:.5rem 0;
    background:#d0a76d
}
.announcementbanner.animate{
    gap:4rem
}
.announcementbanner span{
    color:#000;
    text-align:center;
	font-size:1.25rem;
    font-weight:500
}
.announcementbanner.animate span{
    flex-shrink:0;
    white-space:nowrap;
    animation:infiniteScroll var(--announcement-speed,20s) linear infinite;
    will-change:transform
}
.mobile-text{
    display:none
}

@media (max-width:767px){
    .announcementbanner{
        position:absolute;
        top:var(--announcement-banner-mobile-offset,7rem)
    }
    .announcementbanner span{
        font-size:.95rem;
        font-weight:600
    }
    .desktop-text{
        display:none
    }
    .mobile-text{
        display:inline
    }
}
@media (prefers-reduced-motion:reduce){
    .announcementbanner.animate span{
        animation:none
    }
}
@keyframes infiniteScroll{
    to{
        transform:translateX(calc(-100% - 4rem))
    }
}