/* ==========================================================================
   MÉRA — Homepage (index.html uniquement)
   Référence : Méra_final_bref/Accueil.png
   Mobile-first ; breakpoints identiques à responsive.css (768 / 1024 / 1440).
   ========================================================================== */

.home {
  --seam: 3px;                                         /* liseré ivoire entre modules */
  --module-pad-x: max(var(--grid-gutter), 2.5vw);
  --module-pad-y: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.home-module {
  margin-top: var(--seam);
}

.home > :last-child {
  margin-bottom: var(--seam);
}


/* Mobile : colonnes étroites (produits, cuisine) / titre court (journal) */
.produits .module-title,
.cuisine .module-title {
  font-size: 1.625rem;
}

.journal-teaser .module-title {
  font-size: 2.5rem;
}


/* ÉDITION 41 / LA MAISON : serif en mobile (maquette), sans condensée noire dès 768px */
.edition__title,
.maison__title {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: var(--weight-regular);
  line-height: 0.95;
  text-transform: uppercase;
}

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--color-ivory);
}

.hero__media {
  display: block;
  aspect-ratio: 390 / 250;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__inner {
  position: relative;
  padding-block: var(--space-6) var(--space-7);
}

.hero__lead {
  margin-bottom: var(--space-5);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.15;
}

.hero__title {
  overflow: hidden;
}

.hero__title-text {
  display: block;
}

.hero__city {
  display: block;
  font-weight: var(--weight-regular);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-ivory);
  text-align: right;
  text-decoration: none;
}

.hero__cta-label {
  font-weight: var(--weight-bold);
}

.hero__cta .btn-round {
  width: clamp(2.75rem, 1.5rem + 2.6vw, 3.75rem);
  height: clamp(2.75rem, 1.5rem + 2.6vw, 3.75rem);
}

/* Mobile : le logo du header porte le nom, le h1 reste pour l'accessibilité.
   Le hero remplit la hauteur visible sous le header : la photographie
   s'allonge, le bloc texte reste en bas. */
@media (max-width: 767.98px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height) - var(--rule-width));
    min-height: calc(100svh - var(--header-height) - var(--rule-width));
  }

  .hero__media {
    flex: 1 0 auto;
  }

  .hero__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- Hero ≥ 768px : composition calée sur Accueil.png -------------------
   Toutes les positions sont exprimées en fraction de --W, la largeur de
   composition (largeur du hero, plafonnée à celle du conteneur). Les valeurs
   sont relevées sur la maquette (cadre 1168 px) puis décalées de 2,8 %W pour
   loger l'accent du É de la police provisoire sous le header.
     hauteur 46,25 %W · cap du titre 6,9 %W · accroche 28,2 %W
     manifeste 37,3 %W · centre du CTA 39,7 %W · photo de 33 % à 100 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero {
    container-type: inline-size;
    overflow: hidden;
    --W: min(100cqw, 105rem);
    --frame-left: calc((100cqw - var(--W)) / 2);
  }

  /* Photo : même cadre que la maquette (déborde sous le header, rognée).
     Son tiers gauche est l'ivoire du site + le fondu du comptoir. */
  .hero__media {
    position: absolute;
    top: calc(var(--W) * -0.0405);
    left: calc(var(--frame-left) + var(--W) * 0.33);
    right: 0;
    bottom: 0;
    aspect-ratio: auto;
  }

  .hero__media img {
    object-position: 0 0;
  }

  /* Hauteur : proportion de la maquette (46,25 %W), jamais moins que la
     hauteur visible sous le header — le hero remplit l'écran au chargement. */
  .hero__inner {
    height: max(var(--W) * 0.4625, 100vh - var(--header-height) - var(--rule-width));
    height: max(var(--W) * 0.4625, 100svh - var(--header-height) - var(--rule-width));
  }

  .hero__inner > * {
    position: absolute;
    margin: 0;
  }

  /* MÉRA : hauteur de capitale 19,2 %W, encre alignée sur la gouttière,
     passe devant la photographie. */
  .hero__title {
    top: calc(var(--W) * 0.069 - 0.265em);
    left: calc(var(--grid-gutter) - 0.069em);
    z-index: 1;
    padding-top: 0.2em;
    font-family: var(--font-sans);
    font-size: calc(var(--W) * 0.269);
    font-stretch: normal;
    line-height: 0.8;
    letter-spacing: -0.019em;
    white-space: nowrap;
  }

  .hero__kicker {
    top: calc(var(--W) * 0.282 - 0.385em);
    left: var(--grid-gutter);
    font-size: max(0.75rem, var(--W) * 0.0155);
    line-height: calc(var(--W) * 0.0206);
    letter-spacing: 0;
  }

  .hero__manifesto {
    top: calc(var(--W) * 0.373 - 0.355em);
    left: var(--grid-gutter);
    grid-template-columns: calc(var(--W) * 0.0548) auto;
    font-size: max(0.6875rem, var(--W) * 0.0118);
    font-weight: var(--weight-medium);
    line-height: 1.38;
  }

  .hero__cta {
    --cta-size: max(2.75rem, var(--W) * 0.0429);
    /* Ancré sur le bas du hero : reste sur le comptoir sombre de la photo
       quelle que soit la hauteur d'écran */
    bottom: calc(var(--W) * 0.055 - var(--cta-size) / 2);
    right: var(--grid-gutter);
    z-index: 1;
    gap: calc(var(--W) * 0.0224);
  }

  .hero__cta-label {
    font-size: max(0.6875rem, var(--W) * 0.0112);
    line-height: calc(var(--W) * 0.0189);
  }

  .hero__cta .btn-round {
    width: var(--cta-size);
    height: var(--cta-size);
  }

  .hero__cta .btn-round svg {
    width: 36%;
    height: 36%;
  }
}

/* ==========================================================================
   02 — Édition actuelle
   ========================================================================== */

.edition {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6);
}

.edition__aside {
  display: contents;
}

/* Mobile : l'assiette déborde à droite, sous le titre */
.edition__media {
  position: absolute;
  right: -10%;
  bottom: var(--space-8);
  width: 72%;
  aspect-ratio: 4 / 3;
  background: none;
}

.edition__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 19rem;
}

.edition__dates {
  margin-top: var(--space-3);
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.edition__link {
  align-self: flex-start;
  margin-top: auto;
}

/* Mobile : lien souligné simple (maquette) */
.edition__link::before {
  display: none;
}

.edition__link .link-arrow__label {
  border-bottom: var(--rule-width) solid currentColor;
}

.edition__link .link-arrow__icon {
  color: currentColor;
}

.edition__pillars {
  list-style: none;
}

@media (min-width: 768px) {
  .edition {
    padding-block: clamp(2.5rem, 3.8vw, 3.75rem);
  }

  .edition__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .edition__aside {
    grid-column: 1 / span 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .edition__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .edition__eyebrow::after {
    content: "";
    flex: 1;
    height: var(--rule-width);
    background-color: currentColor;
  }

  .edition__media {
    position: static;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .edition__note {
    grid-template-columns: 3.5em 1fr;
    margin-top: var(--space-2);
    color: var(--surface-muted);
  }

  .edition__main {
    grid-column: 4 / -1;
    min-height: 0;
  }

  .edition__title {
    padding-top: 0.08em;
    font-family: var(--font-sans-condensed-temp);
    font-size: clamp(3.5rem, 1rem + 5.4vw, 6.5rem);
    font-weight: var(--weight-black);
    font-stretch: condensed;
    line-height: 0.9;
    letter-spacing: -0.01em;
  }

  .edition__dates {
    margin-block: var(--space-2) var(--space-5);
    font-size: clamp(1rem, 0.6rem + 0.8vw, 1.375rem);
  }

  .edition__menu {
    margin-bottom: var(--space-5);
  }

  .edition__menu .menu-item__name,
  .edition__menu .menu-item__price {
    font-size: clamp(0.75rem, 0.55rem + 0.3vw, 0.875rem);
  }

  .edition__link {
    margin-top: 0;
  }

  .edition__link::before {
    display: block;
  }

  .edition__link .link-arrow__label {
    border-bottom: 0;
  }

  .edition__link .link-arrow__icon {
    color: var(--color-cobalt);
  }
}

/* ---- Édition ≥ 1024px : géométrie relevée sur Accueil.png ----------------
     W = cadre desktop de la maquette (x 208 → 790, 582 px), même repère que
     le hero. Bande 41,15 %W ; colonnes : visuel jusqu'à 31,79 %W, carte de
     35,05 à 75,30 %W (prix alignés à droite), colonne droite jusqu'à la
     gouttière. Contenu calé en haut sur les repères de la maquette
     (hauteur de capitale) ; filets de carte au pas de 5,11 %W.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .edition {
    container-type: inline-size;
    --W: min(100cqw, 105rem);
    min-height: calc(var(--W) * 0.4115);
    padding-block: 0;
  }

  .edition__grid {
    grid-template-columns: calc(var(--W) * 0.3179 - var(--grid-gutter)) calc(var(--W) * 0.4025) minmax(0, 1fr);
    column-gap: calc(var(--W) * 0.0326);
    align-items: start;
  }

  .edition__aside {
    grid-column: 1;
    gap: 0;
    padding-top: calc(var(--W) * 0.03244);
  }

  .edition__eyebrow {
    font-size: calc(var(--W) * 0.0117);
    line-height: 1.2;
  }

  .edition__media {
    height: calc(var(--W) * 0.2672);
    margin-top: calc(var(--W) * 0.01362);
    aspect-ratio: auto;
  }

  .edition__note {
    grid-template-columns: calc(var(--W) * 0.0447) 1fr;
    margin-top: calc(var(--W) * 0.01885);
    font-size: max(0.6875rem, var(--W) * 0.0092);
    line-height: calc(var(--W) * 0.0142);
  }

  .edition__main {
    grid-column: 2;
    padding-top: calc(var(--W) * 0.04474);
  }

  .edition__title {
    font-size: calc(var(--W) * 0.0722);
  }

  .edition__dates {
    margin-block: calc(var(--W) * 0.01205) 0;
    font-size: calc(var(--W) * 0.0187);
    line-height: 1.2;
  }

  .edition__menu {
    margin-block: calc(var(--W) * 0.0096) 0;
  }

  .edition__menu .menu-item {
    padding-block: calc(var(--W) * 0.00972) calc(var(--W) * 0.00612);
  }

  .edition__menu .menu-item__name,
  .edition__menu .menu-item__price {
    font-size: calc(var(--W) * 0.0129);
    line-height: 1.2;
  }

  .edition__menu .menu-item__desc {
    margin-top: calc(var(--W) * 0.0035);
    font-size: calc(var(--W) * 0.013);
    line-height: 1.2;
  }

  .edition__link {
    gap: calc(var(--W) * 0.0103);
    margin-top: calc(var(--W) * 0.0072);
    font-size: calc(var(--W) * 0.0108);
  }

  .edition__link::before {
    width: calc(var(--W) * 0.0172);
  }

  .edition__side {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding-top: calc(var(--W) * 0.0302);
  }

  .edition__tags {
    font-size: max(0.6875rem, var(--W) * 0.0105);
    line-height: calc(var(--W) * 0.0172);
    text-align: right;
  }

  /* MER / FEU / SAISON / PARTAGE : filet à 29,64 %W, texte à 84,88 %W */
  .edition__pillars {
    display: grid;
    gap: 0;
    margin: calc(var(--W) * 0.23181) 0 0 calc(var(--W) * 0.0632);
    font-size: max(0.6875rem, var(--W) * 0.0095);
    line-height: calc(var(--W) * 0.0166);
  }

  .edition__pillars::before {
    content: "";
    width: calc(var(--W) * 0.0275);
    height: var(--rule-width);
    margin-bottom: calc(var(--W) * 0.01506);
    background-color: currentColor;
  }
}

/* ==========================================================================
   03 — La maison
   Mobile : module ivoire, texte puis image. Desktop : photo pleine largeur.
   ========================================================================== */

.maison {
  display: flex;
  flex-direction: column;
}

.maison__media {
  order: 2;
  aspect-ratio: 314 / 170;
  margin: 0 var(--grid-gutter) var(--space-5);
}

.maison__inner {
  padding-block: var(--space-6) var(--space-5);
}

.maison__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.maison__text {
  font-size: 1.0625rem;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .maison {
    --maison-split: 40%;
    --surface-bg: var(--color-black);
    --surface-fg: var(--color-ivory);
    --surface-muted: var(--color-muted-on-dark);
    --surface-rule: var(--color-rule-on-dark);
    --surface-rule-soft: var(--color-rule-on-dark-soft);
    --focus-color: var(--color-ivory);
    position: relative;
    display: block;
    min-height: clamp(24rem, 38vw, 44rem);
    background-color: var(--color-black);
    color: var(--color-ivory);
  }

  .maison__media {
    position: absolute;
    inset: 0 0 0 var(--maison-split);
    margin: 0;
    aspect-ratio: auto;
  }

  .maison__media picture {
    display: block;
    height: 100%;
  }

  .maison__media img {
    object-position: 50% 55%;
  }

  .maison__inner {
    position: relative;
    display: flex;
    min-height: inherit;
    padding-block: clamp(2rem, 3.5vw, 3.5rem);
  }

  .maison__content {
    max-width: 17rem;
    gap: var(--space-4);
  }

  .maison__title {
    padding-top: 0.08em;
    font-family: var(--font-sans-condensed-temp);
    font-size: clamp(3.5rem, 1rem + 5vw, 6rem);
    font-weight: var(--weight-black);
    font-stretch: condensed;
    line-height: 0.88;
  }

  .maison__title span {
    display: block;
  }

  .maison__rule {
    margin-top: var(--space-2);
  }

  .maison__kicker {
    font-size: clamp(0.8125rem, 0.5rem + 0.5vw, 1.0625rem);
  }

  .maison__index {
    grid-template-columns: 3.5em 1fr;
    align-self: stretch;
    margin-top: var(--space-3);
    color: var(--surface-muted);
  }

  .maison__btn {
    margin-top: auto;
  }
}

/* ---- La maison ≥ 1024px : bande 37,97 %W ; la photographie démarre sur
     l'axe du visuel de l'édition (31,79 %W). Titre, filet, accroche, repère
     et bouton calés sur les repères de la maquette. */
@media (min-width: 1024px) {
  .maison {
    container-type: inline-size;
    --W: min(100cqw, 105rem);
    --maison-split: calc((100cqw - var(--W)) / 2 + var(--W) * 0.3179);
    min-height: calc(var(--W) * 0.3797);
  }

  .maison__inner {
    padding-block: calc(var(--W) * 0.03599) 0;
  }

  .maison__content {
    width: calc(var(--W) * 0.2622);
    max-width: none;
    gap: 0;
  }

  .maison__title {
    font-size: calc(var(--W) * 0.0696);
    line-height: 0.9657;
  }

  .maison__rule {
    width: calc(var(--W) * 0.0292);
    margin-top: calc(var(--W) * 0.00919);
  }

  .maison__kicker {
    margin-top: calc(var(--W) * 0.01774);
    font-size: calc(var(--W) * 0.0135);
    line-height: calc(var(--W) * 0.0137);
  }

  .maison__index {
    grid-template-columns: calc(var(--W) * 0.0533) 1fr;
    margin-top: calc(var(--W) * 0.0276);
    font-size: calc(var(--W) * 0.0104);
    line-height: calc(var(--W) * 0.0146);
  }

  .maison__btn {
    justify-content: center;
    width: calc(var(--W) * 0.2491);
    height: max(2.75rem, var(--W) * 0.0378);
    min-height: 0;
    margin-top: calc(var(--W) * 0.02356);
    padding-block: 0;
    font-size: calc(var(--W) * 0.0114);
  }
}

/* ==========================================================================
   04 + 05 — Produit / Cuisine
   ========================================================================== */

.home-duo {
  display: grid;
  gap: var(--seam);
}

.produits,
.cuisine {
  display: grid;
  min-height: 13.5rem;
}

.produits {
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  background-color: var(--color-ivory);
}

.cuisine {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.produits__body,
.cuisine__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-6) var(--grid-gutter);
}

.cuisine__media img {
  object-position: 30% 50%;
}

/* Point focal des coquillages : légèrement au-dessus du centre */
.produits__media img {
  object-position: 50% 42%;
}

@media (min-width: 768px) {
  .produits,
  .cuisine {
    min-height: 20rem;
  }

  .produits {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .cuisine {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .produits__body,
  .cuisine__body {
    padding: var(--module-pad-y) var(--module-pad-x);
  }

  .module-title,
  .produits .module-title,
  .cuisine .module-title,
  .journal-teaser .module-title {
    font-size: clamp(1.75rem, 0.9rem + 2vw, 2.25rem);
  }

  .cuisine__media img {
    object-position: 50% 50%;
  }
}

/* ---- Produits / Cuisine ≥ 1024px : géométrie relevée sur Accueil.png -----
     Bande 24,14 %W. Produits : texte 0 → 26,89 %W, photo jusqu'à 46,30 %W ;
     Cuisine : texte jusqu'à 70,19 %W, photo jusqu'au bord. Titres, textes et
     liens des deux modules sur les mêmes lignes (cap 4,90 / 14,00 / 20,85 %W).
     Les photos ne pilotent plus la hauteur de la bande.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .home-duo {
    container-type: inline-size;
    --W: min(100cqw, 105rem);
    gap: 0;
  }

  .home-duo--produits {
    grid-template-columns: calc(var(--W) * 0.463) minmax(0, 1fr);
  }

  .home-duo--produits > * {
    min-height: calc(var(--W) * 0.2414);
  }

  /* Titres serif des modules : un seul corps pour les quatre modules */
  .module-title,
  .produits .module-title,
  .cuisine .module-title,
  .journal-teaser .module-title {
    font-size: calc(var(--W) * 0.0235);
  }

  .produits {
    grid-template-columns: calc(var(--W) * 0.2689) minmax(0, 1fr);
  }

  .cuisine {
    grid-template-columns: calc(var(--W) * 0.2389 - var(--seam)) minmax(0, 1fr);
    border-left: var(--seam) solid var(--color-ivory);
  }

  .produits__body,
  .cuisine__body {
    justify-content: flex-start;
    gap: 0;
  }

  .produits__body {
    padding: calc(var(--W) * 0.01957) calc(var(--W) * 0.02) 0 var(--grid-gutter);
  }

  .cuisine__body {
    padding: calc(var(--W) * 0.01957) calc(var(--W) * 0.015) 0 calc(var(--W) * 0.0396);
  }

  .produits .module-title,
  .cuisine .module-title {
    line-height: calc(var(--W) * 0.037);
  }

  .produits .module-text,
  .cuisine .module-text {
    margin-top: calc(var(--W) * 0.04292);
    font-size: calc(var(--W) * 0.012);
    line-height: calc(var(--W) * 0.0155);
  }

  .produits .module-text {
    max-width: calc(var(--W) * 0.212);
  }

  .cuisine .module-text {
    max-width: calc(var(--W) * 0.17);
  }

  .produits .link-arrow,
  .cuisine .link-arrow {
    margin-top: calc(var(--W) * 0.01501);
    font-size: calc(var(--W) * 0.0102);
  }

  .produits__media,
  .cuisine__media {
    position: relative;
  }

  .cuisine__media picture {
    position: absolute;
    inset: 0;
  }

  .produits__media img,
  .cuisine__media img {
    position: absolute;
    inset: 0;
    max-width: none;
    object-position: 50% 50%;
  }

  .produits__media img {
    object-position: 50% 42%;
  }
}

/* ==========================================================================
   06 + 07 — Réservation / Journal
   ========================================================================== */

.resa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-7) var(--grid-gutter);
}

.resa__btn {
  width: min(100%, 17rem);
  margin-top: var(--space-3);
}

.journal-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-5);
  min-height: 13rem;
  padding: var(--space-5) var(--grid-gutter);
}

.journal-teaser__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.journal-teaser__link {
  border-top: var(--rule-width) solid var(--surface-rule-soft);
}

.journal-teaser__media {
  align-self: center;
  aspect-ratio: 1 / 1;
}

.journal-teaser__article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.journal-teaser__article-title {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 0.8rem + 0.6vw, 1.5rem);
  line-height: 1.15;
}

@media (max-width: 767.98px) {
  /* Le titre doit rester dans sa colonne, sans empiéter sur la photo. */
  .journal-teaser .module-title {
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
}

@media (min-width: 768px) {
  .resa {
    padding: var(--module-pad-y) var(--module-pad-x);
  }

  .journal-teaser {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: var(--module-pad-y) var(--module-pad-x);
  }

  .journal-teaser__intro {
    justify-content: center;
    padding-top: 0;
  }

  .journal-teaser__link {
    border-top: 0;
  }

  .journal-teaser__media {
    aspect-ratio: 4 / 3;
  }
}

/* ---- Réserver / Journal ≥ 1024px : bande 15,89 %W ; réservation 0 → 38,49 %W,
     journal : texte, visuel 66,5 → 81,3 %W, article. Titres des deux modules
     sur la même ligne (cap 2,84 %W), textes à 6,6 / 6,8 %W.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .home-duo--resa {
    grid-template-columns: calc(var(--W) * 0.3849) minmax(0, 1fr);
  }

  .home-duo--resa > * {
    min-height: calc(var(--W) * 0.1589);
  }

  .resa {
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--W) * 0.02503) calc(var(--W) * 0.02) 0 var(--grid-gutter);
  }

  .resa .module-text {
    max-width: calc(var(--W) * 0.29);
    margin-top: calc(var(--W) * 0.01534);
    font-size: calc(var(--W) * 0.0149);
    line-height: calc(var(--W) * 0.0171);
  }

  .resa__btn {
    width: calc(var(--W) * 0.1443);
    min-width: 0;
    height: max(2.75rem, var(--W) * 0.0378);
    min-height: 0;
    margin-top: calc(var(--W) * 0.0071);
    padding-block: 0;
    font-size: calc(var(--W) * 0.0104);
  }

  .journal-teaser {
    grid-template-columns: calc(var(--W) * 0.2801) calc(var(--W) * 0.1477) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    padding: 0 var(--grid-gutter) 0 0;
  }

  .journal-teaser__intro {
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--W) * 0.02503) 0 0 calc(var(--W) * 0.0275);
  }

  .journal-teaser .module-text {
    max-width: calc(var(--W) * 0.22);
    margin-top: calc(var(--W) * 0.01717);
    font-size: calc(var(--W) * 0.013);
    line-height: calc(var(--W) * 0.0154);
  }

  .journal-teaser__link {
    margin-top: calc(var(--W) * 0.01528);
    font-size: calc(var(--W) * 0.0102);
  }

  .journal-teaser__media {
    align-self: start;
    height: calc(var(--W) * 0.1023);
    margin-top: calc(var(--W) * 0.0326);
    aspect-ratio: auto;
  }

  .journal-teaser__article {
    gap: 0;
    padding: calc(var(--W) * 0.04129) 0 0 calc(var(--W) * 0.0292);
  }

  .journal-teaser__article .t-label {
    font-size: max(0.6875rem, var(--W) * 0.0084);
  }

  .journal-teaser__article-title {
    margin-top: calc(var(--W) * 0.0086);
    font-size: calc(var(--W) * 0.0158);
  }

  .journal-teaser__article .link-arrow {
    margin-top: calc(var(--W) * 0.0036);
    font-size: calc(var(--W) * 0.0133);
  }
}