G-Loot DS — brawl info structure

by Augustin Hiebel

HTML

<ul class="surface overflow-hidden rounded-lg flex flex-col lg:flex-row flex-wrap items-stretch">
  <li class="flex-1 p-4 border-b lg:border-b-0 lg:border-r border-ui-700">
    <div class="animate-slide-in-bottom animate-delay" style="--delay: calc(1 * 0.05s);">
      <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Objective</h4>
      <p class="text-sm text-ui-200 leading-tight">Most kills wins</p>
    </div>
  </li>
  <li class="flex-1 p-4 border-b lg:border-b-0 lg:border-r border-ui-700">
    <div class="animate-slide-in-bottom animate-delay" style="--delay: calc(2 * 0.05s);">
      <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Tiebreaker</h4>
      <p class="text-sm text-ui-200 leading-tight">Headshots from your 3 best rounds decides a tie</p>
    </div>
  </li>
  <li class="flex-1 p-4 border-b lg:border-b-0 lg:border-r border-ui-700">
    <div class="animate-slide-in-bottom animate-delay" style="--delay: calc(3 * 0.05s);">
      <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Game modes</h4>
      <p class="text-sm text-ui-200 leading-tight">Competitive</p>
    </div>
  </li>
  <li class="flex-1 p-4 border-b lg:border-b-0 lg:border-r border-ui-700">
    <div class="animate-slide-in-bottom animate-delay" style="--delay: calc(4 * 0.05s);">
      <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Brawl points</h4>
      <p class="text-sm text-ui-200 leading-tight">Best 3 matches</p>
    </div>
  </li>
  <li class="flex-1 p-4">
    <div class="animate-slide-in-bottom animate-delay" style="--delay: calc(5 * 0.05s);">
      <h4 class="font-headings text-base uppercase text-ui-400 mb-1">Brawl ID</h4>
      <button type="button" class="button button-sm button-secondary"><span>Copy</span><span class="icon icon-document-copy"></span></button>
    </div>
  </li>
</ul>