.cafe-menu {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  gap: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.close {
  display: flex;
  justify-content: end;
  padding-right: 20px;
  i {
    color: var(--primary-cl);
    font-size: 24px;
  }
}

.cafe-menu-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll-left 40s linear infinite;
  &.right {
    animation: scroll-right 40s linear infinite;
  }
  &:hover {
    animation-play-state: paused;
  }

  .menu-card {
    height: 200px;
    background-color: #5e0f095b;
    width: 200px;
    flex-shrink: 0;
    border-radius: 18px;
    overflow: hidden;
    padding: 16px;

    img {
      border-radius: 18px;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10%);
  }
}
@keyframes scroll-right {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
  }
}

@media screen and (max-width: 759px) {
  .cafe-menu-track {
    gap: 8px;
    .menu-card {
      height: 120px;
      background-color: #5e0f095b;
      width: 120px;
      flex-shrink: 0;
      border-radius: 18px;
      overflow: hidden;
      padding: 4px;
    }
  }
}