@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

:root {
  --font-body: "Montserrat", sans-serif;
  --font-title: "Playfair", serif;
  --body: 1.063rem;

  --title-xl: 3.75rem;
  /* ~60px */
  --title-l: 2.813rem;
  /* ~45px */
  --title-m: 2.25rem;
  /* ~36px */
  --title-s: 1.75rem;
  /* ~28px */
  --title-xs: 1.375rem;
  /* ~22px */
  --title-xxs: 1.125rem;
  /* ~18px */

  --black: 900;
  --bold: 700;
  --medium: 500;
  --regular: 400;
  --light: 300; 

  --c-rosa: #d32e5e;
  --c-rosa-light: #fddcdc;
  --c-negro: #222222;
  --c-beige: #f4ede7;
  --c-gris: #f7f8f9;
  --c-blanco: #ffffff;

  --b-radius-1: 10px;
  --b-radius-2: 20px;

  /* Transitions */
  --all-transition: all 0.4s ease;
}

@media screen and (max-width: 1440px) {
  :root {
    --title-xl: 3.25rem;
    /* ~52px */
    --title-l: 2.5rem;
    /* ~40px */
    --title-m: 2rem;
    /* ~32px */
    --title-s: 1.625rem;
    /* ~26px */
    --title-xs: 1.25rem;
    /* ~20px */
    --title-xxs: 1.1rem;
    /* ~17.6px */

  }
}

@media screen and (max-width: 1024px) {
  :root {
    --title-xl: 2.75rem;
    /* ~44px */
    --title-l: 2.125rem;
    /* ~34px */
    --title-m: 1.75rem;
    /* ~28px */
    --title-s: 1.5rem;
    /* ~24px */
    --title-xs: 1.25rem;
    /* ~20px */
    --title-xxs: 1rem;
    /* ~16px */
  }
}

@media screen and (max-width: 600px) {
  :root {
    --title-xl: 2.25rem;
    /* ~36px */
    --title-l: 1.875rem;
    /* ~30px */
    --title-m: 1.5rem;
    /* ~24px */
    --title-s: 1.25rem;
    /* ~20px */
    --title-xs: 1.125rem;
    /* ~18px */
    --title-xxs: 1rem;
    /* ~16px */
  }
}