/* Cross-site blocks: FABILIQUE Creative House, Pro Warming Belt, Live Entertainment.
   One card, the same on fabilique.com, sgtrainingfit.com and sgtrainingfitentertainment.com: same photos, texts and look
   on every site. The fabilique.com homepage draws the same card with its own classes (.v2-xcard in sg-v2.css): keep the
   two in step. Everything is scoped to .xsite and carries its
   own colors and fonts, so the host page styles do not leak in. Layout follows the width of the block, not of the
   window (container queries), so it fits any page container. Fonts: Gloock and Hanken Grotesk, SIL Open Font License. */
@font-face{ font-family:'XS Gloock'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/gloock-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'XS Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/hanken-grotesk-var-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.xsite{
  --xs-card:#1C1916; --xs-ink:#EEEAE3; --xs-ink-2:#ADA79E; --xs-accent:#E9B446; --xs-accent-d:#F7CF5E; --xs-on-accent:#1A1405;
  --xs-display:'XS Gloock', Georgia, serif; --xs-body:'XS Hanken Grotesk', system-ui, sans-serif;
  --xs-ease:cubic-bezier(.22,.61,.36,1); --xs-ease-out:cubic-bezier(.16,1,.3,1);
  container-type:inline-size; display:block; margin:0; padding:0; font-family:var(--xs-body); font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-align:left;
}
.xsite *, .xsite *::before, .xsite *::after{ box-sizing:border-box; }
.xsite__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.xsite-card{ display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); margin:0; padding:0; background:var(--xs-card); border:0; border-radius:6px; overflow:hidden; box-shadow:none; color:var(--xs-ink-2); }
.xsite-card__ph{ position:relative; min-height:100%; margin:0; }
.xsite-card__img{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; margin:0; border-radius:0; object-fit:cover; object-position:50% 74%; }
.xsite-card__img--aerial{ object-position:50% 50%; }
.xsite-card__img--fabilique{ object-position:15% 50%; }
.xsite-card__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:30px 30px 28px; }
.xsite-card__over{ display:inline-flex; align-items:center; gap:12px; margin:0; font:600 12px/1.65 var(--xs-body); letter-spacing:.2em; text-transform:uppercase; color:var(--xs-ink-2); }
.xsite-card__over i{ font-style:normal; letter-spacing:0; color:var(--xs-accent); }
/* the FABILIQUE card shows the full logo where the others have their label; next to it the labels take the same height */
.xsite-card__logo{ display:inline-flex; align-items:center; gap:10px; margin:0; min-height:35px; }
.xsite-card__logo img{ display:block; height:auto; max-width:none; margin:0; }
.xsite-card__logo img:first-child{ width:34px; }
/* 150 px keeps the CREATIVE HOUSE line above 5 px, the smallest size the site header allows */
.xsite-card__logo img:last-child{ width:150px; }
@container (width >= 665px){ .xsite__grid:has(.xsite-card__logo) .xsite-card__over{ min-height:35px; } }
.xsite-card h2{ margin:0; padding:0; border:0; font:400 clamp(28px,2.3vw,34px)/1 var(--xs-display); letter-spacing:-.02em; text-transform:none; color:var(--xs-ink); text-wrap:balance; }
.xsite-card p{ margin:0; padding:0; font:400 14px/1.6 var(--xs-body); letter-spacing:normal; color:var(--xs-ink-2); text-wrap:pretty; }
.xsite-card__btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:auto; padding:12px 22px; border:0; border-radius:100px; background:var(--xs-accent); color:var(--xs-on-accent); font:600 14px/1.65 var(--xs-body); letter-spacing:.01em; text-transform:none; text-decoration:none; white-space:nowrap; transition:transform .35s var(--xs-ease-out), background-color .35s var(--xs-ease), box-shadow .35s var(--xs-ease); }
.xsite-card__btn:hover{ background:var(--xs-accent-d); color:var(--xs-on-accent); text-decoration:none; transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(0,0,0,.7); }
.xsite-card__btn:active{ transform:translateY(0); box-shadow:none; }
.xsite-card__btn:focus-visible{ outline:2px solid var(--xs-accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .xsite-card__btn, .xsite-card__btn:hover{ transition:none; transform:none; } }

/* the same steps as the fabilique.com homepage, counted on the block width (page width minus 56 px of side padding) */
@container (width < 1024px){
  .xsite-card{ grid-template-columns:minmax(0,34%) minmax(0,1fr); }
  .xsite-card__txt{ padding:24px; }
}
@container (width < 904px){
  .xsite-card{ grid-template-columns:none; grid-template-rows:auto 1fr; }
  .xsite-card__ph{ min-height:0; aspect-ratio:2/1; }
  .xsite-card__txt{ padding:24px 24px 26px; }
}
@container (width < 805px){ .xsite__grid{ gap:16px; } }
@container (width < 665px){
  .xsite__grid{ grid-template-columns:1fr; }
  .xsite-card__txt{ padding:22px 20px 24px; }
}
/* browsers without container queries (Safari before 16, Chrome before 105): the same steps by window width */
@supports not (container-type:inline-size){
  @media (max-width:1079px){ .xsite-card{ grid-template-columns:minmax(0,34%) minmax(0,1fr); } .xsite-card__txt{ padding:24px; } }
  @media (max-width:959px){ .xsite-card{ grid-template-columns:none; grid-template-rows:auto 1fr; } .xsite-card__ph{ min-height:0; aspect-ratio:2/1; } .xsite-card__txt{ padding:24px 24px 26px; } }
  @media (max-width:860px){ .xsite__grid{ gap:16px; } }
  @media (max-width:720px){ .xsite__grid{ grid-template-columns:1fr; } .xsite-card__txt{ padding:22px 20px 24px; } }
}