.container {
          display: flex;
          overflow-x: auto;
          align-items: center;
          justify-content: center;
          gap: 30px;
          padding-top: 30px;
      }

      .carousel {
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -ms-overflow-style: none;
          gap: 10px;
          width: 100%;
          max-width: 600px;
          height: 300px;
          padding-bottom: 3px;
          border-bottom: 3px solid #ffffff;
      }

      .carousel::-webkit-scrollbar {
          display: none;
      }

      .carousel:focus-visible {
          outline: none;
      }

      .carousel:focus {
          outline: none;
          border-bottom-color: #000000;
      }

      .carousel.count {
          height: auto;
      }

      .slide {
          flex: 0 0 100%;
          height: 100%;
          scroll-snap-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 3rem;
          font-weight: bold;
          background-size: contain;
          background-repeat: no-repeat;
      }

      .slide.start {
          background: #f1c40f;
      }

      .slide.end {
          background: #000000;
      }

      .points {
          flex: 0 0 100%;
          display: block;
          align-items: center;
          text-align: center;
          padding-top: 30px;
          font-size: 3rem;
      }

      .top {
          text-align: center;
      }

      .top>span {
          color: #D3D3D3;
          cursor: pointer;
      }

      .top>span.nodisplay {
          display: none;
      }