/* JTL Card Grid — full-bleed sand band with a centred header, a row of icon
   cards (each a nested Simple Container + JTLText atoms) and a closing CTA pill.
   The widget owns only the band, the layout, the card icon and the CTA; every
   text is a nested JTLText atom that keeps its own design-system styling.
   Figma: Transition-Pages node 132:24726. */

.jtl-card-grid {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  /* The widget still decides its padding; the band-space control only supplies a
     value through these properties, with this rule's own as the fallback. */
  padding-top: var(--jtl-band-space-top, 0px);
  padding-bottom: var(--jtl-band-space-bottom, 0px);
  padding-left: 0;
  padding-right: 0;
  background-color: #eeeee7;
  box-sizing: border-box;
}

.jtl-card-grid__inner {
  max-width: var(--jtl-band-max, var(--jtl-band-outer, 1570px));
  margin: 0 auto;
  padding: 0 64px;
  box-sizing: border-box;
  display: grid;
  /* The desktop column count rides on a custom property rather than on a
     `.jtl-card-grid--cols-3 .jtl-card-grid__inner` rule, because that selector
     outranks the plain `.jtl-card-grid__inner` in the breakpoints below and
     would pin a three-column grid at three columns on a phone. A property is
     read at whatever specificity the winning grid-template-columns has, so the
     responsive collapse keeps working untouched. */
  /* minmax(0, 1fr), not 1fr: a bare `1fr` is `minmax(auto, 1fr)`, so a track
     cannot shrink below its content's min-content width. One long unbreakable
     word — German compounds reach it easily — then widens its own column, the
     tracks stop being equal, and the row overflows the band. Measured at 993px
     on the four-column grid: tracks 223/201/204/250 instead of four equal ones,
     the last card ending 45px past the viewport. */
  grid-template-columns: repeat(var(--jtl-card-grid-cols, 4), minmax(0, 1fr));
  align-items: stretch;
  /* Named, because a card placed across the whole row has to reproduce one
     track's width and there is no CSS way to ask the grid for it. */
  --jtl-card-grid-gap: 32.71px;
  column-gap: var(--jtl-card-grid-gap);
  row-gap: 0;
}
.jtl-card-grid--cols-3 {
  --jtl-card-grid-cols: 3;
}
.jtl-card-grid--cols-2 {
  --jtl-card-grid-cols: 2;
}

/* Header — the three JTLText atoms each span the full row, centred and capped. */
.jtl-card-grid__inner > .jtl-text {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 879px;
  text-align: center;
}
.jtl-card-grid__inner > .jtl-text--h2 {
  margin-top: 0;
}
.jtl-card-grid__inner > .jtl-text--paragraph {
  margin-top: 24.533px;
}

/* Cards — nested Simple Containers, auto-placed into one row under the header. */
.jtl-card-grid__card {
  /* Pairs with the minmax(0, …) tracks above: the track may now be narrower than
     the card's content, so the card has to be allowed to be too, and its copy has
     to break rather than run out of the tile. */
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32.71px;
  padding: 24.533px;
  background-color: #ffffff;
  border-radius: 24.533px;
  text-align: center;
  box-sizing: border-box;
}
/* Card icon — a scoped decorative tile (the widget owns the card chrome). */
.jtl-card-grid__card::before {
  content: "";
  flex: 0 0 auto;
  width: 65.42px;
  height: 65.42px;
  background: url(assets/document-code.svg) center / contain no-repeat;
}
/* A card carrying its own icon drops the default tile, so the two never stack.
   The class is set by the JTL Card when its icon field is filled; the icon
   itself is styled by that widget's own sheet. */
.jtl-card-grid__card.jtl-has-icon::before {
  content: none;
}
/* Card copy — the FIRST text takes the 32.71px the design puts between the icon
   and the copy block, and every following one the 16.355px that separates the
   lines of that block. Keyed on position rather than on variant, because a card
   whose only text is a paragraph (no title above it) is a real composition and
   was taking the 16.355px meant for a second line, sitting half a step too close
   to its icon. For the title+copy card both rules land exactly where the old
   per-variant pair did. */
.jtl-card-grid__card > .jtl-text {
  width: 100%;
  margin-top: 32.71px;
  /* Both axes. JTLText is a flex COLUMN with `align-items: flex-start`, so
     text-align alone centres the lines inside a box that is still pinned to the
     card's left edge — a short title then reads as left-aligned over centred
     copy. The atom's own `align` control sets both; this makes a nested text
     that was never given one follow the card anyway. */
  align-items: center;
  text-align: center;
}
.jtl-card-grid__card > .jtl-text + .jtl-text {
  margin-top: 16.355px;
}
/* Card title — reuse the Subline atom, restyled to the navy card heading. */
.jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow {
  color: #0b1b45;
  font-weight: 600;
  font-size: 20.444px;
  line-height: 28.621px;
  letter-spacing: 0;
  text-transform: none;
}
/* Card copy — reuse the Paragraph atom at the smaller card size. */
.jtl-card-grid__card .jtl-text--paragraph .jtl-text__body {
  font-size: 16.355px;
  line-height: 24.533px;
}

/* CTA — the reusable Button atom (Primary variant) owns its own styling; the
   widget only centres it and adds the closing spacing. */
.jtl-card-grid__cta {
  grid-column: 1 / -1;
  margin-top: 32.71px;
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  .jtl-card-grid__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* The band's gutter comes down to the tablet step here rather than at 768,
       which is the width every other band on a page steps at. Held back to 768
       it left this grid 40px narrower than the bands above and below it for the
       whole 768-992 range. */
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 768px) {
  .jtl-card-grid {
    padding-left: 0;
    padding-right: 0;
  }
  .jtl-card-grid__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 24px;
  }
  .jtl-card-grid__card {
    margin-top: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Variant: icon tiles
   Figma JTL-Website-Modules node 6918:1330. The same module — centred header,
   one row of icon cards, closing CTA — with the two grounds inverted: a white
   band carrying sand tiles.

   That frame is a 1440px layout drawn at 1415.14px, so every value below is the
   raw Figma number divided by 0.9827361 and lands on the design system's round
   numbers. The base rules above come from node 132:24726 and were traced at a
   different scale, which is why the two blocks disagree on the last decimal of
   values that mean the same thing (24.533 vs 24).

   Declared after the base block, and every rule carries the variant class, so a
   card grid without it renders exactly the bytes it did before.
   --------------------------------------------------------------------------- */

/* A painted band has to own its vertical space or the page's own ground shows
   above and below it. The base treatment gets away with taking that space from
   the section container because its sand matches the page; a white band does
   not, so the padding is set here rather than on the base rule, where it would
   move every existing instance. */
.jtl-card-grid--icon-tiles {
  background-color: #ffffff;
  padding: var(--jtl-band-space-top, 80px) 64px var(--jtl-band-space-bottom, 80px);
}
.jtl-card-grid--icon-tiles .jtl-card-grid__inner {
  /* 1440 design viewport, so the content box is the 1312px the sibling bands on
     the same page use — not this widget's original 1570. */
  max-width: var(--jtl-band-max, var(--jtl-band-content, 1440px));
  padding: 0;
  --jtl-card-grid-gap: 32px;
}

/* Header — the design stacks overline, headline and intro with no gaps at all;
   their line-heights carry the rhythm. */
.jtl-card-grid--icon-tiles .jtl-card-grid__inner > .jtl-text {
  max-width: 860px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__inner > .jtl-text--paragraph {
  margin-top: 0;
}

/* Opt-in: separate the intro line from the headline. Same weight as the rule
   above, stated after it, so a grid that does not ask for it is unchanged. */
.jtl-card-grid--lead-gap-13 .jtl-card-grid__inner > .jtl-text--paragraph {
  margin-top: 13px;
}

/* Roomier header and card copy rhythm. This stays opt-in because the base
   treatment is reused across pages whose shorter header/copy relationship is
   intentional. The 13px header break follows the existing header-gap step;
   48px gives the default icon and first text block one clear spacing step. */
.jtl-card-grid--spacing-roomy .jtl-card-grid__inner > .jtl-text--subline + .jtl-text--h2 {
  margin-top: 13px;
}
.jtl-card-grid--spacing-roomy .jtl-card-grid__card > .jtl-text:first-child,
.jtl-card-grid--spacing-roomy .jtl-card-grid__card > .jtl-card__icon + .jtl-text {
  margin-top: 48px;
}

/* Opt-in eyebrow seam. The selected instance owns exactly 6px below its
   subline; reset the older roomy H2 margin so the two controls do not add up. */
.jtl-card-grid--eyebrow-gap-6 .jtl-card-grid__inner > .jtl-text--subline {
  margin-bottom: 6px;
}
.jtl-card-grid--eyebrow-gap-6 .jtl-card-grid__inner > .jtl-text--subline + .jtl-text--h2 {
  margin-top: 0;
}

.jtl-card-grid--icon-tiles .jtl-card-grid__card {
  margin-top: 32px;
  padding: 24px;
  background-color: #eeeee7;
  border-radius: 24px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card > .jtl-card__icon {
  width: 64px;
  height: 64px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card > .jtl-text--subline {
  margin-top: 32px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow {
  font-size: 20px;
  line-height: 28px;
}

/* Highlight card — one accented tile, filled with JTL Tech Blue and its icon +
   text inverted to white (the design's single emphasised tile in an icon grid).
   Opt-in via the JTL Card "Highlight" variant; a card without it is unchanged.
   The icon-tiles-scoped background is repeated so it out-orders the sand tile
   rule above at the same specificity. */
.jtl-card-grid__card--feature {
  background-color: #2722f8;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card--feature {
  background-color: #2722f8;
}
.jtl-card-grid__card--feature .jtl-text--subline .jtl-text__eyebrow,
.jtl-card-grid__card--feature .jtl-text--paragraph .jtl-text__body {
  color: #ffffff;
}
/* The highlight tile's icon colour is asserted in the JTL Card stylesheet, next
   to the navy default it has to beat: the two rules carry equal weight and that
   sheet loads after this one, so stating it here loses on source order. */

/* Inverted ground. The two card-grid treatments disagree about which way round
   it goes — the services grid paints a sand band with white tiles, the icon-tile
   grid the reverse — and a design picks per band rather than per treatment. So
   the ground is its own opt-in control; a grid that does not set it keeps the
   one its treatment gives it.

   The highlight tile is excluded rather than out-ordered: it is an accent whose
   whole point is that it does not take the ground the tiles around it do. */
.jtl-card-grid--surface-sand {
  background-color: #eeeee7;
}
.jtl-card-grid--surface-sand .jtl-card-grid__card:not(.jtl-card-grid__card--feature) {
  background-color: #ffffff;
}

/* The design separates the tiles from the CTA by the band's own 32px stack gap
   PLUS the button row's 32px top padding. */
.jtl-card-grid--icon-tiles .jtl-card-grid__cta {
  margin-top: 64px;
}

@media (max-width: 992px) {
  .jtl-card-grid--icon-tiles {
    padding: var(--jtl-band-space-top, 64px) 24px var(--jtl-band-space-bottom, 64px);
  }
}

@media (max-width: 768px) {
  .jtl-card-grid--icon-tiles {
    padding: var(--jtl-band-space-top, 48px) 24px var(--jtl-band-space-bottom, 48px);
  }
  .jtl-card-grid--icon-tiles .jtl-card-grid__inner {
    padding: 0;
  }
  .jtl-card-grid--icon-tiles .jtl-card-grid__cta {
    margin-top: 40px;
  }
}

/* ---------------------------------------------------------------------------
   Opt-in card modifiers.

   Each block is gated on a class the View only emits when the author picked the
   option, so a grid that carries none of them renders exactly the bytes it did
   before these controls existed.
   --------------------------------------------------------------------------- */

/* No icons. The default tile is decorative chrome the grid paints on any card
   without an icon of its own; a grid of plain title+copy cards has to be able to
   say "none", because an empty icon field reads as "not chosen yet". */
.jtl-card-grid--no-icons .jtl-card-grid__card::before {
  content: none;
}
/* The card's first text carries the gap between the ICON and the copy block. A
   card with no icon has nothing above that text to clear, so the margin lands as
   padding: the tile reads a third deeper at the top than at the bottom, and the
   design's 24 all round becomes 56/24. Scoped to :first-child so a card that
   supplies its own icon image still spaces its copy below it. */
.jtl-card-grid--no-icons .jtl-card-grid__card > .jtl-text:first-child {
  margin-top: 0;
}
/* Grid items stretch, so every tile in a row is as tall as the tallest. With an
   icon pinning the block to the top that is right; with no icon the design
   centres the copy in the tile instead of leaving short cards riding high. */
.jtl-card-grid--no-icons .jtl-card-grid__card {
  justify-content: center;
}

/* Left-aligned card text. The card is a flex column with centred items, so both
   the box alignment and the text alignment have to move — pinning only
   text-align leaves a short title centred as a block and left-aligned inside
   itself, which reads as a rendering fault rather than a choice. */
.jtl-card-grid--align-left .jtl-card-grid__card {
  align-items: flex-start;
  text-align: left;
}
.jtl-card-grid--align-left .jtl-card-grid__card > .jtl-text {
  align-items: flex-start;
  text-align: left;
}

/* Larger copy. The base rules trace a 1440px layout drawn at 1415.14px, so their
   numbers carry that scale (24.533, 32.71, 16.355). A grid sitting among bands
   measured at a true 1440 needs the whole-pixel values, and its body at the page
   body size — at 16.355 a card reads a step smaller than the paragraph above it.
   Declared after the base block, so only the last value differs. */
.jtl-card-grid--scale-base .jtl-card-grid__inner {
  column-gap: 32px;
}
.jtl-card-grid--scale-base .jtl-card-grid__card {
  margin-top: 32px;
  padding: 24px;
  border-radius: 24px;
}
.jtl-card-grid--scale-base .jtl-card-grid__card > .jtl-text {
  margin-top: 32px;
}
.jtl-card-grid--scale-base .jtl-card-grid__card > .jtl-text + .jtl-text {
  margin-top: 16px;
}
.jtl-card-grid--scale-base .jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow {
  font-size: 20px;
  line-height: 28px;
}
.jtl-card-grid--scale-base .jtl-card-grid__card .jtl-text--paragraph .jtl-text__body {
  font-size: 18px;
  line-height: 28px;
}
/* A card whose icon is its own image sits at the 64px the design draws; the
   default tile keeps the base size because it belongs to the base treatment. */
.jtl-card-grid--scale-base .jtl-card-grid__card > .jtl-card__icon {
  width: 64px;
  height: 64px;
}
.jtl-card-grid--scale-base .jtl-card-grid__cta {
  margin-top: 32px;
}

@media (max-width: 768px) {
  .jtl-card-grid--scale-base .jtl-card-grid__card {
    margin-top: 24px;
  }
}

/* Header-to-cards gap ------------------------------------------------------
   The space between the header block and the first row of cards is the card's
   own top margin: the cards are grid items placed directly under the header, so
   there is nothing between them to space. The grid's own row-gap is 0 and that
   same margin carries the space between rows, so a step other than 32 also
   opens the gap BETWEEN rows — correct for the single-row bands this exists
   for, and the reason a multi-row grid should stay on the default.

   Gated on a class the View emits only when an author picked a step, so a grid
   without one keeps the margin it always had. */
.jtl-card-grid--header-gap-32 .jtl-card-grid__card {
  margin-top: 32px;
}
.jtl-card-grid--header-gap-46 .jtl-card-grid__card {
  margin-top: 46px;
}
.jtl-card-grid--header-gap-57 .jtl-card-grid__card {
  margin-top: 57px;
}

@media (max-width: 768px) {
  /* Stacked, every card is its own row, so an opened gap would repeat down the
     whole column and read as a broken rhythm rather than a header break. */
  .jtl-card-grid--header-gap-46 .jtl-card-grid__card,
  .jtl-card-grid--header-gap-57 .jtl-card-grid__card {
    margin-top: 24px;
  }
}

/* Band tail ----------------------------------------------------------------
   A statement, a chip row and a closing line below the cards — part of the same
   band in the design, so they belong to this widget rather than to a second
   section stacked under it. Rendered only when the author put something after
   the last card, so no existing grid gains this element.

   Full width and stacked on the design's 32px rhythm; the space above it is the
   same 32 the cards use between rows. */
.jtl-card-grid__tail {
  grid-column: 1 / -1;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.jtl-card-grid__tail > .jtl-text {
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .jtl-card-grid__tail {
    margin-top: 24px;
    gap: 24px;
  }
}

/* Headerless grid ----------------------------------------------------------
   The space between rows is each card's own top margin, which also puts that
   space ABOVE the first row. With a header that is exactly right — it is the
   header gap. With no header it is spacing against nothing, and it lands on top
   of whatever the band already puts above the grid: on the second arrangement of
   the solution band the design's 46px boundary was rendering at 78.

   So a headerless grid moves the same rhythm onto the grid's row-gap, where it
   applies BETWEEN rows and not above the first. The card margin is the only
   thing that changes; the value is unchanged. */
.jtl-card-grid--no-header .jtl-card-grid__inner {
  row-gap: 32px;
}
.jtl-card-grid--no-header .jtl-card-grid__card {
  margin-top: 0;
}

/* The header-gap control has nothing to space when there is no header, so its
   value stays on the row rhythm rather than reappearing above the first row. */
.jtl-card-grid--no-header.jtl-card-grid--header-gap-46 .jtl-card-grid__inner { row-gap: 46px; }
.jtl-card-grid--no-header.jtl-card-grid--header-gap-57 .jtl-card-grid__inner { row-gap: 57px; }
.jtl-card-grid--no-header.jtl-card-grid--header-gap-46 .jtl-card-grid__card,
.jtl-card-grid--no-header.jtl-card-grid--header-gap-57 .jtl-card-grid__card {
  margin-top: 0;
}

@media (max-width: 768px) {
  .jtl-card-grid--no-header .jtl-card-grid__inner {
    row-gap: 24px;
  }
}

/* Band tail — the statement above the chip row -------------------------------
   The design sets it in Inter SemiBold 24/24 on the 860px reading column, a step
   down from the H3 atom's own 28.62/36.8: it closes a band rather than opening
   one. Scoped to the tail, so the atom is unchanged everywhere else. */
.jtl-card-grid__tail > .jtl-text--h3 {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* The design's text area holds an overline above this statement and leaves it
   empty, so the statement starts one 24px line below the top of the tail — 56
   from the cards, not the band's own 32. Drawn that way in both bands that use
   this component, so it is the component's lead-in rather than one page's
   nudge. Only when the statement LEADS the tail: whatever follows it sits on
   the plain 32 step, which is what the design draws for the chip row and the
   closing line. */
.jtl-card-grid__tail > .jtl-text--h3:first-child {
  margin-top: 24px;
}
.jtl-card-grid__tail .jtl-text--h3 .jtl-text__heading {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .jtl-card-grid__tail .jtl-text--h3 .jtl-text__heading {
    font-size: 20px;
    line-height: 28px;
  }
  /* The reserved line is a desktop measure. Stacked, the tail is already on the
     tighter 24 step and the design draws no phone board for this band, so the
     statement keeps that step rather than gaining a second one. */
  .jtl-card-grid__tail > .jtl-text--h3:first-child {
    margin-top: 0;
  }
}

.jtl-card-grid--tiles-linked .jtl-card-grid__inner {
  grid-template-columns: repeat(var(--jtl-card-grid-cols, 4), minmax(0, 1fr));
  gap: 32px;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card {
  position: relative;
  margin-top: 0;
  padding: 24px 24px 18px;
  min-height: 180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "title   icon"
    ".       ."
    "partner ."
    "foot    arrow";
  column-gap: 16px;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card::before {
  content: none;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card > .jtl-card__icon {
  grid-area: icon;
  justify-self: end;
  margin: 0;
  width: 28px;
  height: 28px;
  font-size: 28px;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card > .jtl-card-grid__tile-title {
  grid-area: title;
  align-self: center;
  margin-top: 0;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__tile-title .jtl-text__eyebrow {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card > .jtl-card-grid__tile-foot {
  grid-row: 4;
  grid-column: 1 / -1;
  align-self: center;
  width: auto;
  margin-top: 0;
  padding-right: 28px;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__tile-foot .jtl-text__body {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card > .jtl-card-grid__tile-partner {
  position: relative;
  grid-row: 3 / 5;
  grid-column: 1;
  align-self: end;
  margin-top: 0;
  padding-bottom: 28px;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__tile-partner .jtl-text__body {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: #fff;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__tile-partner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.jtl-card-grid--tiles-linked .jtl-card-grid__card.jtl-card--linked::after {
  content: "";
  grid-area: arrow;
  align-self: center;
  width: 46px;
  height: 28px;
  background-color: #fb581f;
  -webkit-mask-image: url(assets/tile-arrow.svg);
  mask-image: url(assets/tile-arrow.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-size: 16px 13px;
  mask-size: 16px 13px;
}

@media (max-width: 1199px) {
  .jtl-card-grid--tiles-linked .jtl-card-grid__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .jtl-card-grid--tiles-linked .jtl-card-grid__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

body:has(.jtl-sub-navigation) .jtl-card-grid:not(.jtl-card-grid--icon-tiles):not(.jtl-band-width-page):not(.jtl-band-width-full) .jtl-card-grid__inner {
  max-width: var(--jtl-shell-max, 1600px);
  padding-left: var(--jtl-shell-content-gutter, 66px);
  padding-right: var(--jtl-shell-content-gutter, 66px);
}