/* =========================================================================
   HORIZONGUIDE — TEMPLATES
   Styles communs pour : article, page pilier, comparatif, destination
   ========================================================================= */


/* =========================================================================
   [1] ARTICLE STANDARD
   Structure : hero + breadcrumb + titre + méta + chapeau + corps + partage + auteur
   ========================================================================= */

.hg-article {
  background: var(--hg-cream);
  padding-bottom: var(--hg-space-10);
}

.hg-article__hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  max-height: 800px;
  overflow: hidden;
  background: var(--hg-ink);
}

.hg-article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.hg-article__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 26, 24, 0.2) 0%,
    rgba(28, 26, 24, 0) 40%,
    rgba(28, 26, 24, 0.6) 100%);
}

/* Overlay titre au-dessus du hero (optionnel) */
.hg-article__hero-overlay {
  position: absolute;
  bottom: var(--hg-space-8);
  left: 0; right: 0;
  padding-inline: var(--hg-gutter);
  z-index: 2;
  color: var(--hg-cream);
  max-width: var(--hg-container);
  margin-inline: auto;
}

/* Breadcrumb */
.hg-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--hg-space-2);
  font-size: var(--hg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-ink-60);
  margin-bottom: var(--hg-space-4);
  padding: var(--hg-space-6) 0;
  flex-wrap: wrap;
}
.hg-breadcrumb a {
  color: var(--hg-ink-60);
  border-bottom: 1px solid transparent;
  transition: all var(--hg-duration-fast) var(--hg-ease-out);
}
.hg-breadcrumb a:hover {
  color: var(--hg-rust);
  border-color: var(--hg-rust);
}
.hg-breadcrumb__sep {
  color: var(--hg-ink-40);
  font-weight: 300;
}
.hg-breadcrumb__current {
  color: var(--hg-ink);
  font-weight: 500;
}

/* Header article */
.hg-article__header {
  max-width: var(--hg-container-narrow);
  margin-inline: auto;
  padding: var(--hg-space-8) var(--hg-gutter) var(--hg-space-7);
  text-align: left;
}

.hg-article__category {
  display: inline-block;
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-rust);
  margin-bottom: var(--hg-space-4);
  padding-bottom: var(--hg-space-2);
  border-bottom: 1px solid var(--hg-rust);
}

.hg-article__title {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-4xl);
  font-weight: 500;
  line-height: var(--hg-lh-tight);
  letter-spacing: var(--hg-ls-tight);
  color: var(--hg-ink);
  margin-bottom: var(--hg-space-5);
}

.hg-article__deck {
  font-family: var(--hg-font-display);
  font-style: italic;
  font-size: var(--hg-text-xl);
  line-height: var(--hg-lh-normal);
  color: var(--hg-ink-80);
  margin-bottom: var(--hg-space-6);
}

.hg-post-meta {
  display: flex;
  gap: var(--hg-space-4);
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-ink-60);
  padding-top: var(--hg-space-4);
  border-top: 1px solid var(--hg-ink-10);
  flex-wrap: wrap;
}

.hg-post-meta > * {
  position: relative;
}
.hg-post-meta > *:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: calc(var(--hg-space-4) * -0.5 - 3px);
  color: var(--hg-ink-40);
}

/* Corps de l'article */
.hg-article__body {
  max-width: var(--hg-container-narrow);
  margin-inline: auto;
  padding-inline: var(--hg-gutter);
  font-size: var(--hg-text-lg);
  line-height: var(--hg-lh-relaxed);
  color: var(--hg-ink);
}

.hg-article__body > * + * { margin-top: var(--hg-space-5); }

.hg-article__body h2 {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-3xl);
  font-weight: 500;
  margin-top: var(--hg-space-9);
  margin-bottom: var(--hg-space-4);
  letter-spacing: var(--hg-ls-tight);
}

.hg-article__body h3 {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-2xl);
  font-weight: 500;
  margin-top: var(--hg-space-7);
  margin-bottom: var(--hg-space-3);
}

/* Drop cap sur le premier paragraphe */
.hg-article__body > p:first-of-type::first-letter {
  font-family: var(--hg-font-display);
  font-size: 5rem;
  float: left;
  line-height: 0.9;
  margin-right: var(--hg-space-3);
  margin-top: 0.5rem;
  color: var(--hg-rust);
  font-weight: 500;
}

.hg-article__body blockquote {
  border-left: 2px solid var(--hg-rust);
  padding: var(--hg-space-4) 0 var(--hg-space-4) var(--hg-space-6);
  margin: var(--hg-space-8) 0;
  font-family: var(--hg-font-display);
  font-style: italic;
  font-size: var(--hg-text-2xl);
  line-height: var(--hg-lh-snug);
  color: var(--hg-ink-80);
}

.hg-article__body blockquote cite {
  display: block;
  font-family: var(--hg-font-body);
  font-style: normal;
  font-size: var(--hg-text-sm);
  letter-spacing: var(--hg-ls-wide);
  text-transform: uppercase;
  color: var(--hg-ink-60);
  margin-top: var(--hg-space-3);
}

.hg-article__body figure {
  margin: var(--hg-space-8) 0;
}
.hg-article__body figure img { width: 100%; height: auto; }
.hg-article__body figcaption {
  font-size: var(--hg-text-sm);
  color: var(--hg-ink-60);
  margin-top: var(--hg-space-3);
  font-style: italic;
}

/* Encart info (tips, warning) */
.hg-callout {
  background: var(--hg-cream-dark);
  border-left: 3px solid var(--hg-gold);
  padding: var(--hg-space-5) var(--hg-space-6);
  margin: var(--hg-space-7) 0;
}
.hg-callout__label {
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-gold-dark);
  margin-bottom: var(--hg-space-2);
}
.hg-callout p:last-child { margin-bottom: 0; }

/* Boîte auteur */
.hg-article__author {
  max-width: var(--hg-container-narrow);
  margin: var(--hg-space-9) auto 0;
  padding: var(--hg-space-7) var(--hg-gutter);
  border-top: 1px solid var(--hg-ink-20);
  display: flex;
  gap: var(--hg-space-5);
  align-items: flex-start;
}
.hg-article__author-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.hg-article__author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hg-article__author-name {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-xl);
  font-weight: 500;
  margin-bottom: var(--hg-space-2);
}
.hg-article__author-role {
  font-size: var(--hg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-rust);
  margin-bottom: var(--hg-space-3);
}
.hg-article__author-bio {
  font-size: var(--hg-text-sm);
  color: var(--hg-ink-80);
  line-height: var(--hg-lh-normal);
}

/* Articles liés */
.hg-related {
  max-width: var(--hg-container);
  margin: var(--hg-space-11) auto 0;
  padding-inline: var(--hg-gutter);
}
.hg-related__title {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-3xl);
  font-style: italic;
  font-weight: 400;
  color: var(--hg-rust);
  margin-bottom: var(--hg-space-7);
  text-align: center;
}
.hg-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hg-space-6);
}


/* =========================================================================
   [2] PAGE PILIER (cluster)
   Sommaire + intro longue + sous-sections + grille d'articles
   ========================================================================= */

.hg-pilier { background: var(--hg-cream); padding-bottom: var(--hg-space-11); }

.hg-pilier__hero {
  position: relative;
  background: var(--hg-ink);
  color: var(--hg-cream);
  padding: var(--hg-space-12) var(--hg-gutter) var(--hg-space-10);
  overflow: hidden;
}

.hg-pilier__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/pilier-pattern.svg') center / 240px repeat;
  opacity: 0.06;
  pointer-events: none;
}

.hg-pilier__hero-inner {
  max-width: var(--hg-container-narrow);
  margin-inline: auto;
  position: relative;
  text-align: center;
}

.hg-pilier__eyebrow {
  display: inline-block;
  font-size: var(--hg-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-gold);
  margin-bottom: var(--hg-space-5);
  padding: var(--hg-space-2) var(--hg-space-4);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--hg-radius-full);
}

.hg-pilier__title {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-5xl);
  font-weight: 400;
  line-height: var(--hg-lh-tight);
  letter-spacing: var(--hg-ls-tighter);
  color: var(--hg-cream);
  margin-bottom: var(--hg-space-6);
}
.hg-pilier__title em {
  font-style: italic;
  color: var(--hg-gold);
}

.hg-pilier__intro {
  font-family: var(--hg-font-display);
  font-style: italic;
  font-size: var(--hg-text-xl);
  line-height: var(--hg-lh-normal);
  color: rgba(247, 242, 235, 0.85);
  max-width: 640px;
  margin-inline: auto;
}

/* Sommaire (TOC) sticky à gauche */
.hg-pilier__content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--hg-space-9);
  max-width: var(--hg-container);
  margin-inline: auto;
  padding: var(--hg-space-10) var(--hg-gutter) 0;
}

.hg-toc {
  position: sticky;
  top: calc(80px + var(--hg-space-5));
  align-self: start;
  font-size: var(--hg-text-sm);
}

.hg-toc__title {
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-rust);
  margin-bottom: var(--hg-space-4);
  padding-bottom: var(--hg-space-3);
  border-bottom: 1px solid var(--hg-ink-20);
}

.hg-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hg-space-3);
  counter-reset: toc;
}

.hg-toc__item { counter-increment: toc; }

.hg-toc__link {
  display: flex;
  gap: var(--hg-space-3);
  color: var(--hg-ink-80);
  line-height: var(--hg-lh-normal);
  transition: all var(--hg-duration-fast) var(--hg-ease-out);
}

.hg-toc__link::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  color: var(--hg-ink-40);
  font-weight: 500;
  flex-shrink: 0;
  padding-top: 2px;
}

.hg-toc__link:hover,
.hg-toc__link.is-active {
  color: var(--hg-rust);
}
.hg-toc__link.is-active::before { color: var(--hg-rust); }

.hg-pilier__body {
  max-width: 720px;
  font-size: var(--hg-text-lg);
  line-height: var(--hg-lh-relaxed);
}

.hg-pilier__section {
  padding-bottom: var(--hg-space-10);
  scroll-margin-top: 100px;
}

.hg-pilier__section + .hg-pilier__section {
  padding-top: var(--hg-space-10);
  border-top: 1px solid var(--hg-ink-10);
}

.hg-pilier__section h2 {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-3xl);
  font-weight: 500;
  margin-bottom: var(--hg-space-5);
  letter-spacing: var(--hg-ls-tight);
}

.hg-pilier__section-number {
  display: inline-block;
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  font-weight: 500;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-gold-dark);
  margin-bottom: var(--hg-space-3);
}

/* Grille articles du cluster */
.hg-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hg-space-5);
  margin-top: var(--hg-space-6);
}


/* =========================================================================
   [3] PAGE COMPARATIF (tableau assurances)
   ========================================================================= */

.hg-comparatif { padding: var(--hg-space-9) 0 var(--hg-space-11); }

.hg-comparatif__header {
  max-width: var(--hg-container-narrow);
  margin-inline: auto;
  padding-inline: var(--hg-gutter);
  text-align: center;
  margin-bottom: var(--hg-space-8);
}

/* Tableau comparatif — design éditorial pas commercial */
.hg-compare {
  max-width: var(--hg-container);
  margin-inline: auto;
  padding-inline: var(--hg-gutter);
  overflow-x: auto;
}

.hg-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hg-font-body);
  background: var(--hg-white);
  min-width: 900px;
}

.hg-compare-table thead th {
  padding: var(--hg-space-6) var(--hg-space-4);
  text-align: center;
  border-bottom: 2px solid var(--hg-ink);
  background: var(--hg-white);
  vertical-align: bottom;
}

.hg-compare-table thead th:first-child {
  background: var(--hg-cream);
  text-align: left;
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-ink-60);
}

.hg-compare-table__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hg-space-3);
}

.hg-compare-table__logo {
  width: 100px;
  height: 60px;
  object-fit: contain;
}

.hg-compare-table__name {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-lg);
  font-weight: 500;
  color: var(--hg-ink);
}

.hg-compare-table__score {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-2);
  font-size: var(--hg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-wide);
  color: var(--hg-gold-dark);
  font-weight: 600;
}

.hg-compare-table th[scope="row"] {
  text-align: left;
  padding: var(--hg-space-4) var(--hg-space-4);
  background: var(--hg-cream);
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-sm);
  font-weight: 500;
  color: var(--hg-ink);
  border-bottom: 1px solid var(--hg-ink-10);
  width: 25%;
}

.hg-compare-table td {
  padding: var(--hg-space-4);
  text-align: center;
  font-size: var(--hg-text-sm);
  border-bottom: 1px solid var(--hg-ink-10);
  color: var(--hg-ink-80);
  vertical-align: middle;
}

.hg-compare-table tr:hover td,
.hg-compare-table tr:hover th[scope="row"] {
  background: var(--hg-cream-dark);
}

/* Indicateurs oui/non */
.hg-compare-check,
.hg-compare-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 13px;
}
.hg-compare-check { background: var(--hg-rust); color: var(--hg-cream); }
.hg-compare-cross { background: var(--hg-ink-10); color: var(--hg-ink-40); }

.hg-compare-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--hg-gold);
  font-size: var(--hg-text-base);
}

.hg-compare-cta-row td {
  padding: var(--hg-space-5) var(--hg-space-4);
  background: var(--hg-cream);
}

.hg-compare-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--hg-space-3) var(--hg-space-5);
  background: var(--hg-rust);
  color: var(--hg-cream);
  font-size: var(--hg-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-wide);
  text-decoration: none;
  transition: background var(--hg-duration-fast) var(--hg-ease-out);
}
.hg-compare-cta:hover { background: var(--hg-rust-dark); color: var(--hg-cream); }


/* =========================================================================
   [4] PAGE DESTINATION (avec carte + aires liées)
   ========================================================================= */

.hg-destination { background: var(--hg-cream); }

.hg-destination__hero {
  position: relative;
  height: 80vh;
  min-height: 560px;
  overflow: hidden;
}

.hg-destination__hero img {
  width: 100%; height: 100%; object-fit: cover;
}

.hg-destination__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 26, 24, 0.3) 0%,
    rgba(28, 26, 24, 0) 30%,
    rgba(28, 26, 24, 0.7) 100%);
}

.hg-destination__hero-overlay {
  position: absolute;
  bottom: var(--hg-space-9);
  left: 0; right: 0;
  padding-inline: var(--hg-gutter);
  color: var(--hg-cream);
  max-width: var(--hg-container);
  margin-inline: auto;
  z-index: 2;
}

.hg-destination__coords {
  display: inline-block;
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  letter-spacing: var(--hg-ls-widest);
  text-transform: uppercase;
  color: var(--hg-gold);
  margin-bottom: var(--hg-space-4);
}

.hg-destination__title {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-hero);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--hg-ls-tighter);
  color: var(--hg-cream);
  margin-bottom: var(--hg-space-4);
}
.hg-destination__title em {
  font-style: italic;
  font-weight: 400;
}

.hg-destination__subtitle {
  font-family: var(--hg-font-display);
  font-style: italic;
  font-size: var(--hg-text-2xl);
  color: rgba(247, 242, 235, 0.9);
  max-width: 640px;
}

/* Stats clés */
.hg-destination__stats {
  max-width: var(--hg-container);
  margin: calc(-1 * var(--hg-space-8)) auto var(--hg-space-9);
  padding: 0 var(--hg-gutter);
  position: relative;
  z-index: 3;
}

.hg-destination__stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--hg-white);
  padding: var(--hg-space-6);
  box-shadow: var(--hg-shadow-lg);
}

.hg-stat {
  padding: var(--hg-space-3) var(--hg-space-5);
  border-right: 1px solid var(--hg-ink-10);
}
.hg-stat:last-child { border-right: 0; }

.hg-stat__label {
  font-size: var(--hg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-ink-60);
  margin-bottom: var(--hg-space-2);
}
.hg-stat__value {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-2xl);
  font-weight: 500;
  color: var(--hg-ink);
  line-height: 1;
}
.hg-stat__value em {
  font-style: italic;
  color: var(--hg-rust);
}

/* Bloc carte + infos */
.hg-destination__map-section {
  max-width: var(--hg-container);
  margin: 0 auto var(--hg-space-10);
  padding-inline: var(--hg-gutter);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--hg-space-8);
  align-items: start;
}

.hg-destination__map {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--hg-cream-dark);
  border: 1px solid var(--hg-ink-10);
  overflow: hidden;
}

.hg-destination__map iframe,
.hg-destination__map .leaflet-container,
.hg-destination__map #hg-map {
  width: 100%;
  height: 100%;
}

/* Aires liées */
.hg-destination__aires {
  background: var(--hg-cream-dark);
  padding: var(--hg-space-9) 0;
}

.hg-destination__aires-inner {
  max-width: var(--hg-container);
  margin-inline: auto;
  padding-inline: var(--hg-gutter);
}

.hg-destination__aires-title {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-3xl);
  font-weight: 500;
  margin-bottom: var(--hg-space-7);
  text-align: center;
}
.hg-destination__aires-title em {
  font-style: italic;
  color: var(--hg-rust);
}

.hg-aires-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hg-space-5);
}

.hg-aire-card {
  background: var(--hg-white);
  padding: var(--hg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hg-space-3);
  transition: transform var(--hg-duration-normal) var(--hg-ease-out);
}
.hg-aire-card:hover { transform: translateY(-4px); box-shadow: var(--hg-shadow-md); }

.hg-aire-card__type {
  font-size: var(--hg-text-xs);
  letter-spacing: var(--hg-ls-widest);
  text-transform: uppercase;
  color: var(--hg-rust);
}

.hg-aire-card__name {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-xl);
  font-weight: 500;
  line-height: var(--hg-lh-snug);
}

.hg-aire-card__address {
  font-size: var(--hg-text-sm);
  color: var(--hg-ink-60);
}

.hg-aire-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hg-space-2);
  margin-top: var(--hg-space-3);
  padding-top: var(--hg-space-3);
  border-top: 1px solid var(--hg-ink-10);
}

.hg-aire-card__feature {
  font-size: var(--hg-text-xs);
  padding: var(--hg-space-1) var(--hg-space-2);
  background: var(--hg-cream);
  color: var(--hg-ink-80);
  border-radius: var(--hg-radius-sm);
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
  .hg-pilier__content {
    grid-template-columns: 1fr;
    gap: var(--hg-space-6);
  }
  .hg-toc {
    position: static;
    padding: var(--hg-space-5);
    background: var(--hg-white);
    border: 1px solid var(--hg-ink-10);
  }
  .hg-destination__map-section {
    grid-template-columns: 1fr;
  }
  .hg-related__grid,
  .hg-aires-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hg-destination__stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .hg-stat { border-right: 0; border-bottom: 1px solid var(--hg-ink-10); }
  .hg-stat:nth-child(2) { border-right: 0; }
  .hg-stat:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 640px) {
  .hg-article__title { font-size: var(--hg-text-3xl); }
  .hg-pilier__title { font-size: var(--hg-text-4xl); }
  .hg-destination__title { font-size: var(--hg-text-5xl); }
  .hg-related__grid,
  .hg-aires-grid,
  .hg-cluster-grid {
    grid-template-columns: 1fr;
  }
  .hg-destination__stats-inner {
    grid-template-columns: 1fr;
  }
  .hg-stat { border-right: 0; border-bottom: 1px solid var(--hg-ink-10); padding: var(--hg-space-3); }
  .hg-stat:last-child { border-bottom: 0; }
  .hg-article__body > p:first-of-type::first-letter {
    font-size: 3.5rem;
  }
}