Agencies Career Timeline Section

<section
  class="overflow-hidden md:p-16 bg-gradient-to-br from-white/10 via-white/0 to-white/10 w-full max-w-[1500px] rounded-[32px] ring-0 pt-8 pr-8 pb-8 pl-8 relative m-8 mx-auto"
  style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)); --border-radius-before: 32px"
  id="experience">
  <div class="grid grid-cols-1 md:grid-cols-2 mb-16 pb-8">
    <div class="col-span-1">
      <h2 class="text-7xl sm:text-9xl font-extrabold text-white leading-none">
        AGENCIES
      </h2>
      <div class="text-white text-sm font-light mt-4 opacity-50">
        // SKILLS &amp; TIMELINE
      </div>
    </div>

    <div class="col-span-1 self-end md:text-right mt-8 md:mt-0">
      <span class="uppercase block text-sm font-medium text-cyan-400 tracking-widest mb-1">03</span>
      <p class="text-white/70 max-w-sm ml-auto text-lg font-light">
        A timeline of my agency representation and key career milestones.
      </p>
    </div>
  </div>

  <div
    class="md:px-6 flex md:justify-around text-[10px] md:text-xs uppercase sticky z-20 font-bold text-black tracking-widest bg-white w-full mb-0 pt-3 pr-4 pb-3 pl-4 top-0 items-center justify-between">
    <span class="cursor-pointer hover:opacity-60 transition-opacity">
          Representation
        </span>
    <span class="cursor-pointer hover:opacity-60 transition-opacity hidden md:block">
          Freelance Projects
        </span>
    <span class="cursor-pointer hover:opacity-60 transition-opacity">
          Location
        </span>
    <span class="cursor-pointer hover:opacity-60 transition-opacity hidden md:block">
          International
        </span>
  </div>

  <div class="flex flex-col w-full">
    <div class="group relative py-6 md:py-8 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
      <div
        class="flex flex-col md:grid md:grid-cols-[25%_20%_35%_20%] md:items-center justify-between gap-2 px-2 md:px-4">
        <div class="w-full">
          <h3 class="text-xl md:text-2xl font-medium text-white group-hover:text-cyan-400 transition-colors">
            Elite Model Mgmt
          </h3>
        </div>
        <div class="w-full">
          <span class="text-sm md:text-base text-gray-500 font-mono group-hover:text-white transition-colors">
                2022 - Present
              </span>
        </div>
        <div class="w-full">
          <span class="text-base md:text-lg text-gray-300 group-hover:text-white transition-colors">
                Signed Model
              </span>
        </div>
        <div class="w-full text-left md:text-right">
          <span class="text-sm md:text-base text-gray-500 uppercase tracking-wider group-hover:text-cyan-400 transition-colors">
                New York, USA
              </span>
        </div>
      </div>
    </div>

    <div class="group relative py-6 md:py-8 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
      <div
        class="flex flex-col md:grid md:grid-cols-[25%_20%_35%_20%] md:items-center justify-between gap-2 px-2 md:px-4">
        <div class="w-full">
          <h3 class="text-xl md:text-2xl font-medium text-white group-hover:text-cyan-400 transition-colors">
            IMG London
          </h3>
        </div>
        <div class="w-full">
          <span class="text-sm md:text-base text-gray-500 font-mono group-hover:text-white transition-colors">
                2020 - 2022
              </span>
        </div>
        <div class="w-full">
          <span class="text-base md:text-lg text-gray-300 group-hover:text-white transition-colors">
                Development Board
              </span>
        </div>
        <div class="w-full text-left md:text-right">
          <span class="text-sm md:text-base text-gray-500 uppercase tracking-wider group-hover:text-cyan-400 transition-colors">
                London, UK
              </span>
        </div>
      </div>
    </div>

    <div class="group relative py-6 md:py-8 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
      <div
        class="flex flex-col md:grid md:grid-cols-[25%_20%_35%_20%] md:items-center justify-between gap-2 px-2 md:px-4">
        <div class="w-full">
          <h3 class="text-xl md:text-2xl font-medium text-white group-hover:text-cyan-400 transition-colors">
            Ford Models
          </h3>
        </div>
        <div class="w-full">
          <span class="text-sm md:text-base text-gray-500 font-mono group-hover:text-white transition-colors">
                2018 - 2020
              </span>
        </div>
        <div class="w-full">
          <span class="text-base md:text-lg text-gray-300 group-hover:text-white transition-colors">
                Runway Division
              </span>
        </div>
        <div class="w-full text-left md:text-right">
          <span class="text-sm md:text-base text-gray-500 uppercase tracking-wider group-hover:text-cyan-400 transition-colors">
                Paris, France
              </span>
        </div>
      </div>
    </div>

    <div class="group relative py-6 md:py-8 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
      <div
        class="flex flex-col md:grid md:grid-cols-[25%_20%_35%_20%] md:items-center justify-between gap-2 px-2 md:px-4">
        <div class="w-full">
          <h3 class="text-xl md:text-2xl font-medium text-white group-hover:text-cyan-400 transition-colors">
            Freelance
          </h3>
        </div>
        <div class="w-full">
          <span class="text-sm md:text-base text-gray-500 font-mono group-hover:text-white transition-colors">
                2016 - 2018
              </span>
        </div>
        <div class="w-full">
          <span class="text-base md:text-lg text-gray-300 group-hover:text-white transition-colors">
                Commercial Talent
              </span>
        </div>
        <div class="w-full text-left md:text-right">
          <span class="text-sm md:text-base text-gray-500 uppercase tracking-wider group-hover:text-cyan-400 transition-colors">
                Miami, USA
              </span>
        </div>
      </div>
    </div>

    <div class="group relative py-6 md:py-8 border-b border-white/10 hover:bg-white/5 transition-colors cursor-pointer">
      <div
        class="flex flex-col md:grid md:grid-cols-[25%_20%_35%_20%] md:items-center justify-between gap-2 px-2 md:px-4">
        <div class="w-full">
          <h3 class="text-xl md:text-2xl font-medium text-white group-hover:text-cyan-400 transition-colors">
            Scouted
          </h3>
        </div>
        <div class="w-full">
          <span class="text-sm md:text-base text-gray-500 font-mono group-hover:text-white transition-colors">
                2014 - 2016
              </span>
        </div>
        <div class="w-full">
          <span class="text-base md:text-lg text-gray-300 group-hover:text-white transition-colors">
                New Face
              </span>
        </div>
        <div class="w-full text-left md:text-right">
          <span class="text-sm md:text-base text-gray-500 uppercase tracking-wider group-hover:text-cyan-400 transition-colors">
                Chicago, USA
              </span>
        </div>
      </div>
    </div>
  </div>
</section>