.custom-scroll {
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #999 #e0e0e0;       /* Firefox */
}

.custom-scroll::-webkit-scrollbar {
  width: 8px;                          /* Width of vertical scrollbar */
}

.custom-scroll::-webkit-scrollbar-track {
  background: #e0e0e0;                 /* Track color */
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #999;              /* Scrollbar thumb color */
  border-radius: 4px;                  /* Rounded edges */
  border: 2px solid transparent;       /* Padding around thumb */
  background-clip: content-box;        /* Makes border see-through */
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #666;              /* Hover effect */
}

  .custom-xo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 1280px) {
    .custom-xo{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

    @media (max-width: 720px) {
    .custom-xo{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

    @media (max-width: 512px) {
    .custom-xo{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }