/* services.css
   Relevé sur la source (1440px, #services, top 3025 -> hauteur 1058) :
   - Fond --c-orange, padding de section 60px 40px 145px (mesuré) : le côté (40px)
     reste fixe à 1024px aussi (comme studio.css/statistics.css, la source NE
     bascule PAS sur --gutter=32px à ce palier) — valeur donc fixée en dur ici.
     Bascule seulement à 809px : 30px 20px 70px (là, 20px == --gutter mobile).
   - Titre <h1> sur la source, redevient <h2> ici (un seul <h1> par page, déjà
     porté par le logo du hero — même correction que statistics.css/studio.css).
     Climate Crisis 68px/68px (desktop) / 52px/52px (tablette, largeur 600px,
     passe à 3 lignes) / 42px/42px (mobile, centré). Largeur 950px desktop.
     Décalage à gauche (205px desktop / 172px tablette / 0 + centré mobile)
     mesuré directement (le pictogramme "Services" chevauche le début du titre).
   - Pastille "Services" : VRAI starburst à 32 pointes (.starburst, calibré en
     tâche 3), couleur --c-purple (fill calculé exactement égal au token, comme
     la pastille "parcours" de statistics.css). Contrairement à "parcours"
     (aria-hidden sur la source), le texte "Services" est un contenu réel et
     accessible sur la source (présent dans son innerText) : pas d'aria-hidden
     ici. Position mesurée précisément (piège : un premier relevé du SVG seul,
     avant l'ouverture d'une carte, avait donné une position fausse —
     remesuré via le conteneur de la pastille et le titre en un seul appel,
     pour éviter tout décalage entre deux relevés) : badge top 0 desktop /
     -59px tablette / -36px mobile, relatifs au coin haut-gauche de la zone de
     contenu de la section (.services__intro épouse cette zone,
     position:relative). Le titre n'est PAS flush au sommet de cette zone :
     margin-top 64px desktop / 0 tablette / 79px mobile — valeurs mesurées
     indépendamment à chaque palier (pas une formule dérivée, la source varie
     ces décalages par breakpoint comme le gutter de padding). `left` en
     revanche AJUSTÉ au-delà de la valeur mesurée (145px desktop / 99px
     tablette) : au strict relevé, le centre lisible de la pastille ("Services")
     tombait en plein dans la boîte englobante du titre et devenait illisible,
     noyé sous les lettres du h2 qui transparaissent dans les intervalles du
     starburst — la source évite ce chevauchement grâce à un delta d'encre de
     police (fonte Climate Crisis) que `getBoundingClientRect` ne capture pas.
     Recalé visuellement à 100px desktop / 54px tablette, jusqu'à ce que
     "Services" redevienne lisible sans changer la taille ni l'esprit du
     chevauchement (le bord de la pastille continue de mordre sur le "Q").
   - Trois cartes d'accordéon, coins arrondis 40px (valeur brute, comme le
     radius 40px déjà posé en dur sur .statistics__block — non couvert par un
     token --r-*). Fonds relevés directement sur les DIV de la source (pas une
     supposition) : Branding = --c-sand, Web Design = --c-mint, Digital
     Marketing = --c-lavender — les trois couleurs mesurées correspondent
     exactement (rendu identique au pixel) à des tokens déjà existants,
     aucun ajout requis.
     Padding carte 30px 10px 10px ouverte (desktop/tablette) / 20px 10px 10px
     mobile — padding-bottom fermée augmenté par compensation, voir commentaire
     détaillé sur .services__item plus bas.
   - Aucune entrée n'est dépliée par défaut sur la source (vérifié : les trois
     cartes rendent la même hauteur fermée, 211px, au chargement) — confirmé
     aussi par bascule : cliquer une carte referme l'autre (un seul panneau
     ouvert par groupe, comme le contrat accordion.js).
   - Carte fermée à 390px : hauteur mesurée sur la source PAR CARTE (elle
     n'est PAS fixe entre les cartes — elle dépend du nombre de lignes du
     titre/sous-titre) : Branding 210px, Web Design 206px, Digital Marketing
     180px. Décomposée sur la source (relevé DOM complet, `overflow:hidden`
     sur `.framer-SvkGB…`, padding calculé `20px 10px`, contenant lui-même un
     bloc à padding `10px` autour du titre+sous-titre) en une formule stable :
     hauteur = 70 (chrome fixe : 20 haut-carte + 10 haut-bloc + 10 gap
     titre/sous-titre + 10 bas-bloc + 20 bas-carte) + hauteur titre + hauteur
     sous-titre. Vérifiée exacte sur les trois cartes (70+90+50=210,
     70+60+76=206, 70+60+50=180). Reproduite ici en gardant la structure à
     deux niveaux (`.services__item` padding-top + `.accordion__trigger`
     padding-bottom), voir détail sur `.services__item` et le `gap` du
     déclencheur plus bas.
   - Filet horizontal sous le sous-titre : élément réel identifié en relecture
     (round de fix, task-8-brief régénéré) : `.framer-gf6izd::after` sur la
     source, positionné `inset: 0` par-dessus toute la ligne du déclencheur,
     `border-bottom` 1px en pleine opacité dans une teinte prune très sombre —
     valeur qui résout exactement à `--c-ink`. La teinte plus claire et
     désaturée obtenue en tâche 8 initiale par échantillonnage de pixel
     n'était que de l'anti-aliasing sur cette ligne de 1px, pas la vraie
     couleur. Corrigé en `border-bottom: 1px solid var(--c-ink)` (couleur
     pleine, aucun `color-mix`, aucune couleur brute).
   - Icône "+" : un SEUL SVG (Phosphor "Plus", chemin relevé sur la source),
     tourné de 45deg en CSS à l'ouverture pour former un "×" — c'est exactement
     ce que fait la source (même path SVG dans les deux états, confirmé par
     comparaison des deux `outerHTML`), pas deux icônes distinctes.
   - Étiquettes : liste verticale de pastilles (colonne 250px, gap 4px), fond
     --c-cream, radius 10px, padding 4px 10px, Poppins 500 15px/22.5px,
     ls -0.45px. Gap colonne étiquettes / texte : 30px.
   - MANQUE DU BRIEF (A0) : chaque carte dépliée révèle sur la source un
     carrousel de photos de projets (4 images réelles par carte + 2 flèches de
     navigation, `assets/README.md` — qui fait foi — documente explicitement
     11 fichiers + les 2 chevrons comme appartenant à `services`, notés
     "slider"). Totalement absent du texte du brief de tâche 8. Reconstruit ici
     avec les vraies images de la source (voir markup), plus un nouveau module
     `js/modules/gallery.js` (déviation du périmètre de fichiers annoncé,
     signalée dans le rapport) : la source boucle une piste DOM dupliquée à
     l'infini (mécanisme "Slideshow" propre à Framer) — `Previous`/`Next` ne
     sont JAMAIS désactivés (`disabled: false` à toute position, vérifié sur
     la source) et `Previous` sur la première image boucle directement sur la
     dernière. Round de fix (task-8-brief régénéré) : la première version de
     ce module désactivait les flèches en butée (`opacity:.35`), lisible comme
     cassé plutôt que borné — corrigé en `gallery.js` par un vrai bouclage
     (modulo + clone transitoire d'un seul slide à chaque franchissement de
     bord, retiré juste après, pour éviter le blanc/saut visuel d'un modulo
     naïf sans dupliquer toute la piste). Plus de `:disabled` ici : les deux
     boutons restent identiques et cliquables/focusables à toute position.
     Tuiles 495×375, radius 40px chacune, gap 10px,
     object-fit: cover (proportions natives différentes selon l'image,
     control="cover" vérifié sur la source). Flèches : cercle 40px,
     fond `color-mix(in srgb, var(--c-ink) 20%, transparent)` (mesuré : fond
     bouton noir à 20% d'opacité sur la source). */

/* Le bord festonné manquait : c'est la seule section du site qui ne le portait
   pas, alors que la source en pose un ici comme partout ailleurs — bandeau de
   76px de haut remontant de 61px au-dessus du haut de section (2964 pour une
   section à 3025), soit exactement la géométrie de la primitive `.scallop-top`
   déjà employée par les huit autres sections. Les bosses sont de la teinte de
   CETTE section, peinte par-dessus le motif à pois de #statistics. */
.services {
  position: relative;
  --scallop-color: var(--c-orange);
  background: var(--c-orange);
  padding: 60px 40px 145px;
}

/* ---------- Intro (pastille + titre) ---------- */
.services__intro {
  position: relative;
  /* flow-root : établit un BFC pour empêcher le margin-top du titre de
     "remonter" (collapse) à travers .services__intro et déplacer tout le
     bloc au lieu de créer l'espace voulu entre la pastille et le titre —
     constaté visuellement (le décalage n'avait aucun effet local tant que
     cette règle n'était pas posée). */
  display: flow-root;
  /* Les 64px retirés du haut du titre sont reportés ici : la liste d'accordéon
     ne bouge pas d'un pixel, et la hauteur de section reste celle qui a été
     validée. Les deux autres paliers posent leur propre valeur. */
  margin: 0 0 64px;
}

/* ---------- Pastille « Services » ----------
   ⚠ REFAITE le 2026-08-13, sur signalement du propriétaire. Trois défauts
   cumulés, tous relevés à nouveau sur la source aux trois largeurs :

   1. La FORME n'était pas la bonne. `.starburst` (32 rayons en
      conic-gradient) est une primitive du chantier ; la source pose ici un
      tracé unique — une étoile à 30 pointes dont le CŒUR est plein. C'est
      toute la différence : nos rayons convergeaient en un point, l'orange du
      fond passait entre eux, et le mot « Services » posé au centre devenait
      illisible. C'est le piège A₁.0, déjà relevé sur le médaillon de
      #statistics (vestige n° 35), ici en second exemplaire. Le tracé est
      désormais celui de la source, posé en masque (viewBox 0 0 119 118).
   2. La TAILLE était la boîte englobante APRÈS rotation (178 × 177) prise
      pour la taille de l'élément — piège A₁.9. La vraie boîte fait
      139 × 137,85, et c'est sa rotation de -20° qui donne 178 × 177.
   3. La ROTATION de -20° manquait, et avec elle le décalage du libellé.

   Géométrie relevée : le centre de la pastille tombe à 28,5px à droite et
   28,5px sous le coin haut-gauche du bloc titre, aux trois largeurs
   (28,5/28,5 à 1440 ; 6/18,7 à 1024 ; centrée au-dessus du titre à 390).
   Le `left`/`top` de la source désigne le CENTRE : elle pose un
   translate(-50%, -50%) devant la rotation, repris tel quel ici. */
.services__badge {
  position: absolute;
  left: 233.5px;   /* 205 (marge du titre) + 28,5 (centre relevé) */
  top: 31.5px;
  z-index: 1;
  width: 139px;
  height: 137.85px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-20deg);
}

.services__badge-shape {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  background: var(--c-purple);
  -webkit-mask: var(--shape-star-30) no-repeat center / contain;
  mask: var(--shape-star-30) no-repeat center / contain;
}

/* Le libellé passe AU-DESSUS du tracé — la source lui pose un z-index de 1
   sur son propre conteneur. Avec le cœur plein de l'étoile, il se lit sur du
   violet uni. */
.services__badge-text {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 26px;
  letter-spacing: -0.8px;
  color: var(--c-ink);
}

/* Le titre est CENTRÉ dans sa boîte de 950 (relevé : `text-align: center`,
   boîte 245 → 1195, donc centrée sur la page), et sa coupure de ligne vient
   de `text-wrap: balance` — c'est lui qui met « Qu'est-ce qu'on » sur la
   première ligne et « fait ? (et très bien) » sur la seconde. Sans lui, la
   coupure tombait après « fait » et les deux lignes n'avaient plus le même
   dessin que la source.
   La marge haute de 64px qui poussait le titre vers le bas a été retirée : la
   source colle son titre au haut du bloc (60px sous le haut de section, soit
   le padding). Ces 64px sont reportés en bas de `.services__intro`, ce qui
   laisse la liste d'accordéon exactement où elle était. */
.services__heading {
  max-width: 950px;
  margin: 0 0 0 205px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-68);
  line-height: 1;
  text-align: center;
  text-wrap: balance;
  color: var(--c-ink);
}

/* ---------- Liste d'accordéon ---------- */
.services__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.services__item {
  border-radius: 40px;
  /* padding-bottom 87px (fermé) : la source clippe une hauteur de carte FIXE
     (211px, overflow:hidden) sur un contenu toujours pleine hauteur en
     dessous, plutôt que de retirer le panneau du flux — le contrat
     accordion.js de ce brief fait l'inverse (panel hidden+max-height:0,
     retiré du flux), donc sans ce padding compensatoire la carte fermée
     rendrait 134px au lieu des 211px mesurés (30 pad-top + 94 déclencheur +
     10 pad-bottom, contre 30+94+87 ci-dessous). Repassé à 10px à l'ouverture
     (.is-open) car le panneau fournit alors sa propre respiration ; transition
     calée sur --dur-base pour rester synchrone avec l'animation de hauteur du
     panneau (accordion.js/layout.css) — la croissance du panneau (jusqu'à
     ~450px) domine largement le retrait de padding (77px), donc la hauteur
     totale ne fait que croître pendant la transition, sans à-coup visuel. */
  padding: 30px 10px 87px;
  background: var(--card-bg, var(--c-sand));
  /* L'accordéon des services est nettement plus lent que celui de la FAQ sur la
     source : 1027ms de fin de mouvement contre 524 (relevé le 2026-08-13, au
     clic, image par image). D'où sa propre valeur de --dur-accordion, qui pilote
     la transition de `.accordion__panel` posée dans layout.css. */
  --dur-accordion: 1030ms;
  transition: padding-bottom var(--dur-base) var(--ease-out);
}

.services__item.is-open { padding-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .services__item { transition: none; }
}

.services__item--sand     { --card-bg: var(--c-sand); }
.services__item--mint     { --card-bg: var(--c-mint); }
.services__item--lavender { --card-bg: var(--c-lavender); }

.services__title-wrap { margin: 0; }

.accordion__trigger.services__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 0 30px 18px;
  border: 0;
  border-bottom: 1px solid var(--c-ink);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.services__trigger-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.services__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-37);
  line-height: 1;
  color: var(--c-ink);
}

.services__subtitle {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 28px;
  color: var(--c-ink);
}

.services__toggle {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  color: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease-out);
}

.services__toggle svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.services__item.is-open .services__toggle {
  transform: rotate(45deg);
}

/* ---------- Panneau déplié ---------- */
.services__panel-body {
  display: flex;
  gap: 30px;
  padding: 40px 30px 0;
}

.services__tags {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  width: 250px;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.services__tags li {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: 22.5px;
  letter-spacing: -0.45px;
  white-space: nowrap;
}

.services__text {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 25.2px;
  color: var(--c-ink);
}

/* ---------- Galerie (manque du brief, voir A0 ci-dessus) ---------- */
/* La fenêtre montre EXACTEMENT deux images, comme la source. Relevé du
   2026-08-10 (`releve-2026-08-10.json`, section `services`) : les slides y font
   495 × 375 espacés de 10 — soit un pas de 505 — et les deux premiers visibles
   occupent x 360 → 1360. Le troisième commence à 1370, hors cadre. Les deux
   flèches relevées, à 380→420 et 1300→1340, confirment ces bords : 20px en
   retrait de chacun.
   La galerie s'aligne donc sur la COLONNE DE TEXTE (x 360), pas sur le bord du
   panneau (x 80) — c'est la seule chose qui la distinguait de la source, et ce
   qui faisait apparaître un troisième slide coupé sur 55 % de sa largeur. */
.services__gallery {
  --gallery-gap: 10px;
  position: relative;
  /* 30 de padding du panneau + 250 de colonne de tags + 30 de gouttière :
     les trois valeurs de `.services__panel-body` et `.services__tags`. */
  margin: 24px 30px 0 calc(30px + 250px + 30px);
  overflow: hidden;
}

.services__gallery-track {
  display: flex;
  gap: var(--gallery-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform var(--dur-gallery) var(--ease-out);
}

/* Deux slides pleins par fenêtre, exprimé en proportion plutôt qu'en 495px
   fixes : à 1440 la fenêtre fait 1000px et chaque slide retombe exactement sur
   les 495 du relevé, mais entre 1200 et 1440 — largeurs que personne n'a
   mesurées sur la source — on continue d'en montrer deux entiers au lieu d'un
   et demi. Le pas calculé par `gallery.js` suit tout seul : il lit la largeur
   réelle du slide, pas une constante. */
.services__gallery-slide { flex: 0 0 calc((100% - var(--gallery-gap)) / 2); }

/* `aspect-ratio` plutôt qu'une hauteur fixe de 375px : à 1440 le slide fait
   495 de large et l'image retombe sur les 495 × 375 du relevé, au pixel. Entre
   810 et 1440, où le slide est plus étroit, l'image rétrécit proportionnellement
   au lieu de garder 375px de haut — sans quoi elle deviendrait un portrait
   recadré (287 × 375 à 1024). */
.services__gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 495 / 375;
  border-radius: 40px;
  object-fit: cover;
}

.services__gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-ink) 20%, transparent);
  transform: translateY(-50%);
  cursor: pointer;
}

.services__gallery-nav img { width: 20px; height: 20px; }

.services__gallery-nav--prev { left: 20px; }
.services__gallery-nav--next { right: 20px; }

@media (prefers-reduced-motion: reduce) {
  .services__gallery-track { transition: none; }
}

@media (max-width: 1199px) {
  /* Centre relevé à 1024 : 6px à droite et 18,7px sous le coin haut-gauche du
     bloc titre, lui-même à 172px du bord de l'intro. Boîte 123,2 × 122,2. */
  .services__badge {
    left: 178px;
    top: 18.7px;
    width: 123.2px;
    height: 122.18px;
  }

  .services__badge-text {
    font-size: var(--fs-16);
    line-height: 20.8px;
    letter-spacing: -0.64px;
  }

  .services__heading {
    font-size: var(--fs-52);
    max-width: 600px;
    margin: 0 0 0 172px;
  }

  .services__intro { margin-bottom: 123px; }

  /* Titre/sous-titre de carte : la source réduit ces deux tailles au palier
     tablette (30px / 18px, mesuré) — sans quoi "Branding & identité de
     marque" passe sur 2 lignes ici alors qu'elle tient sur 1 sur la source. */
  .services__title { font-size: var(--fs-30); }
  .services__subtitle { font-size: var(--fs-18); line-height: 25.2px; }
}

@media (max-width: 809px) {
  .services { padding: 30px 20px 70px; }

  /* 37px (remesuré, round de fix) : la valeur précédente (102px) avait été
     mesurée sur la source alors que l'animation `data-reveal` de la section
     n'avait pas fini de s'installer (décalage vertical résiduel au moment du
     relevé), ce qui faussait la position du haut de `.services__list` de
     65px. Remesuré avec un délai plus long après le défilement instantané
     (le transform de reveal repasse bien à `none`) : écart réel entre le bas
     du titre et le haut de la liste = 37px à 390px. */
  .services__intro { margin-bottom: 37px; }

  /* À 390 la source empile : pastille centrée au-dessus, titre en dessous.
     Boîte 119,27 × 118,26, centre à 39,5px sous le haut du bloc titre. */
  .services__badge {
    left: 50%;
    top: -19.6px;
    width: 119.27px;
    height: 118.26px;
    transform: translateX(-50%) rotate(-20deg);
  }

  .services__badge-text {
    font-size: var(--fs-15);
    line-height: 19.5px;
    letter-spacing: -0.6px;
  }

  .services__heading {
    max-width: none;
    margin: 79px 0 0;
    font-size: var(--fs-42);
    text-align: center;
  }

  .services__title { font-size: var(--fs-26); line-height: 30px; }
  /* letter-spacing -0.9px : mesuré sur la source à cette taille (18px), absent
     de la règle de base. Sans lui, le sous-titre de la carte "Digital
     Marketing" ("Faites vous remarquer. Obtenez des clics. Obtenez des
     résultats.") déborde sur une 3e ligne (76px) au lieu des 2 lignes (50px)
     mesurées sur la source à 390px — gonflant la hauteur de cette carte de
     26px au-delà de la formule ci-dessous. */
  .services__subtitle { font-size: var(--fs-18); line-height: 25.2px; letter-spacing: -0.9px; }

  /* Round de fix (task-8-brief régénéré) : ce padding avait été calibré à
     l'oeil (20px 10px 40px), avec un écart constaté de +132px sur toute la
     section à 390px (1140 local contre 1008 mesuré). Recalculé ici depuis un
     relevé DOM complet de la source à 390px (voir commentaire A0 plus haut) :
     hauteur carte fermée = 70 (chrome fixe) + hauteur titre + hauteur
     sous-titre, où le "chrome fixe" source se décompose en 20 (haut de
     carte) + 10 (haut de bloc interne) + 10 (gap titre/sous-titre, déjà posé
     via .services__trigger-main) + 10 (bas de bloc interne) + 20 (bas de
     carte) = 70. Reporté sur notre structure à deux niveaux : padding-top de
     .services__item = 30 (20 + 10, le "haut de bloc interne" que notre
     structure n'avait pas avant ce fix) ; le reste (10 bas-de-bloc + 20
     bas-de-carte = 30) est réparti entre le padding-bottom du déclencheur
     (14px, inchangé — c'est l'espace avant le filet, non signalé comme
     fautif) + 1px de bordure (le filet lui-même) + padding-bottom fermé de
     .services__item (15px). Vérifié : 30 (haut) + titre + 10 (gap) +
     sous-titre + 14 (bas déclencheur) + 1 (filet) + 15 (bas carte) =
     70 + titre + sous-titre, exactement la formule source ; sur les trois
     cartes ça redonne 210 / 206 / 180 (Branding / Web Design / Digital
     Marketing), identique au relevé source à 390px. */
  .services__item { padding: 30px 10px 15px; }
  .services__item.is-open { padding-bottom: 10px; }

  /* gap réduit à 10px (au lieu de var(--sp-4) = 16px hérité de la règle de
     base) : mesuré sur la source à 390px, colonne texte 270px + gap 10px +
     icône 30px = 310px, la largeur intérieure du déclencheur ; à 16px la
     colonne ne fait que 264px, 6px de moins que la source. */
  .accordion__trigger.services__trigger { padding: 0 10px 14px; gap: 10px; }

  .services__toggle { width: 30px; height: 30px; }

  .services__panel-body { flex-direction: column; gap: 16px; padding: 24px 10px 0; }

  .services__tags { flex-direction: row; flex-wrap: wrap; width: auto; }

  .services__gallery { margin: 16px 10px 0; }

  .services__gallery-slide { flex-basis: 100%; }

  .services__gallery-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 495 / 375;
  }
}