.coffee-banner {
  --speed: 20s;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  background: var(--color-accent);
  overflow: hidden;
}

.coffee-banner__track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed) linear infinite;
  will-change: transform;
}

.coffee-banner__inner {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-second);
}

.coffee-banner__inner img {
  width: 60px;
  height: 30px;
  flex: 0 0 auto;
}

.coffee-banner:hover .coffee-banner__track {
  animation-play-state: paused;
}

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

@media (max-width: 1023px) {
  .coffee-banner {
    height: 70px;
  }
  .coffee-banner__inner {
    font-size: 28px;
    gap: 28px;
  }
  .coffee-banner__inner img {
    width: 44px;
    height: 22px;
  }
}

@media (max-width: 767px) {
  .coffee-banner {
    height: 60px;
  }
  .coffee-banner__inner {
    font-size: 22px;
    gap: 22px;
  }
  .coffee-banner__inner img {
    width: 36px;
    height: 18px;
  }
}