renatoam

/* Caso não tenha todos os formatos da sua font (os que te interessam), pode converter online */
@font-face {
/*   Controla o comportamento de exibição de uma font personalizada (font-face) */
  font-display: optional;
/*   Nome da font */
  font-family: 'Soleto';
/*   Verifica se a font já existe localmente, evitando download desnecessário da font (se existir localmente) */
  src: local('Soleto'),
/*   Formato mais moderno e mais leve; se o browser for compatível, os demais são ignorados */
  url('arquivos/soleto.woff2') format('woff2'), /* Modern Browsers */

renatoam

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */

renatoam

/* Utilities */

/* Automatic Grids */

.auto-grid {
  /* ch is the size of the "0" character of a font; it's important to some UX good practices like limiting text containers in 60 character, for example. */
  --min: 60ch;
  --gap: 1rem;

  display: grid;