/* General layout (one item) */
    .one-item {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .one-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        cursor: pointer;
      }

      /* Two items */
      .two-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .two-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        cursor: pointer;
      }

      /* Three items */
      .three-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }

      .three-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        flex: 1 1 45%;
        cursor: pointer;
      }

      /* Four items */
      .four-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }

      .four-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        flex: 1 1 45%;
        cursor: pointer;
      }

      /* More than four items */
      .more-than-four-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }

      .more-than-four-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        flex: 1 1 45%;
        cursor: pointer;
      }

      /* Number layer */
      .number-layer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 24px;
        font-weight: bold;
        padding: 5px 10px;
        border-radius: 5px;
        z-index: 10;
        cursor: pointer;
      }

      /* Media queries for responsiveness */

      /* Small screens (mobile) */
      @media (max-width: 600px) {
        .one-item img, .two-item img, .three-item img, .four-item img, .more-than-four-item img {
            width: 90px;
            height: 90px;
        }

        .three-item img, .four-item img, .more-than-four-item img {
            flex: 1 1 40%;
        }

        .number-layer {
            font-size: 18px;
            padding: 3px 8px;
        }
      }

      /* Medium screens (tablets) */
      @media (max-width: 900px) {
        .one-item img, .two-item img, .three-item img, .four-item img, .more-than-four-item img {
            width: 90px;
            height: 90px;
        }

        .three-item img, .four-item img, .more-than-four-item img {
            flex: 1 1 42%;
        }

        .number-layer {
            font-size: 20px;
            padding: 4px 9px;
        }
      }

      /* Large screens (laptops/desktops) */
      @media (min-width: 1200px) {
        .one-item img, .two-item img, .three-item img, .four-item img, .more-than-four-item img {
            width: 90px;
            height: 90px;
        }

        .three-item img, .four-item img, .more-than-four-item img {
            flex: 1 1 45%;
        }

        .number-layer {
            font-size: 24px;
            padding: 5px 10px;
        }
      }