ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;          /* Use flexbox for better control */
      flex-wrap: wrap;      /* Allow items to wrap */
      justify-content: center; /* Center items horizontally */
    }

    li {
      margin: 10px;
      width: 100%;          /* Initial width: full width */
    }

    img, video {
      max-width: 100%;       /* Ensure images/videos don't exceed container */
      height: auto;         /* Maintain aspect ratio */
      display: block;       /* Prevent spacing issues below the image */
    }

    @media (min-width: 768px) {
      li {
        width: 50%;         /* Two items per row on medium screens */
      }
    }

    @media (min-width: 1024px) {
      li {
        width: 33.33%;      /* Three items per row on large screens */
      }
    }