@media (max-width: 767px) {
  /* Disable legacy in-template and global .table-scroll hint layers. */
  #service .brewhouse-div .table-scroll::before,
  #service .brewhouse-ri .con .table-scroll::before,
  #service .brewhouse-div .table-scroll::after,
  #service .brewhouse-ri .con .table-scroll::after {
    content: none !important;
    opacity: 0 !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #service .brewhouse-div .pb-inline-scroll-wrap,
  #service .brewhouse-ri .con .pb-inline-scroll-wrap {
    position: relative;
  }

  #service .brewhouse-div .pb-inline-scroll-wrap::after,
  #service .brewhouse-ri .con .pb-inline-scroll-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background-color: rgba(2, 71, 156, 0.92);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Cpath d='M9.5 17h15'/%3E%3Cpath d='M21.5 13.5 25 17l-3.5 3.5'/%3E%3Cpath d='M12.5 13.5 9 17l3.5 3.5'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px 26px;
    box-shadow: 0 10px 20px rgba(2, 71, 156, 0.22);
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.2s ease;
    animation: pbInlineScrollHint 1.4s ease-in-out infinite;
  }

  #service .brewhouse-div .pb-inline-scroll-wrap.pb-inline-scroll-hide::after,
  #service .brewhouse-ri .con .pb-inline-scroll-wrap.pb-inline-scroll-hide::after {
    opacity: 0;
    animation: none;
  }
}

@keyframes pbInlineScrollHint {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.9;
  }

  50% {
    transform: translateX(-6px);
    opacity: 1;
  }
}