Brutalism_News_Carousel

<div class="w-full mx-auto p-4 md:p-8 bg-neutral-100 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-100 border-t-4 border-b-4 border-neutral-900 dark:border-neutral-100">
  <div class="max-w-7xl mx-auto overflow-hidden relative">
    <!-- Hidden but accessible labels for screen readers -->
    <h2 class="sr-only">News Carousel</h2>

    <!-- Carousel Wrapper (using scroll-snap for simplicity, can be replaced with JS for full carousel functionality) -->
    <div class="flex w-full snap-x snap-mandatory overflow-x-scroll scrollbar-hide space-x-4 md:space-x-8 lg:space-x-12 pb-4">

      <!-- Slide 1 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=1" alt="Image for news article 1" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Breaking News: Headline One Exposes New Details
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Category 1 // October 26, 2023</span>
      </div>

      <!-- Slide 2 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=2" alt="Image for news article 2" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          In-Depth Report: The Impact of Global Warming Escalates
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Environment // October 25, 2023</span>
      </div>

      <!-- Slide 3 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=3" alt="Image for news article 3" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Local Story: Community Rallies Despite New Challenges
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Community // October 24, 2023</span>
      </div>

      <!-- Slide 4 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=4" alt="Image for news article 4" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Opinion: Rethinking Modern Economics for Sustainable Growth
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Opinion // October 23, 2023</span>
      </div>

    </div>
  </div>

  <!-- Simple Scroll Indicator / Navigation - can be replaced with JS for full carousel controls -->
  <div class="flex justify-center mt-6 space-x-2">
    <span class="block w-4 h-4 md:w-5 md:h-5 bg-neutral-900 dark:bg-neutral-100 border-2 border-neutral-900 dark:border-neutral-100"></span>
    <span class="block w-4 h-4 md:w-5 md:h-5 border-2 border-neutral-900 dark:border-neutral-100"></span>
    <span class="block w-4 h-4 md:w-5 md:h-5 border-2 border-neutral-900 dark:border-neutral-100"></span>
  </div>

  <!-- Custom Scrollbar Hide - add this to your CSS or a style tag if not using a utility class -->
  <style>
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  </style>
</div>