<section class="py-24">
  <div class="container grid gap-10">
    <h2 class="text-balance text-center text-4xl font-bold">Lorem ipsum, dolor sit amet consectetur adipisicing elit</h2>
    <div class="grid gap-10 md:grid-cols-2">
      <div class="space-y-6 border border-slate-300 p-6">
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat dolor repudiandae excepturi eius possimus saepe repellat voluptatibus impedit itaque fugit tempora pariatur, natus vel repellendus quae labore atque quidem et.</p>
      </div>
      <div class="space-y-6 border border-slate-300 p-6">
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat dolor repudiandae excepturi eius possimus saepe repellat voluptatibus impedit itaque fugit tempora pariatur, natus vel repellendus quae labore atque quidem et.</p>
      </div>
      <div class="space-y-6 border border-slate-300 p-6">
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat dolor repudiandae excepturi eius possimus saepe repellat voluptatibus impedit itaque fugit tempora pariatur, natus vel repellendus quae labore atque quidem et.</p>
      </div>
      <div class="space-y-6 border border-slate-300 p-6">
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat dolor repudiandae excepturi eius possimus saepe repellat voluptatibus impedit itaque fugit tempora pariatur, natus vel repellendus quae labore atque quidem et.</p>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="grid items-center gap-10 md:grid-cols-2">
      <div class="space-y-6">
        <h2 class="text-balance text-4xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad suscipit quam cum illo nostrum ipsum sit, ducimus laudantium, distinctio repudiandae magni vitae laboriosam adipisci illum debitis, tempore impedit quis assumenda. Quae asperiores enim facere repudiandae!</p>
        <a class="button button--md button--primary" href="#"> Inscreva-se </a>
      </div>
      <div>
        <div class="space-y-6 rounded-md bg-slate-700 p-4 text-white md:p-8">
          <h3 class="text-balance text-2xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum eligendi perspiciatis blanditiis quas dolore illo veritatis, omnis inventore dolores nesciunt eum impedit, quidem officiis ut nobis vel hic quisquam!</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum eligendi perspiciatis blanditiis quas dolore illo veritatis, omnis inventore dolores nesciunt eum impedit, quidem officiis ut nobis vel hic quisquam!</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <h2 class="mb-10 text-balance text-center text-4xl font-bold">Frequently Asked Questions</h2>
    <div class="relative flex flex-col gap-2">
      <details class="group rounded border bg-slate-50">
        <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
          Lorem ipsum dolor
          <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
          </svg>
          <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
            <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
          </svg>
        </summary>
        <div class="space-y-3 border-t p-6 text-sm">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        </div>
      </details>
      <details class="group rounded border bg-slate-50">
        <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
          Lorem ipsum dolor
          <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
          </svg>
          <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
            <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
          </svg>
        </summary>
        <div class="space-y-3 border-t p-6 text-sm">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        </div>
      </details>
      <details class="group rounded border bg-slate-50">
        <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
          Lorem ipsum dolor
          <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
          </svg>
          <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
            <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
          </svg>
        </summary>
        <div class="space-y-3 border-t p-6 text-sm">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        </div>
      </details>
      <details class="group rounded border bg-slate-50">
        <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
          Lorem ipsum dolor
          <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
          </svg>
          <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
            <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
          </svg>
        </summary>
        <div class="space-y-3 border-t p-6 text-sm">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        </div>
      </details>
      <details class="group rounded border bg-slate-50">
        <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
          Lorem ipsum dolor
          <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
          </svg>
          <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
            <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
          </svg>
        </summary>
        <div class="space-y-3 border-t p-6 text-sm">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        </div>
      </details>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="grid gap-y-10">
      <div class="space-y-6">
        <h2 class="text-balance text-center text-4xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-balance text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia ipsa omnis autem perspiciatis dolore ullam tempora fugiat adipisci fugit eius labore accusantium totam pariatur, libero dignissimos sapiente dolorum dicta. Quasi!</p>
      </div>
      <ul class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
        <li class="space-y-4 text-balance rounded-lg bg-slate-300 p-8 text-center">
          <img class="mx-auto w-16" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad earum doloremque eos modi sequi, repellendus eligendi doloribus nisi alias,</p>
        </li>
        <li class="space-y-4 text-balance rounded-lg bg-slate-300 p-8 text-center">
          <img class="mx-auto w-16" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad earum doloremque eos modi sequi, repellendus eligendi doloribus nisi alias,</p>
        </li>
        <li class="space-y-4 text-balance rounded-lg bg-slate-300 p-8 text-center">
          <img class="mx-auto w-16" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad earum doloremque eos modi sequi, repellendus eligendi doloribus nisi alias,</p>
        </li>
        <li class="space-y-4 text-balance rounded-lg bg-slate-300 p-8 text-center">
          <img class="mx-auto w-16" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad earum doloremque eos modi sequi, repellendus eligendi doloribus nisi alias,</p>
        </li>
      </ul>
    </div>
  </div>
</section>

<section class="space-y-10 py-24">
  <div class="container">
    <div class="space-y-6 text-center">
      <h2 class="text-balance text-4xl font-bold">Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
      <p class="m-auto max-w-[70ch]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, minima explicabo. Doloremque, necessitatibus cupiditate. Temporibus, voluptatibus sed dolores rerum ut doloremque ducimus atque tempora incidunt vel perferendis, exercitationem error odio.</p>
    </div>
  </div>
  <div class="container px-0">
    <div class="ov flex snap-x gap-6  px-6 pb-6 lg:px-12 lg:pb-0">
      <div class="min-w-[90%] flex-1 snap-center space-y-4 rounded-2xl bg-slate-200 px-6 py-10  md:p-10 lg:min-w-0">
        <img class="w-14" src="/star.svg" alt="..." />
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo laborum illo perferendis id labore saepe sit, dicta temporibus eos. Quo tempore id earum deleniti mollitia aut cupiditate aperiam dolore vitae?</p>
      </div>
      <div class="min-w-[90%] flex-1 snap-center space-y-4 rounded-2xl bg-slate-200 px-6 py-10  md:p-10 lg:min-w-0">
        <img class="w-14" src="/star.svg" alt="..." />
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo laborum illo perferendis id labore saepe sit, dicta temporibus eos. Quo tempore id earum deleniti mollitia aut cupiditate aperiam dolore vitae?</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo laborum illo perferendis id labore saepe sit, dicta temporibus eos. Quo tempore id earum deleniti mollitia aut cupiditate aperiam dolore vitae?</p>
      </div>
      <div class="min-w-[90%] flex-1 snap-center space-y-4 rounded-2xl bg-slate-200 px-6 py-10  md:p-10 lg:min-w-0">
        <img class="w-14" src="/star.svg" alt="..." />
        <h3 class="text-xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo laborum illo perferendis id labore saepe sit, dicta temporibus eos. Quo tempore id earum deleniti mollitia aut cupiditate aperiam dolore vitae?</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="text-center">
      <a class="button button--md button--secondary" href="#">Read more</a>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="flex flex-col gap-6">
      <h2 class="text-4xl font-bold">Lorem ipsum dolor sit amet</h2>
      <div class="grid gap-x-10 gap-y-4 md:grid-cols-2">
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div>
        <a class="button button--md button--primary" href="#"> Read more </a>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="flex flex-col gap-6">
      <h2 class="text-4xl font-bold">Lorem ipsum dolor sit amet</h2>
      <div class="relative grid gap-x-10 gap-y-4 md:grid-cols-2">
        <div class="inset-0 m-auto h-full w-1 bg-slate-950 md:absolute" aria-hidden="true"></div>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <ul class="list-inside list-disc">
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
          </ul>
        </div>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div>
        <a class="button button--md button--primary" href="#"> Read more </a>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="grid gap-10 md:grid-cols-2">
      <div class="space-y-6">
        <h2 class="text-4xl font-bold">Lorem ipsum dolor sit amet</h2>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
        </div>
        <div class="space-y-2">
          <h3 class="text-2xl font-bold">Lorem ipsum dolor sit</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="space-y-2">
          <h3 class="text-2xl font-bold">Lorem ipsum dolor sit</h3>
          <ul class="list-inside list-disc space-y-2">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Sed do eiusmod tempor incididunt ut</li>
            <li>Labore et dolore magna aliqua</li>
            <li>Ut enim ad minim veniam</li>
          </ul>
        </div>
      </div>
      <div class="flex flex-col gap-2 md:mt-10">
        <details class="group rounded border bg-slate-50">
          <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
            Lorem ipsum dolor
            <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
            </svg>
            <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
              <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
            </svg>
          </summary>
          <div class="space-y-3 border-t p-6 text-sm">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          </div>
        </details>
        <details class="group rounded border bg-slate-50">
          <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
            Lorem ipsum dolor
            <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
            </svg>
            <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
              <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
            </svg>
          </summary>
          <div class="space-y-3 border-t p-6 text-sm">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          </div>
        </details>
        <details class="group rounded border bg-slate-50">
          <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
            Lorem ipsum dolor
            <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
            </svg>
            <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
              <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
            </svg>
          </summary>
          <div class="space-y-3 border-t p-6 text-sm">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          </div>
        </details>
        <details class="group rounded border bg-slate-50">
          <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
            Lorem ipsum dolor
            <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
            </svg>
            <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
              <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
            </svg>
          </summary>
          <div class="space-y-3 border-t p-6 text-sm">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          </div>
        </details>
        <details class="group rounded border bg-slate-50">
          <summary class="flex cursor-pointer list-none items-center justify-between px-6 py-3 marker:hidden">
            Lorem ipsum dolor
            <svg class="hidden group-open:block" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.4375 11.1094H3.5625C3.45937 11.1094 3.375 11.1937 3.375 11.2969V12.7031C3.375 12.8063 3.45937 12.8906 3.5625 12.8906H20.4375C20.5406 12.8906 20.625 12.8063 20.625 12.7031V11.2969C20.625 11.1937 20.5406 11.1094 20.4375 11.1094Z" fill="currentColor" />
            </svg>
            <svg class="block group-open:hidden" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.2969 3.5625H12.7031C12.8281 3.5625 12.8906 3.625 12.8906 3.75V20.25C12.8906 20.375 12.8281 20.4375 12.7031 20.4375H11.2969C11.1719 20.4375 11.1094 20.375 11.1094 20.25V3.75C11.1094 3.625 11.1719 3.5625 11.2969 3.5625Z" fill="currentColor" />
              <path d="M4.125 11.1094H19.875C20 11.1094 20.0625 11.1719 20.0625 11.2969V12.7031C20.0625 12.8281 20 12.8906 19.875 12.8906H4.125C4 12.8906 3.9375 12.8281 3.9375 12.7031V11.2969C3.9375 11.1719 4 11.1094 4.125 11.1094Z" fill="currentColor" />
            </svg>
          </summary>
          <div class="space-y-3 border-t p-6 text-sm">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
          </div>
        </details>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="flex flex-col gap-10">
      <div class="mx-auto max-w-xl space-y-4 text-center">
        <h2 class="text-center text-4xl font-bold">Our benefits for you</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus nostrum, placeat consequuntur veniam eaque eius ab dicta esse odio iste.</p>
      </div>
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-10 text-center">
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li class="max-w-56 space-y-4">
          <img class="mx-auto w-14" src="/star.svg" alt="..." />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
      </ul>
      <div class="text-center">
        <a class="button button--md button--primary" href="#"> Read more </a>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="grid items-center gap-10 md:grid-cols-2">
      <div class="space-y-6 pt-24 md:pb-24">
        <h2 class="text-4xl font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
        </div>
        <a class="button button--md button--primary" href="#">Read more</a>
      </div>
      <div class="h-full pb-24 md:pb-0">
        <img class="h-full w-full rounded object-cover md:rounded-none" src="https://images.unsplash.com/photo-1503676382389-4809596d5290?q=80&w=2676&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="..." loading="lazy" />
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="grid items-center gap-10 md:grid-cols-2">
      <div class="space-y-6 md:order-2">
        <h2 class="text-4xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
        <ol class="space-y-6">
          <li class="flex items-center gap-4">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-700 font-bold text-white">1</span>
            <p>Lorem ipsum dolor sit amet</p>
          </li>
          <li class="flex items-center gap-4">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-700 font-bold text-white">2</span>
            <p>Lorem ipsum dolor sit amet</p>
          </li>
          <li class="flex items-center gap-4">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-700 font-bold text-white">3</span>
            <p>Lorem ipsum dolor sit amet</p>
          </li>
          <li class="flex items-center gap-4">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-700 font-bold text-white">4</span>
            <p>Lorem ipsum dolor sit amet</p>
          </li>
        </ol>
      </div>
      <div>
        <img src="https://images.unsplash.com/photo-1503676382389-4809596d5290?q=80&w=2676&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="..." loading="lazy" />
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="grid items-center gap-10 md:grid-cols-2">
      <div class="space-y-6">
        <h2 class="text-balance text-4xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad suscipit quam cum illo nostrum ipsum sit, ducimus laudantium, distinctio repudiandae magni vitae laboriosam adipisci illum debitis, tempore impedit quis assumenda. Quae asperiores enim facere repudiandae!</p>
        </div>
        <a class="button button--md button--primary" href="#"> Inscreva-se </a>
      </div>
      <div class="relative">
        <img class="rounded-xl" src="/assets/placeholder-01.jpg" alt="..." loading="lazy" />
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container">
    <div class="grid items-center gap-10 md:grid-cols-2">
      <div class="space-y-6 md:order-2">
        <h2 class="text-4xl font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
        <div class="space-y-4">
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur explicabo magnam id tempora beatae rem a similique aliquid aliquam debitis?</p>
        </div>
        <ul class="grid grid-cols-3 gap-x-4 gap-y-6">
          <li class="space-y-4">
            <img class="w-14" src="/star.svg" alt="..." />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </li>
          <li class="space-y-4">
            <img class="w-14" src="/star.svg" alt="..." />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </li>
          <li class="space-y-4">
            <img class="w-14" src="/star.svg" alt="..." />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </li>
          <li class="space-y-4">
            <img class="w-14" src="/star.svg" alt="..." />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </li>
          <li class="space-y-4">
            <img class="w-14" src="/star.svg" alt="..." />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </li>
          <li class="space-y-4">
            <img class="w-14" src="/star.svg" alt="..." />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </li>
        </ul>
      </div>
      <div class="relative">
        <div class="grid grid-cols-2 gap-3">
          <img class="col-span-2 rounded" src="https://images.unsplash.com/photo-1503676382389-4809596d5290?q=80&w=2676&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="..." loading="lazy" />
          <img class="rounded" src="https://images.unsplash.com/photo-1503676382389-4809596d5290?q=80&w=2676&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="..." loading="lazy" />
          <img class="rounded" src="https://images.unsplash.com/photo-1503676382389-4809596d5290?q=80&w=2676&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="..." loading="lazy" />
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container max-w-4xl">
    <blockquote class="space-y-4">
      <p class="border-slate-900 border-l-4 py-2 pl-10 text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde nihil, beatae nam velit sed <strong class="font-bold">culpa aliquid dicta voluptate</strong> numquam illum vel placeat quis praesentium.</p>
      <footer class="flex justify-end">
        <cite class="text-slate-400 block max-w-[34ch] text-right text-sm not-italic">Source: <a href="https://www.conjur.com.br/2021-jul-26/tributario-divida-ativa-empresas-estados-df-soma-r-896-bilhoes">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta.</a></cite>
      </footer>
    </blockquote>
  </div>
</section>

<section>
  <div class="grid md:grid-cols-2">
    <div class="bg-slate-800 py-24 text-white md:pr-10">
      <div class="container mr-0 max-w-3xl space-y-6">
        <h2 class="text-balance text-4xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad suscipit quam cum illo nostrum ipsum sit, ducimus laudantium, distinctio repudiandae magni vitae laboriosam adipisci illum debitis, tempore impedit quis assumenda. Quae asperiores enim facere repudiandae!</p>
        <a class="button button--md button--primary" href="#"> Inscreva-se </a>
      </div>
    </div>
    <div class="bg-slate-700 py-24 text-white md:pl-10">
      <div class="container ml-0 max-w-3xl space-y-6">
        <h3 class="text-balance text-4xl font-bold">Lorem ipsum dolor sit amet consectetur</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum eligendi perspiciatis blanditiis quas dolore illo veritatis, omnis inventore dolores nesciunt eum impedit, quidem officiis ut nobis vel hic quisquam!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rerum eligendi perspiciatis blanditiis quas dolore illo veritatis, omnis inventore dolores nesciunt eum impedit, quidem officiis ut nobis vel hic quisquam!</p>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container max-w-6xl">
    <div class="grid items-center gap-10 md:grid-cols-2">
      <div class="space-y-6">
        <h2 class="text-balance text-4xl font-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <div class="space-y-4">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad suscipit quam cum illo nostrum ipsum sit, ducimus laudantium, distinctio repudiandae magni vitae laboriosam adipisci illum debitis, tempore impedit quis assumenda. Quae asperiores enim facere repudiandae!</p>
        </div>
        <a class="button button--md button--primary" href="#"> Inscreva-se </a>
      </div>
      <div class="relative">
        <iframe
          class="aspect-video h-full w-full"
          width="560"
          height="315"
          src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
          srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:20%;text-align:center;background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NSA1MyI+CiAgPHBhdGggZD0iTTc0LDExLjYyQTEwLjU5LDEwLjU5LDAsMCwwLDYzLjM5LDEuMDZTNTAuMzQsMCwzNi45MywwQzIzLjcyLDAsMTEuMDksMS4wNiwxMS4wOSwxLjA2QTEwLjU5LDEwLjU5LDAsMCwwLC41MywxMS42MlMwLDE5LjIzLDAsMjcuNDdDMCwzNSwuNTMsNDEuMjEuNTMsNDEuMjFBMTAuNTksMTAuNTksMCwwLDAsMTEuMDksNTEuNzdzMTMuNDcsMS4wNiwyNy4xNiwxLjA2YzEzLDAsMjUuMTQtMS4wNiwyNS4xNC0xLjA2QTEwLjYsMTAuNiwwLDAsMCw3NCw0MS4yMXMuNTMtNi42Ni41My0xNC40OGMwLTgtLjUzLTE1LjExLS41My0xNS4xMVoiIHN0eWxlPSJmaWxsOiAjZjEyYjI0O2ZpbGwtcnVsZTogZXZlbm9kZDtpc29sYXRpb246IGlzb2xhdGUiLz4KICA8cGF0aCBkPSJNMzAsMTYuMTFWMzYuNzJMNTAuMDgsMjYuMTVaIiBzdHlsZT0iZmlsbDogI2ZmZjsgZmlsbC1ydWxlOiBldmVub2RkIi8+Cjwvc3ZnPgo=) no-repeat center / contain}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ;autoplay=1;><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong?'><span></span></a>"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          title="The Dark Knight Rises: What Went Wrong?">
        </iframe>
      </div>
    </div>
  </div>
</section>