@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-1.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-2.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fonte-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fonte-8.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fonte-9.ttf) format('truetype');
}

html[data-font="cormorant"]{--serif:'Cormorant Garamond',Georgia,serif}
html[data-font="lora"]{--serif:'Lora',Georgia,serif}
html[data-font="baskerville"]{--serif:'Libre Baskerville',Georgia,serif}
html[data-font="manrope"]{--serif:'Manrope',Arial,sans-serif}
html[data-font] body{font-family:'DM Sans',Arial,sans-serif}
html[data-font] h1,html[data-font] h2{letter-spacing:-1.6px}
html[data-font="cormorant"] h1{font-size:clamp(45px,4.8vw,74px)}
html[data-font="baskerville"] h1{font-size:clamp(38px,4.1vw,63px)}
html[data-font="baskerville"] h2{font-size:clamp(33px,3.6vw,49px)}
html[data-font="manrope"] h1,html[data-font="manrope"] h2{font-weight:400;line-height:1.13}
html[data-font="manrope"] em{font-style:normal}
@media(max-width:800px){html[data-font] .hero h1{font-size:42px}html[data-font="baskerville"] .hero h1{font-size:37px}}
@media(max-width:560px){html[data-font] .hero h1{font-size:44px}html[data-font="baskerville"] .hero h1{font-size:39px}}