@use "sass:meta";
@use "tailwindcss/base";
@use "tailwindcss/components";
@use "tailwindcss/utilities";

@layer base {
  @include meta.load-css("stylesheets/decidim/fonts");
  @include meta.load-css("stylesheets/decidim/typography");
  // Keep this in separate file as long as we are maintaining Foundation compatibility
  @include meta.load-css("stylesheets/decidim/rich_text");
}

body {
  @apply text-center mt-16 px-8;

  > * {
    @apply mx-auto w-full;
  }

  h1 {
    @apply text-2xl text-black mb-6;
  }

  h3 {
    @apply text-lg text-black mt-4;
  }

  .code-qr {
    @apply mx-auto w-[80%] md:w-[40%] lg:w-[20%];
  }

  .card__grid-img {
    @apply aspect-[21/9] rounded-t overflow-hidden mx-auto w-full lg:w-96 mb-12;

    img {
      @apply w-full h-full object-cover;
    }
  }

  .logo {
    @apply mt-10;

    a {
      @apply inline-block;

      img {
        @apply h-20 w-full;
      }
    }
  }
}

@media print {
  body {
    zoom: 0.75;

    h1 {
      @apply text-2xl text-black mb-12;
    }

    .card__grid-img {
      @apply w-[80%];
    }
  }
}
