/* Practice pages (Software and Automation first). Loads after style.css and
   services.css and reuses their tokens, the services hero, .svc-h2 and the
   gradient practice cards. Structure follows the reference practice page
   (hero, statement, our services, other practices, contact).

   1. Hero
   2. Our services
   3. Other practices
   4. Footer
------------------------------------------------------------------------- */

/* 1. Hero ----------------------------------------------------------------- */

/* Laid out like the reference's Cortical Cloud hero (and the Methodology
   hero): white display title, then the headline, the paragraph and a
   centred button, 180px top, 60px between, 100px to the button; headline
   Jet Black, paragraph Dark Grey. All three run the full content width. */
/* Backdrop after the reference's Cortical Cloud hero: one tall image
   (practice-hero-bg-purple.jpg, rendered by scripts/make-practice-hero-bg.py)
   with the reference's glows in the same places, recoloured to the brand:
   light Pop Purple where it has green, light Magenta where it has peach.
   Placed as the reference places its image (cover, anchored top centre), so
   on a wide screen the purple glow sits large on the right. The light
   streak on top (::before below) is light Magenta: it makes the soft warm
   area at the bottom left, which is cream on the reference. */
.svc-hero--practice {
  justify-content: flex-start;
  align-items: stretch;
  gap: 100px;
  min-height: 0;
  padding: 180px var(--svc-x) 140px;
  color: var(--color-ink);
  background-color: #c8c9cf;
  background-image: url("../img/practice-hero-bg-purple.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* The reference's light streak: a soft diagonal band laid over the backdrop
   140px down at 40%, brightening what's under it (plus-lighter). */
.svc-hero--practice::before {
  content: "";
  top: 140px;
  right: auto;
  left: 0;
  width: 100%;
  height: 1680px;
  border-radius: 0;
  background: url("../img/practice-hero-flare.png") no-repeat left top / cover;
  mix-blend-mode: plus-lighter;
  opacity: 0.5;
  transform: none;
}

.svc-hero--practice > * {
  z-index: 1;
}

.svc-hero--practice .svc-hero__title {
  color: var(--color-paper);
}

.prac-hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Text spans the hero as on the reference: the title on one line, sized to
   fill the content width. Each page sets --title-em, its name's width at
   1em (measured), so long names fill the line exactly; short ones stop at
   Methodology's 12.5vw rather than growing huge. Semibold (600), as on the
   reference; --title-em is measured at that weight. */
/* The hero title and the services heading swap sizes (client): the two
   sizes are set here once and each element takes the other's.
   --hero-title-size is the hero's old one-line fit (12.5vw, or the column
   divided by the page's name width, --title-em, set on <main>);
   --offer-title-size is the heading's old min(9.5vw, 140px). */
.svc--practice {
  --hero-title-size: min(12.5vw, calc((100vw - 2 * var(--svc-x) - 24px) / var(--title-em, 11)));
  --offer-title-size: min(9.5vw, 140px);
}

/* The hero title always reads larger than the heading over the cards
   (client, 2026-10-07): at least 10% above the heading's size, never below
   its own old size, and never more than two lines' width
   (--title-word-em, its widest wrapped line at 1em). */
.svc-hero--practice .svc-hero__title {
  max-width: none;
  font-size: min(max(var(--offer-title-size), calc(var(--hero-title-size) * 1.1)), calc((100vw - 2 * var(--svc-x)) / var(--title-word-em, 5)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Headline full width, medium weight, 5.5vw with a 34px floor, as on the
   reference (101px at 1840, 79px at 1440). */
.prac-hero__headline {
  font-size: max(34px, 5.5vw);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: pretty; /* full-width lines as on the reference; each
                         headline keeps its last three words together */
  color: var(--svc-jet, #111111);
}

/* Paragraph a fixed 28px medium, as on the reference (22px under 800px,
   18px on phones, below). */
.prac-hero__text {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-brand-grey-dark);
}

.prac-hero__bottom {
  position: relative;
  margin: 0 auto;
}

.prac-hero__bottom .button {
  min-width: 300px;
  font-weight: 500;
}

/* 2. Our services --------------------------------------------------------- */

/* Large left-aligned heading on top, the cards' carousel below. (The disc
   behind the heading was removed, client.) */
.prac-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 112px;
  padding: 88px var(--svc-x) 120px;
  overflow: clip;
  /* The client's pale neuron illustration under the heading and the cards,
     softened to the Services page's "Four Practices" ground (client,
     2026-10-07: blurred 9px and taken 35% towards a pale grey, in the
     -soft files; the originals are kept), anchored to the top and covering
     the width; a fade over the lower half
     takes it to the next section's cream (Cloud), so it melts away before the
     section ends, whatever the screen's proportions. */
  --offer-fade: linear-gradient(180deg, rgb(246 245 242 / 0) 50%, var(--color-cloud) 100%);

  /* Fades to the next section's cream (Cloud #f6f5f2), so there is no
     edge between them. */
  background-color: var(--color-cloud);
  background-image: var(--offer-fade), url("../img/practice-offer-bg-soft.jpg");
  background-image: var(--offer-fade), image-set(url("../img/practice-offer-bg-soft.webp") type("image/webp"), url("../img/practice-offer-bg-soft.jpg") type("image/jpeg"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}


.prac-offer__heading,
.prac-others__intro .svc-h2 {
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1.15;
}

/* Jet Black, sunk into the section (letterpress): with light from the top
   left, a soft shade on each letter's upper-left rim and a white catch on
   the lower right. */
/* Sized as the Services page's "Four practices. One standard." (client):
   min(13.6vw, 200px), left-aligned across the full column. */
.prac-offer__heading {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  /* Swapped with the hero title (client), then 15% smaller so the hero
     title above always reads larger, phones included (client, 2026-10-07). */
  font-size: calc(var(--hero-title-size) * 0.85);
  font-weight: var(--weight-body); /* regular, not bold (client) */
  line-height: 1.09;
  text-align: left;
  text-wrap: balance;
  color: var(--svc-jet); /* Jet Black #111 (client) */
  text-shadow:
    -1px -1px 1px rgb(0 0 0 / 0.25),
    1px 1px 1px #ffffff,
    2px 2px 3px rgb(255 255 255 / 0.6);
}

/* Intro on the page's left gutter. On wide screens (1361px up, below)
   it sits beside the cards, vertically centred on them; narrower, it goes
   above them and the card row (max 1084px) centres on the page. */
.prac-others__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 20px;
  text-align: left;
}

.prac-others__intro p {
  max-width: 34ch;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: var(--weight-body);
  line-height: 1.6;
  color: var(--svc-grey-medium);
  text-wrap: balance; /* even lines in the narrow side column, no lone word */
}

/* The services as landscape cards in the Services page's neumorphic style
   (.svc-practices__grid .svc-card): Light Grey on a Light Grey ground, lit
   from the top left (a Pure White highlight, a soft #d9d9d9 shade), 30px
   corners, Jet Black name, Dark Grey description, centred. Not links, so
   no hover.
   They sit in one row that runs the full width of the screen: a carousel
   that scrolls sideways (swipe, trackpad, mouse drag, arrow keys once
   focused, or the two buttons below; main.js), snapping card by card. The
   first card lines up with the page gutter. The track is padded top and
   bottom so the cards' shadows are not clipped by its scroll box. */
.prac-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: calc(100% + 2 * var(--svc-x)); /* edge to edge */
  max-width: none;
  margin-top: -40px; /* the track's shadow padding; keeps the 112px gap */
}

.prac-offer__list {
  position: relative;
  display: flex;
  gap: 32px;
  width: 100%;
  margin: 0;
  padding: 40px var(--svc-x) 56px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--svc-x);
  scrollbar-width: none;
}

.prac-offer__list::-webkit-scrollbar {
  display: none;
}

.prac-offer__list:focus-visible {
  outline: 2px solid var(--svc-jet);
  outline-offset: -8px;
  border-radius: 30px;
}

/* The cards in the Services page's practice-card style (client): CL1's
   striped green and purple pattern under a 20% aubergine wash, raised with
   the neumorphic light from the top left plus an inner bevel, equal
   padding all round, everything left-aligned; name in Canary #ffedaf,
   description in white, at the Services sizes. No number
   tiles (the Services cards dropped their icons). Not links, no button. */
.prac-offer__item {
  --card-wash: linear-gradient(rgb(30 18 44 / 0.2), rgb(30 18 44 / 0.2));

  --card-pad: clamp(32px, 3vw, 48px);

  display: flex;
  flex: 0 0 clamp(400px, 33vw, 560px);
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
  padding: var(--card-pad);
  container-type: inline-size; /* the name's size follows the card (below) */
  text-align: left;
  color: #ffffff;
  border-radius: 30px;
  background-color: #6f6588;
  background-image: var(--card-wash), url("../img/services-card-gradient.jpg");
  background-image: var(--card-wash), image-set(url("../img/services-card-gradient.webp") type("image/webp"), url("../img/services-card-gradient.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  box-shadow:
    15px 15px 30px #c9c4cf,
    -15px -15px 30px #ffffff,
    inset 3px 3px 6px rgb(255 255 255 / 0.35),
    inset -4px -4px 10px rgb(30 20 50 / 0.25);
  scroll-snap-align: start;
}

/* Hover (client): the card pops out from its centre, a 4% scale with a
   deeper shadow and a touch more light, eased in and out. Pointer devices
   only; still under reduced motion. The track's 40/56px padding leaves
   room for the larger card and its shadow. */
.prac-offer__item {
  position: relative;
  transform-origin: center;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prac-offer__item:hover {
    z-index: 1;
    filter: brightness(1.06);
    transform: scale(1.04);
    box-shadow:
      22px 26px 44px #bdb6c6,
      -15px -15px 30px #ffffff,
      inset 3px 3px 6px rgb(255 255 255 / 0.35),
      inset -4px -4px 10px rgb(30 20 50 / 0.25);
  }
}

/* Short one-line names (client's option 4b). The size is capped at a tenth
   of the card's inner width, so the longest name (9.9em) always fits one
   line, phones included; the description follows it directly. */
.prac-offer__title {
  margin-top: 0.1em; /* round letters overshoot the trimmed cap line */
  font-size: min(clamp(32px, 2.75vw, 44px), 10cqi);
  font-weight: var(--weight-body); /* regular, as the section heading (client) */
  line-height: 1.15;
  color: var(--color-canary);
  text-wrap: balance;
  text-shadow: 0 1px 1px rgb(20 12 30 / 0.35);
  text-box: trim-start cap alphabetic; /* visible gap above = the padding */
}

.prac-offer__item p {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(18px, 1.3vw, 21px);
  font-weight: var(--weight-body);
  line-height: 1.55;
  color: #ffffff;
  text-wrap: pretty;
  text-shadow: 0 1px 1px rgb(20 12 30 / 0.35);
}

/* 3. Other practices ------------------------------------------------------ */

/* Intro and links to the three other practices; the cream ground is set
   further down ("On CL1's own ground"). */
.prac-others {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 120px var(--svc-x) 136px;
  overflow: hidden;
  color: var(--color-paper);
  /* The glow ends above the bottom edge, so the last stretch is flat Jet
     Black, the colour the footer continues in. */
  background: radial-gradient(ellipse 110% 85% at 50% 0%, #1b2735 0%, var(--svc-jet) 100%);
}

/* 4. Footer --------------------------------------------------------------- */

/* The shared footer, brought onto the page's own palette: plain Jet Black
   with no glow (client), opening with the same black-and-white blending
   bars as every other page (client), and the actions match the statement's
   "Talk to us" (light primary, outlined secondary). */
.site-footer--practice {
  background: var(--svc-jet, #111111);
}

.site-footer--practice .site-footer__ctas .button:first-of-type {
  color: var(--color-ink);
  background: linear-gradient(180deg, #f9f7f5 0%, #ecebe9 100%);
  box-shadow:
    0 2px 0 0 #fff inset,
    0 1px 1px 0 rgb(255 255 255 / 0.5) inset,
    0 0 1px 0 rgb(0 0 0 / 0.5),
    0 2px 4px 0 rgb(0 0 0 / 0.1),
    0 12px 30px 0 rgb(0 0 0 / 0.3);
}

.site-footer--practice .site-footer__ctas .button--outline {
  border: 1px solid rgb(255 255 255 / 0.6);
  background: none;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.site-footer--practice .site-footer__ctas .button--outline:hover,
.site-footer--practice .site-footer__ctas .button--outline:focus-visible {
  border-color: var(--color-paper);
  background-color: rgb(255 255 255 / 0.08);
}

.site-footer--practice .site-footer__bottom {
  background: none; /* the whole footer one flat Jet Black */
}

/* Breakpoints -------------------------------------------------------------- */

/* Wide screens: two columns, the intro (at least 280px, taking what the
   cards leave) beside the card row (up to 1084px), in one band. */
@media (min-width: 1361px) {
  .prac-others {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1084px);
    align-items: center;
    column-gap: 64px;
  }

  .prac-others__intro {
    align-self: center;
  }
}

@media (max-width: 800px) {
  /* Below 800px a one-line title gets small; let it wrap at the reference's
     size (12.5vw, 76px floor) or smaller, so its widest wrapped line
     (--title-word-em, measured at 1em: "Software and", "Infrastructure")
     still fits. */
  .svc--practice {
    --hero-title-size: min(max(76px, 12.5vw), calc((100vw - 2 * var(--svc-x)) / var(--title-word-em, 5)));
  }

  .prac-hero__text {
    font-size: 22px;
  }
}

@media (max-width: 700px) {
  .svc-hero--practice {
    gap: 72px;
    padding-top: 120px;
    padding-bottom: 72px;
  }

  .prac-hero__body {
    gap: 48px;
  }

  /* Headline eases from 34px to 29px on the narrowest phones, where the
     longer copy would otherwise run to eight lines. */
  .prac-hero__headline {
    font-size: max(min(34px, 9vw), 5.5vw);
  }

  /* 300px wide as on the reference, never wider than the content. */
  .prac-hero__bottom .button {
    min-width: min(300px, calc(100vw - 2 * var(--svc-x)));
  }

  .prac-offer {
    gap: 88px;
    padding: 64px var(--svc-x) 88px;
  }


  /* Cards narrower than the screen, so the next one peeks in. */
  .prac-offer__list {
    gap: 20px;
  }

  .prac-offer__item {
    --card-pad: 28px;

    flex-basis: min(320px, calc(100vw - 2 * var(--svc-x) - 40px));
  }

  .prac-offer__title {
    font-size: min(28px, 10cqi);
  }

  .prac-offer__item p {
    font-size: 17px;
  }

  .prac-others {
    gap: 48px;
    padding: 88px var(--svc-x) 104px;
  }
}

@media (max-width: 500px) {
  .prac-hero__text {
    font-size: 18px;
    line-height: 1.4;
  }
}

/* The service cards as a grid (client): three to a row (Software &
   Automation's nine make a 3x3), two on tablets, one on phones. Replaces
   the sideways carousel; its buttons are gone from the markup, so main.js
   no longer wires the track. All cards in a row share its height. */
.prac-carousel {
  width: 100%;
  margin-top: 0;
}

.prac-offer__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 32px;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.prac-offer__item {
  flex: none;
  width: auto;
}

@media (max-width: 1100px) {
  .prac-offer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .prac-offer__list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
  }
}

/* "Our other services." intro, laid out exactly as the "Sustainable" block
   of corticallabs.com/cl1 (client; measured): a frame on the page gutter
   (9.5vw) drawn by hairlines that run edge to edge across the page and the
   full height of the section, with 3px dots where they cross. Inside, the
   text sits 6vw in: a one-line title 80px under the top rule with a rule
   along its foot, a subline 20px lower with its own rule, then the
   paragraph 60px down and 80px of air before the closing rule. Colours
   inverted for the night sky: white text, white dots, lines at 10%.
   Sizes: the reference's title is 13vw, but "Our other services." is 8.7em
   to its 5.1em, so it fills the frame's inner width on one line instead
   (69vw / 8.682em); the subline keeps the reference's 0.44 ratio to it;
   the paragraph is the reference's 34px (24 on phones). The circles follow
   below the frame, centred. */
.prac-others {
  display: flex;
  padding-top: 96px; /* 240px in the reference; shortened (client, 2026-10-10) */
}

.prac-others__intro.prac-frame {
  --frame-in: 6vw;
  --frame-line: rgb(255 255 255 / 0.1);
  --title-em: 8.682; /* the title's width at 1em; set per page */
  --title-size: min(13vw, calc(69vw / var(--title-em)));

  align-self: stretch;
  gap: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 0 80px;
}

.prac-frame .line {
  background-color: var(--frame-line);
}

.prac-frame .dot {
  position: absolute;
  z-index: 1;
  background-color: var(--color-paper);
}

/* Rules run off both edges of the screen; uprights the full section height
   (the section clips both). */
.prac-frame .line--horz {
  left: -100vw;
  right: -100vw;
  width: auto;
}

.prac-frame > .line--vert {
  top: -96px; /* matches the section's top padding */
  bottom: -100vh;
  height: auto;
}

.prac-frame > .line--l {
  left: 0;
}

.prac-frame > .line--r {
  right: 0;
}

.prac-frame__row {
  position: relative;
  align-self: stretch; /* full frame width, so its rule's dots land on the uprights */
  padding: 0 var(--frame-in);
}

.prac-frame__row--title {
  padding-top: 80px;
}

.prac-frame__row .line--b {
  bottom: 8px;
}

.prac-frame__row .dot--bl,
.prac-frame__row .dot--br {
  bottom: 7px;
}

.prac-frame__title {
  font-size: var(--title-size);
  font-weight: 800;
  line-height: 0.923;
  white-space: nowrap;
  color: var(--color-paper);
}

.prac-frame .prac-frame__sub {
  max-width: none;
  margin-top: 20px;
  font-size: max(28px, calc(var(--title-size) * 0.44));
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-paper);
}

.prac-frame .prac-frame__text {
  max-width: none;
  margin-top: 60px;
  padding: 0 var(--frame-in);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-paper);
  text-wrap: pretty;
}

/* Phones: the title wraps to two lines at the reference's phone scale. */
@media (max-width: 700px) {
  .prac-others__intro.prac-frame {
    --title-size: 11vw; /* the longest word, "Infrastructure", holds one line down to 320px */
  }

  .prac-frame__title {
    white-space: normal;
    text-wrap: balance;
  }

  .prac-frame .prac-frame__sub {
    font-size: 28px;
  }

  /* Wrapped title and subline: rules sit just under the text, not through
     its last line. */
  .prac-frame__row {
    padding-bottom: 14px;
  }

  .prac-frame__row .line--b {
    bottom: 0;
  }

  .prac-frame__row .dot--bl,
  .prac-frame__row .dot--br {
    bottom: -1px;
  }

  .prac-frame .prac-frame__text {
    font-size: 24px;
  }
}

/* On CL1's own ground (client): the section is the page's cream, Cloud
   #f6f5f2, as the reference's body, with no starfield; text pure black,
   hairlines black at 8%, dots black. The three circles are replaced by
   buttons to the other practices in the reference's dark button (black
   pill, 300x60, 20px medium white; 269x48 / 16px on phones), 60px under
   the paragraph, side by side and wrapping. */
.prac-others {
  color: #000000;
  background: var(--color-cloud);
}

.prac-others__intro.prac-frame {
  --frame-line: rgb(0 0 0 / 0.08);
}

.prac-frame .dot {
  background-color: #000000;
}

.prac-frame .prac-frame__title,
.prac-frame .prac-frame__sub,
.prac-frame .prac-frame__text {
  color: #000000;
}

.prac-frame__actions {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  justify-content: center; /* the three centred in the frame (client) */
  gap: 24px;
  margin-top: 60px;
  padding: 0 var(--frame-in);
}

.button--ink {
  min-width: 300px;
  padding: 20px 36px;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
  background: #000000;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.button--ink:hover,
.button--ink:focus-visible {
  background: var(--svc-jet, #111111);
  outline-offset: 3px;
}

/* Tablets: one row, each button as wide as its label needs; stacked full
   width from 1180px down. (Three 300px buttons need a 1380px screen.) */
@media (max-width: 1400px) {
  .button--ink {
    min-width: 0;
    flex: 1 1 auto;
    padding-inline: 28px;
  }
}

@media (max-width: 1180px) {
  .prac-frame__actions {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 700px) {

  .button--ink {
    flex: none;
    padding: 14px 24px;
    font-size: 16px;
  }
}

/* Longer card copy (client) wants landscape cards, so the grid runs wider
   than the heading's gutter: out to the page's 2.5vw margin, the width the
   Services cards use. Three columns stay down to 1100px. */
.prac-offer .prac-carousel {
  width: auto;
  align-self: stretch;
  margin-inline: calc(max(16px, 2.5vw) - var(--svc-x));
}

.prac-offer__item p {
  max-width: none; /* the wider cards' full measure */
}

@media (max-width: 1200px) {
  .prac-offer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .prac-offer__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Text aligned across each row (client): every card takes two of the
   list's rows, the name's and the description's, through subgrid. Names
   sit on the bottom of their row, so in a row where one runs to two lines
   the others share its baseline; the descriptions all start on the line
   below. Name rows fit the tallest name in the row; description rows all
   match the tallest, so every card stays the same height. On phones (one
   column) each card fits its own text.
   Subgrid is ignored inside a size container, so the list is the container
   now, and the name keeps its cap of a tenth of the card's inner width,
   worked out from the list's width, the columns and the gaps. */
@supports (grid-template-rows: subgrid) {
  .prac-offer__list {
    --cols: 3;
    --list-gap: 32px;

    grid-auto-rows: auto 1fr;
    container-type: inline-size;
  }

  .prac-offer__item {
    --card-in: calc((100cqi - (var(--cols) - 1) * var(--list-gap)) / var(--cols) - 2 * var(--card-pad));

    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    justify-items: start;
    gap: 24px;
    container-type: normal;
  }

  .prac-offer__title {
    align-self: end;
    font-size: min(clamp(32px, 2.75vw, 44px), var(--card-in) / 10);
  }

  .prac-offer__item p {
    align-self: start;
  }

  @media (max-width: 1200px) {
    .prac-offer__list {
      --cols: 2;
    }
  }

  @media (max-width: 700px) {
    .prac-offer__list {
      --cols: 1;
      --list-gap: 20px;

      grid-auto-rows: auto;
    }

    .prac-offer__title {
      font-size: min(28px, var(--card-in) / 10);
    }
  }
}