sfp_front_nuxt_iguassu_alliance/app/components/SectionDestinations.vue

<template>
  <section class="bg-[url('/img/destinations_bg.png')] bg-cover bg-center py-12 md:py-16 lg:py-26 flex justify-center lg:justify-end">
    <div class="w-full px-4 lg:w-[85%] xl:w-8/10 lg:px-2 flex flex-col gap-6 md:gap-10">
      <div class="flex flex-col gap-2 lg:gap-5">
        <h1 class="text-3xl md:text-4xl lg:text-[45px] font-bold uppercase text-white lg:leading-6">
          Próximos destinos...
        </h1>
        <p class="text-base md:text-lg lg:text-xl text-white font-medium">
          Veja as oportunidades que temos pela Frente!
        </p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:flex lg:flex-row lg:items-center lg:justify-between gap-4 md:gap-6 xl:gap-8">
        <div class="md:col-span-2 lg:contents">
          <DestinationCard
            image="/img/paraguay.png"
            name="Em breve Paraguay"
            date="18/19 de Maio"
            class="h-[260px] sm:h-[300px] lg:h-[390px] lg:w-[630px] bg-position-[center_15%]! md:bg-position-[center_20%] lg:bg-position-[center_40%]"
          />
        </div>
        <DestinationCard
          image="/img/china.jpg"
          label="Em breve"
          name="China"
          class="h-40 sm:h-50 lg:h-[280px] lg:w-md"
          bg-position-class="md:bg-bottom lg:bg-position-[center_380%]"
        />
        <DestinationCard
          image="/img/dubai.jpg"
          label="Em breve"
          name="Dubai"
          class="h-40 md:h-50 lg:h-[280px] lg:w-md"
          bg-position-class="md:bg-bottom lg:bg-position-[center_800%]"
        />
      </div>
      <CtaButton class="self-stretch lg:self-start justify-center" />
    </div>
  </section>
</template>