/* =============================================================================
 * Gabarit « Fiche site (accès & plan) » — templates/page-structure.php
 *
 * Portage du gabarit établissement du CHRU, en charte Maternité.
 *
 * ⚠️ La carte d'accès est en APLAT ROSE-BLUSH, pas en bleu foncé — arbitrage de
 * Thomas du 14/08/2026 sur le rendu (« reprends les couleurs de la mat »). Le
 * bleu foncé est certes une couleur Maternité, mais en aplat plein sur toute la
 * carte il reproduisait la lecture « fiche CHRU » de la maquette d'origine.
 * C'est le même geste que pour le bloc `info-utile` (cf. Règle N°1 du CLAUDE.md
 * projet) : rose FONCÉ `--mat-rose-blush` sous texte blanc = 5,1:1, donc AA.
 * ⚠️ Ne pas y remettre du bleu, et ne pas non plus glisser vers le rose CLAIR
 * `--mat-nouveau-rose` : sous du blanc il est illisible, c'est le piège qui a
 * fait revenir `info-utile` au bleu le 05/08.
 *
 * ⚠️ Aucune règle de ce fichier ne cible le contenu éditorial en sélecteur
 * descendant : la typo du corps est celle de `.mat-page-std__content`, déjà
 * scopée en enfant direct pour ne pas repeindre l'intérieur des blocs
 * (défauts du 08/07 et du 13/08/2026).
 * ========================================================================== */

.mat-site {
	color: var(--mat-bleu-fonce);
}

/* ---- 1. Bandeau : fil d'Ariane + titre ---------------------------------- */

.mat-site__band {
	background: var(--mat-rose-clair);
	padding: 32px 0 40px;
}
.mat-site__band-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.mat-site__title {
	margin: 0;
	font-family: "Coniferous", var(--mat-font-script);
	font-weight: 600;
	font-size: 46px;
	line-height: 1;
	color: var(--mat-bleu-fonce);
}
.mat-site__title-line {
	display: block;
	width: 139px;
	height: 2px;
	background: var(--mat-rose-blush);
}

/* ---- 2. Deux cartes : accès + photo ------------------------------------- */

/*
 * Répartition mesurée sur la fiche de référence du CHRU : la carte d'accès y
 * occupe un peu moins de la moitié du hero. À 460px fixes, la colonne de texte
 * tombait à 144px et « Maternité / Hôpital Central » se cassait en deux lignes
 * à côté du bouton d'itinéraire.
 */
/*
 * 05/10/2026 (point 3 du doc de Marie KUSY du 31/08, « faire le même modèle
 * que le CHRU ») : cotes relevées sur `single-structure.css` du CHRU servi le
 * 05/10 : carte d'accès à 46 % de la rangée, 42px d'écart, la photo prend
 * le reste et s'étire sur TOUTE la hauteur de la carte (plancher 480px).
 */
.mat-site__cards {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	gap: 42px;
	align-items: stretch;
	margin: 40px 0 0;
}
.mat-site__cards--single { grid-template-columns: minmax(0, 1fr); }

/* Carte d'accès (aplat rose-blush) */
.mat-site-acces {
	display: flex;
	flex-direction: column;
	background: var(--mat-rose-blush);
	border-radius: var(--mat-card-radius, 20px);
	padding: 32px 44px;
	color: #fff;
}
.mat-site-acces__rows {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.mat-site-acces__row {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 12px;
	align-items: start;
}
/* Pictos en BLANC : c'est le traitement du bloc `info-utile`, qui vit sur le
   même aplat rose. `--mat-vert-bleu` n'y fait que 2,8:1 — conforme pour un
   décor (les pictos sont `aria-hidden` et doublent un intitulé visible), mais
   visuellement délavé. Le vert-bleu reste l'accent des flèches et pastilles du
   diaporama, qui sont posées sur des photos et non sur le rose. */
.mat-site-acces__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	color: #fff;
}
.mat-site-acces__icon svg { width: 24px; height: 24px; }
.mat-site-acces__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.mat-site-acces__heading {
	margin: 0 0 4px;
	font-family: var(--mat-font-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}
/*
 * ⚠️ Blanc PLEIN, pas `rgba(255,255,255,.9)` comme sur la carte bleue du CHRU :
 * mesuré sur l'aplat rose `#9E5B5C`, le blanc à 90 % tombe à 4,50:1, soit tout
 * juste le seuil AA. Le fond est plus clair que le bleu foncé, il n'y a donc
 * plus de marge pour atténuer un texte. Seuls les filets (non textuels) gardent
 * de la transparence.
 */
.mat-site-acces__single {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
}
.mat-site-acces__list {
	margin: 0;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
}
.mat-site-acces__link {
	display: inline-block;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Hover en rose CLAIR et non en vert-bleu : sur l'aplat rose, `--mat-vert-bleu`
   ne fait que 2,8:1, illisible pour du texte. C'est la convention déjà retenue
   pour les liens du bloc `info-utile`, qui vit sur le même aplat. */
.mat-site-acces__link:hover,
.mat-site-acces__link:focus-visible { color: var(--mat-rose-clair); }

/* Bouton « Calculez votre itinéraire » : pilule blanche, aligné à droite de
   la rubrique arrêts. Il passe sous le texte quand la carte se resserre. */
/* 05/10/2026 (point 6) : le bouton ne vit plus dans une 3e colonne centrée
   verticalement (« il flotte au milieu ») mais à la fin de la rubrique, calé
   à gauche sous le dernier arrêt, comme au CHRU depuis le 11/09/2026. */
.mat-site-acces__cta {
	align-self: flex-start;
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border-radius: var(--mat-radius-pill, 30px);
	background: #fff;
	color: var(--mat-bleu-fonce);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, transform .2s ease;
}
.mat-site-acces__cta:hover,
.mat-site-acces__cta:focus-visible {
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	transform: translateY(-2px);
}
/* Picto « ouvre un nouvel onglet ». Le SVG du thème est écrit en 24×24 : à
   côté d'un libellé de 14px il ferait une icône plus haute que le texte.
   Dimensionné ici et NON dans une règle globale `.mat-ext-icon`, qui
   changerait aussi les liens sortants du contenu éditorial de tout le site. */
.mat-site-acces__cta { gap: 8px; }
.mat-site-acces__cta .mat-ext-icon {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	color: currentColor;
}

.mat-site-acces__hr {
	margin: 24px 0 20px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}
/*
 * ⚠️ PAS de `margin-top: auto` ici. Les deux cartes du hero sont à hauteur
 * égale (`align-items: stretch`), et c'est la photo qui impose souvent la
 * hauteur. Épingler le téléphone en bas creusait alors un trou AU MILIEU de la
 * carte, entre les rubriques et le filet — très visible sur une fiche bâtiment,
 * qui n'a que deux rubriques là où la fiche du site en a quatre. Le contenu
 * s'aligne donc en haut : l'espace restant tombe en bas de l'aplat, où il ne
 * se lit pas comme un défaut.
 */
.mat-site-acces__phone {
	display: flex;
	align-items: center;
	gap: 20px;
}
.mat-site-acces__phone-icon { display: flex; color: #fff; }
.mat-site-acces__phone-sep {
	width: 1px;
	align-self: stretch;
	min-height: 52px;
	background: rgba(255, 255, 255, 0.35);
}
/* 05/10/2026 (point 4, capture image23 de Marie) : hiérarchie du CHRU. Le
   libellé passe de 14 à 18,5px (il n'était plus lu comme un titre), le numéro
   à 18px gras, SANS soulignement au repos : souligné seulement au survol et
   au focus, comme au CHRU (`a.chru-etab-acces__phone-number`). */
.mat-site-acces__phone-info { display: flex; flex-direction: column; gap: 4px; }
.mat-site-acces__phone-label {
	margin: 0;
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}
.mat-site .mat-site-acces__phone-number,
.mat-site .mat-site-acces__phone-number:visited {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	letter-spacing: .02em;
}
.mat-site .mat-site-acces__phone-number:hover,
.mat-site .mat-site-acces__phone-number:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Photo / diaporama */
/*
 * ⚠️ Hauteur pilotée par un RATIO, pas par la photo. Sans lui, c'est la
 * définition de l'image qui impose la hauteur de toute la rangée : sur une
 * fiche bâtiment (2 rubriques d'accès au lieu de 4) la carte rose était étirée
 * à 580px pour 335px de contenu, soit 309px d'aplat vide. Le 16/9 tombe à
 * quelques pixels de la hauteur naturelle de la carte du site : c'est elle qui
 * continue d'imposer la hauteur là où elle est bien remplie, et le vide se
 * réduit à ~100px sur une fiche courte.
 * ⚠️ Ne pas resserrer ce ratio pour « équilibrer » davantage : la photo est en
 * `cover`, chaque point de ratio gagné est du sujet rogné — c'est le défaut
 * signalé par Marie le 11/08 sur le hero du modèle standard.
 */
/*
 * ⚠️ `width: 100%` est OBLIGATOIRE à côté de `aspect-ratio` + `min-height`, et
 * ce n'est pas une redondance de grid-item. Quand `min-height` dépasse la
 * hauteur que le ratio donnerait (en mobile : 342 × 9/16 = 192 < 260), c'est la
 * hauteur qui devient la dimension contrainte et le ratio recalcule la
 * LARGEUR : 260 × 16/9 = 462px dans un viewport de 390 → débordement
 * horizontal de toute la page. Mesuré, pas supposé. Avec une largeur explicite,
 * le ratio ne peut plus produire que de la hauteur.
 */
/*
 * 05/10/2026 (point 3) : modèle CHRU. Plus de ratio 16/9 : la photo occupe
 * toute la hauteur de la rangée (celle de la carte d'accès), avec un plancher
 * de 480px en desktop, 320px une fois les cartes empilées (≤ 1024px). Toutes
 * les slides sont en absolu dans le cadre, l'image en `cover` le remplit.
 * ⚠️ Toujours AUCUN `aspect-ratio` ici : avec `min-height`, il recalculait la
 * LARGEUR en mobile (462px dans 390, débordement de toute la page, 14/08).
 * `width: 100%` reste posé par sécurité.
 */
.mat-site-photo {
	position: relative;
	width: 100%;
	min-width: 0;
	min-height: 480px;
	border-radius: var(--mat-card-radius, 20px);
	overflow: hidden;
	background: var(--mat-aplat-bleu-vert);
}
.mat-site-photo__track { position: absolute; inset: 0; }
.mat-site-photo__slide {
	margin: 0;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease;
}
.mat-site-photo__slide.is-active { opacity: 1; visibility: visible; }
.mat-site-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Voile de légende : rose blush assombri, comme le fond de la lightbox
   (décision du 11/08/2026) — assez sombre pour que la photo ressorte, assez
   chaud pour ne pas lire « CHRU ». Pas de bleu institutionnel ici. */
.mat-site-photo__caption {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	padding: 8px 14px;
	border-radius: 12px;
	background: rgba(56, 32, 32, 0.86);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
}
.mat-site-photo__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	z-index: 2;
}
.mat-site-photo__nav--prev { left: 12px; }
.mat-site-photo__nav--next { right: 12px; }
.mat-site-photo__nav:hover { transform: translateY(-50%) scale(1.06); }
/*
 * Pastilles en HAUT à droite, et pas en bas comme sur la fiche CHRU : la
 * légende est un pavé de largeur pleine ancré en bas, dont la hauteur dépend
 * du texte. En mobile elle passe à deux lignes et recouvrait les pastilles.
 * En haut, aucune collision possible quelle que soit la longueur de la légende.
 */
.mat-site-photo__dots {
	position: absolute;
	right: 16px;
	top: 16px;
	display: flex;
	gap: 8px;
	z-index: 2;
}
.mat-site-photo__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}
.mat-site-photo__dot.is-active { background: var(--mat-vert-bleu); }

/* ---- 3. Chapô ----------------------------------------------------------- */

/* 05/10/2026 (point 8, capture image26) : taille du CHRU (24px / 600 /
   1,4, padding 32px 80px, 40px au-dessus) et fond rose clair au lieu du
   bleu-vert, « pour plus d'harmonie visuelle ». Liseré rose pour que le pavé
   se détache du blanc : `--mat-rose-clair` seul (#FFF5F3) est presque blanc.
   Texte bleu foncé sur #FFF5F3 : 9,6:1. */
.mat-site__chapo {
	margin: 40px 0 0;
	padding: 32px 80px;
	border-radius: var(--mat-card-radius, 20px);
	background: var(--mat-rose-clair);
	border: 1px solid var(--mat-rose-outline, #FFD6CF);
	color: var(--mat-bleu-fonce);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

/* ---- 4. Sommaire + corps ------------------------------------------------ */

.mat-site__layout {
	display: grid;
	grid-template-columns: 354px 1fr;
	gap: 64px;
	margin: 56px 0 80px;
	align-items: start;
}
.mat-site__layout--simple {
	display: block;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.mat-site__body { min-width: 0; }

/* Bouton de retour — DANS l'encart du sommaire depuis le 31/08/2026 (C2,
   retour Marie KUSY : homogénéiser avec le CHRU, où il est dans l'encart).
   La <nav> porte le fond rose et un padding de 32px : le bouton se contente
   donc de sa marge haute, comme la dernière entrée de la liste. */
.mat-site__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 10px 18px;
	border: 1px solid var(--mat-rose-blush);
	border-radius: var(--mat-radius-pill, 30px);
	color: var(--mat-rose-blush);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.mat-site__back:hover,
.mat-site__back:focus-visible {
	background: var(--mat-rose-blush);
	color: #fff;
}
/* Le bouton reste sur fond rose : un liseré blanc le détacherait mieux, mais on
   garde EXACTEMENT le style d'avant pour ne changer que sa position. */
.mat-page-std__toc .mat-site__back {
	margin-top: 28px;
}

/* Sections du gabarit */
.mat-site__section { margin: 0 0 48px; }
.mat-site__section:last-child { margin-bottom: 0; }
.mat-site__section-title {
	margin: 0 0 20px;
	font-family: var(--mat-font-sans);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3;
	color: var(--mat-bleu-fonce);
	scroll-margin-top: 24px;
}

/* Point 2 : premier mot en rose (modèle CHRU `.chru-accent`). La classe est
   celle du format « Accent » de l'éditeur, posée par le gabarit. */
.mat-site__section-title .maternite-accent,
.mat-site__content > h2 .maternite-accent { color: var(--mat-rose-blush); }

/*
 * Point 9 (capture image27, « Bâtiment des consultations néonatales ») : un
 * lien dans un paragraphe à fond coloré prenait la couleur de lien du site,
 * illisible sur l'aplat rose-blush. Ici il prend la couleur du TEXTE du
 * paragraphe (blanc sur fond foncé, bleu foncé sur fond clair, puisque c'est
 * l'éditrice qui a choisi ce couple) et reste souligné.
 * Ciblé sur les seuls paragraphes/groupes à fond, jamais sur les blocs du
 * plugin (`[class*="maternite-"]`).
 */
.mat-site__content :is(p, li, h2, h3, h4, div).has-background a:not([class*="button"]):not([class*="btn"]),
.mat-site__content :is(p, li, h2, h3, h4, div)[class*="-background-color"] a:not([class*="button"]):not([class*="btn"]) {
	color: inherit !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.mat-site__content :is(p, li, h2, h3, h4, div).has-background a:not([class*="button"]):not([class*="btn"]):hover,
.mat-site__content :is(p, li, h2, h3, h4, div)[class*="-background-color"] a:not([class*="button"]):not([class*="btn"]):hover {
	text-decoration-thickness: 2px;
}

/* Le contenu éditorial garde ses marges propres, mais se détache des sections
   automatiques qui l'encadrent. */
.mat-site__content { margin: 0 0 48px; }

/* Plan du site */
.mat-site__plan {
	margin: 0 0 20px;
	border-radius: var(--mat-card-radius, 20px);
	overflow: hidden;
	border: 1px solid var(--mat-gris-border-soft);
}
.mat-site__plan-img { display: block; width: 100%; height: auto; }
.mat-site__docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Bâtiments (pages enfants) */
.mat-site__batiments {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.mat-site-bat {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mat-gris-border-soft);
	border-radius: var(--mat-card-radius, 20px);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mat-site-bat:hover,
.mat-site-bat:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--mat-shadow-soft);
}
.mat-site-bat__image {
	display: block;
	background: var(--mat-aplat-bleu-vert);
	aspect-ratio: 4 / 3;
}
.mat-site-bat__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mat-site-bat__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}
.mat-site-bat__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mat-bleu-fonce);
}
.mat-site-bat__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--mat-gris-dark);
}
.mat-site-bat__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mat-rose-blush);
}

/* Anecdote / histoire (point 5) : encart du CHRU (`.chru-bat-anecdote`),
   fond rose clair au lieu du gris, image 240×200 à gauche. */
.mat-site-anec {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	padding: 32px;
	background: var(--mat-rose-clair);
	border: 1px solid var(--mat-rose-outline, #FFD6CF);
	border-radius: var(--mat-card-radius, 20px);
}
.mat-site-anec__image {
	flex: 0 0 240px;
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--mat-aplat-bleu-vert);
}
.mat-site-anec__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mat-site-anec__text {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--mat-bleu-fonce);
}
.mat-site-anec__text > :first-child { margin-top: 0; }
.mat-site-anec__text > :last-child { margin-bottom: 0; }
.mat-site-anec__text a { color: var(--mat-rose-blush); text-decoration: underline; text-underline-offset: 3px; }

/* Galerie photos (slider générique [data-mat-slider]) */
.mat-site-gal { position: relative; }
.mat-site-gal__viewport {
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.mat-site-gal__viewport::-webkit-scrollbar { display: none; }
.mat-site-gal__track {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mat-site-gal__item {
	flex: 0 0 300px;
	max-width: 300px;
}
.mat-site-gal__figure { margin: 0; }
.mat-site-gal__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mat-card-radius, 20px);
}
.mat-site-gal__legend {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--mat-gris-dark);
}
.mat-site-gal__nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 16px;
}
.mat-site-gal__btn {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: transform .2s ease;
}
.mat-site-gal__btn:hover { transform: translateY(-2px); }
/* Le slider générique désactive les flèches en bout de course (et donc les deux
   quand la galerie tient dans la largeur). Même atténuation que les autres
   carrousels du thème (.mat-atl-gal__btn, .mat-articles__btn). */
.mat-site-gal__btn:disabled { opacity: .4; cursor: default; }
.mat-site-gal__btn:disabled:hover { transform: none; }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1180px) {
	.mat-site__cards { gap: 24px; }
	.mat-site-acces { padding: 28px 30px; }
}

/* CHRU : les cartes s'empilent sous 1024px, photo à 320px de plancher. */
@media (max-width: 1024px) {
	.mat-site__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.mat-site-photo { min-height: 320px; }
	.mat-site__chapo { padding: 24px; }
	.mat-site-anec { flex-direction: column; }
	.mat-site-anec__image { flex: none; width: 100%; height: 200px; }
}

@media (max-width: 1024px) {
	.mat-site__layout { grid-template-columns: 240px 1fr; gap: 40px; }
}

@media (max-width: 820px) {
	.mat-site__layout { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
	.mat-site__sidebar { position: static; }
	.mat-site__title { font-size: 36px; }
	.mat-site__chapo { padding: 20px 16px; font-size: 18px; }
}

@media (max-width: 480px) {
	.mat-site-acces { padding: 24px 20px; }
	.mat-site-photo { min-height: 260px; }
	.mat-site-anec { padding: 24px 20px; }
	.mat-site__band { padding: 24px 0 32px; }
	.mat-site-gal__item { flex-basis: 240px; max-width: 240px; }
}