/* =============================================================================
   TOPS PICKLES — this product's sections only.

   Loaded AFTER common.css, so anything here wins on ties and no !important
   is ever needed to override a shared rule.

   Use the pk- prefix on every class. All three products share common.css, so
   an unprefixed .hero or .card would collide with the other two.
   ========================================================================== */

/* This product's palette. Set these once and reference them below rather
   than repeating hex codes through the file. */
.pk-placeholder,
[class^="pk-"],
[class*=" pk-"] {
  --pk-red: #E8202A;
  --pk-red-deep: #7E060C;
  --pk-accent: #FFD84D;
}



/* --- 01 PK HERO -----------------------------------------------------------
   The scene is one image; only the copy sits on top of it.

   The stage locks to the scene image's aspect ratio and every position below
   is a percentage of the stage, so the copy stays exactly where you place it
   against the artwork at any width.

   Two things break that if you get them wrong:

     --pk-ratio   must equal the scene image's real aspect ratio. Wrong, and
                  the stage is a different shape from the picture, cover()
                  crops it, and the text drifts off the blob.
     --pk-w       keep at or below 100%. Above that the copy is wider than
                  the box it is positioned inside.

   Type is sized in cqw, not vw. The stage stops growing at its max width;
   vw does not, so the headline would keep swelling past the artwork. cqw
   measures the stage itself.

   All tuning is in the variable block. No rule below it needs editing to
   reposition the copy.
   ------------------------------------------------------------------------- */
.pk-hero {
  --pk-scene: url('images/pickle-banner-bg.webp');
  --pk-ratio: 4 / 5;

  --pk-y: 6%;                 /* copy block: distance from the top */
  --pk-blob-w: 310px;         /* the red blob */
  --pk-blob-h: 190px;

  --pk-lead: 1.5;
  --pk-mark: 0.85em;
  --pk-gap:  0.35em;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #F3EFE9;
  height: 400px;
  margin-top: 63px;
}

.pk-hero__stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  /* height is set above, so aspect-ratio would only fight it */
  background-image: var(--pk-scene);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



.pk-hero__copy {
  position: absolute;
  left: 50%;
  top: var(--pk-y);
  translate: -50% 0;
  z-index: 2;

  width: var(--pk-blob-w);
  height: var(--pk-blob-h);
  /* Never wider than the stage, whatever --pk-blob-w says */
  max-width: 92%;

  display: grid;
  place-items: center;

  background-image: url('images/banner-circle.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* margin: 0 matters. A browser gives h1 a default margin AND font-size: 2em,
   so an inherited cqw value would render at twice the intended size and the
   block would sit lower than placed. */
.pk-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  color: #FFFFFF;
  /* Keeps the white readable where the blob's red is lightest */
  text-shadow: 0 2px 10px rgba(120, 6, 10, 0.35);
}

/* Each line is its own flex row, so an ornament sits against the words
   rather than against the block. Positioning them absolutely instead would
   mean re-tuning every one whenever the copy or the type size changed. */
.pk-hero__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-gap);
}

/* ---- Ornaments -----------------------------------------------------------
   Width in em, so they scale with the type they flank — one number to
   change, not two kept manually in step.

   flex: none, or a long line squashes them before it wraps.
   ------------------------------------------------------------------------- */

.pk-hero__mark {
    flex: none;
    width: 24px;
    height: auto;
    color: transparent;
    font-size: 0;
    margin-top: 4px;
}
.pk-hero__mark--r{
  transform: scaleX(-1);
}

/* The small sparkles read better slightly higher and smaller than the
   swirls, which sit on the same optical line as the words. */
.pk-hero__mark--star {
    width: 24px;
    align-self: flex-start;
    margin-top: 0.15em;
    position: absolute;
    left: -20px;
    top: 5px;
}
.pk-hero__mark.pk-hero__mark--r.pk-hero__mark--star {
    left: auto;
    right: -30px;
    top: auto;
    bottom: 12px;
}
.pk-hero__line.dot-anime{
  position: relative;
}
.dot-anime .pk-hero__mark.pk-hero__mark--l {
    width: 46px;
    position: absolute;
    left: -20px;
    top: -20px;
}
.dot-anime .pk-hero__mark.pk-hero__mark--r {
    width: 46px;
    position: absolute;
    right: -20px;
    top: -20px;
}

/* Nudges, if a particular ornament needs to sit tighter or looser than the
   shared gap. Left as zero so nothing moves until you want it to. */
.pk-hero__mark--l { margin-right: 0; }
.pk-hero__mark--r { margin-left: 0; }

/* ---- 48em and up: the wide scene ---------------------------------------- */

@media (min-width: 48em) {
  .pk-hero {
    --pk-scene: url('images/pickle-banner-bg.webp');
    --pk-ratio: 1500 / 1600;   /* MUST match the landscape export */

    --pk-x: 14%;
    --pk-y: 20%;
    --pk-w: 58%;

    --pk-size: 3.4cqw;
    --pk-mark: 0.8em;
  }
}

/* Browsers without container queries fall back to viewport sizing. Close
   enough, because the stage is full-bleed at these widths. */
@supports not (container-type: inline-size) {
  .pk-hero__title { font-size: clamp(0.95rem, 5.6vw, 2.2rem); }
}


/* --- 02 PK USP ------------------------------------------------------------
   Red band, wave cut into the top edge, three claims as a carousel.

   Card width comes from --visible: the number of cards on screen. The
   fractional part is the peek — 1.15 shows one card plus a sliver of the
   next, so there is always a visible cue that the row continues.
   ------------------------------------------------------------------------- */

.pk-usp {
  --pk-u-red:  #E8151B;
  --pk-u-gold: #F5C15A;
  --pk-u-wave: #FFFFFF;       /* must match whatever sits ABOVE this section */

  --pk-u-wave-h: clamp(2.5rem, 9vw, 6rem);
  --pk-u-spread-h: clamp(4.5rem, 22vw, 11rem);

  /* Cards on screen. The fraction is the peek: 2.4 shows two whole cards
     plus 40% of the third.

     That 40% is doing real work — a card cut off mid-way is the clearest
     signal there is that the row continues. A whole number would leave the
     row looking complete and most people would never swipe it. */
  --visible: 2.4;
  --card-gap: clamp(0.4rem, 2.5vw, 0.9rem);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Top padding clears the wave, bottom clears the produce spread. Without
     them the cards would sit underneath both. */
  padding-block: calc(var(--pk-u-wave-h) + clamp(0.75rem, 4vw, 2rem))
                 var(--pk-u-spread-h);
  background: var(--pk-u-red);
}

/* ---- Wave -----------------------------------------------------------------
   Filled with the colour of the section above, so it reads as that section
   spilling down rather than a shape sitting on the red.
   ------------------------------------------------------------------------- */

.pk-usp__wave {
  position: absolute;
  top: -1px;                  /* covers the hairline some engines leave */
  left: 0;
  right: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: var(--pk-u-wave-h);
  fill: var(--pk-u-wave);
  pointer-events: none;
}

/* ---- Corner foliage -------------------------------------------------------- */

.pk-usp__leaves {
  position: absolute;
  inset: 0;
  z-index: 1;                 /* behind the cards, above the flat red */
  pointer-events: none;
  overflow: hidden;
}

.pk-usp__leaf {
  position: absolute;
  width: clamp(4.5rem, 20vw, 10rem);
  height: auto;
  /* No alt text sprawl while the file loads */
  color: transparent;
  font-size: 0;
}

/* Percentages, not pixels: these hold their place at every width */
.pk-usp__leaf--tl { top: -2%; left: -3%; opacity: 0.8;animation: pk-leaf-flow-tl 5s ease-in-out infinite;    will-change: transform; }

/* The same file, turned over for the opposite corner. scale, not
   transform: scale() — separate properties, so nothing later can cancel it. */
.pk-usp__leaf--tr { transform: scaleX(-1); top: 0%; right: -3%; opacity: 0.8;  animation: pk-leaf-flow-tr 5s ease-in-out infinite;    will-change: transform; }


@keyframes pk-leaf-flow-tl {    0%,    100% {        transform: translate(0, 0) rotate(0deg);    }     50% {        transform: translate(12px, 18px) rotate(3deg);    }} @keyframes pk-leaf-flow-tr {    0%,    100% {        transform: scaleX(-1) translate(0, 0) rotate(0deg);    }     50% {        transform: scaleX(-1) translate(12px, 18px) rotate(-3deg);    }}




/* ---- Carousel ---------------------------------------------------------------- */

.pk-usp__carousel {
  position: relative;
  z-index: 2;                 /* over the foliage */
}

.pk-usp__track {
  display: flex;
  align-items: stretch;
  gap: var(--card-gap);
  margin: 0;
  /* Snap lands the card flush with the gutter rather than the raw edge */
  scroll-padding-inline: var(--gutter, 1rem);
  padding-inline: var(--gutter, 1rem);
  padding-block: 0.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* the arrows are the affordance */
}

.pk-usp__track::-webkit-scrollbar { display: none; }

.pk-usp__track:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
  border-radius: 12px;
}

/* ---- One card -------------------------------------------------------------------
   100% is the track's content box, so the gutters are already excluded and
   the peek maths stays honest at every width.
   ------------------------------------------------------------------------- */

.pk-usp__item {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--card-gap)) / var(--visible));
  scroll-snap-align: start;

  display: grid;
  /* Two rows fixed by content, so every icon sits on one line and every
     label starts on another — however uneven the labels are. */
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(0.4rem, 2vw, 0.8rem);
  padding: clamp(0.8rem, 4vw, 1.5rem) clamp(0.3rem, 1.5vw, 0.75rem);
  text-align: center;

  /* A hairline edge, so a card reads as a card against the red without
     introducing a second colour */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: clamp(10px, 3vw, 16px);
}

.pk-usp__icon {
  /* Narrower now that three cards share the width instead of one */
  width:clamp(3.75rem, 26vw, 6.5rem);
  height: auto;
  color: transparent;
  font-size: 0;
}

.pk-usp__label {
  margin: 0;
  font-family: var(--font-display);
  font-size:clamp(0.68rem, 4.1vw, 1.05rem);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
}

/* ---- Arrows ----------------------------------------------------------------------- */

.pk-usp__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(1.9rem, 8vw, 2.6rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--pk-u-red);
  box-shadow: 0 8px 20px -8px rgba(60, 2, 6, 0.6);
  cursor: pointer;
  transition: background-color var(--dur-fast, 180ms) var(--ease, ease),
              color var(--dur-fast, 180ms) var(--ease, ease),
              opacity var(--dur-fast, 180ms) var(--ease, ease);
}

.pk-usp__nav svg {
  width: 45%; height: 45%;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.pk-usp__nav--prev { left: 0.4rem; }
.pk-usp__nav--next { right: 0.4rem; }

@media (hover: hover) {
  .pk-usp__nav:hover { background: var(--pk-u-gold); color: var(--pk-u-red); }
}

/* At either end the button dims but stays put. Removing it would shift the
   other one and jump the layout. */
.pk-usp__nav[disabled] { opacity: 0.35; pointer-events: none; }

/* carousel.js adds is-complete when every card already fits, and .no-js
   stays if the script never ran — in both cases the track is still
   swipeable, so the arrows would be decoration. */
.no-js .pk-usp__nav,
.pk-usp__carousel.is-complete .pk-usp__nav { display: none; }

/* ---- Cards on screen at each width -----------------------------------------------
   The peek is kept at every step. Six cards never all fit, so the arrows
   stay useful right up to the widest screen — which is why there is no
   whole number here.
   ------------------------------------------------------------------------- */

@media (min-width: 30em) { .pk-usp { --visible: 3.4; } }
@media (min-width: 48em) { .pk-usp { --visible: 4.4; } }
@media (min-width: 62em) { .pk-usp { --visible: 5.4; } }

/* ---- Produce spread ----------------------------------------------------------------
   Anchored to the bottom edge and allowed to overflow the sides, so the
   drawing keeps its own proportions instead of being squashed to fit. The
   section's overflow: hidden trims whatever hangs past.
   ------------------------------------------------------------------------- */

.pk-usp__spread {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  width: 100%;
  min-width: 30rem;           /* below this the drawing loses its detail */
  height: auto;
  pointer-events: none;
  color: transparent;
  font-size: 0;
}


/* --- 03 PK RECIPES --------------------------------------------------------
   Three cards with a gradient that sweeps around the border.

   HOW THE BORDER WORKS

   Nothing here is a `border` property — those cannot carry a gradient, let
   alone an animated one. Instead each card is two layers:

     .pk-rec__card   holds the moving gradient and a few pixels of padding
     .pk-rec__face   sits on top of it, inset by that padding

   The padding is the only part of the gradient left visible, and that rim
   reads as the border. Animating it is then just animating the layer
   underneath.

   The gradient itself is a conic-gradient on a square larger than the card,
   spun with `rotate`. Rotating a transform is cheap and runs on the
   compositor; animating gradient stops or a custom property is neither, and
   custom properties cannot animate at all without @property, which is still
   missing from older Safari and Firefox.
   ------------------------------------------------------------------------- */

.pk-rec {
  --pk-r-red:   #E8151B;
  --pk-r-deep:  #A5121A;
  --pk-r-gold:  #F5C15A;
  --pk-r-glow:  #FF7A6B;

  --pk-r-edge:  2px;          /* border thickness */
  --pk-r-round: clamp(10px, 3vw, 18px);
  --pk-r-spin:  4.5s;         /* one full sweep */

  padding-block: clamp(1.5rem, 7vw, 3rem);
  background: #FFFFFF;
}

.pk-rec__inner {
    width: 100%;
    max-width: var(--container, 75rem);
    margin-inline: auto;
    padding: 0 10px;
}

.pk-rec__title {
  margin: 0 0 clamp(1rem, 4.5vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--pk-r-red);
}

.pk-rec__grid {
  display: grid;
  /* minmax(0,…) matters: without it a grid column will not shrink below its
     content, and the longest recipe name would push the third card off the
     screen on a narrow phone. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- The card, and its moving border -------------------------------------- */

.pk-rec__card {
  position: relative;
  isolation: isolate;
  /* This padding is the border. Everything inside sits on top of the
     gradient; only this rim of it stays visible. */
  padding: var(--pk-r-edge);
  border-radius: var(--pk-r-round);
  /* Seen through the gradient's transparent stops, and stands in entirely
     where conic-gradient is unsupported */
  background: var(--pk-r-red);
  overflow: hidden;
}

.pk-rec__card::before {
  content: '';
  position: absolute;
  z-index: 0;
  /* A square wider than the card's diagonal, so no corner is ever left
     uncovered as it turns. 150% of the longer side is comfortably enough. */
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    var(--pk-r-deep) 0deg,
    var(--pk-r-red) 60deg,
    var(--pk-r-glow) 110deg,
    var(--pk-r-gold) 150deg,
    var(--pk-r-glow) 190deg,
    var(--pk-r-red) 250deg,
    var(--pk-r-deep) 330deg,
    var(--pk-r-deep) 360deg
  );
  animation: pk-rec-spin var(--pk-r-spin) linear infinite;
  /* rotate is a separate property from translate above, so the two never
     overwrite one another — which they would if both were transforms */
  will-change: rotate;
}

@keyframes pk-rec-spin {
  to { rotate: 360deg; }
}

/* The face. Opaque, so it hides everything but the rim. */
.pk-rec__face {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* The inner radius must be the outer one minus the rim, or the corners
     look thicker than the sides */
  border-radius: calc(var(--pk-r-round) - var(--pk-r-edge));
  background: #FFFFFF;
}

/* ---- Photograph -------------------------------------------------------------
   A fixed ratio, so three cards line up whatever their images measure.
   ------------------------------------------------------------------------- */

.pk-rec__shot {
    aspect-ratio: 4 / 3;
    background: #EDEDEF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pk-rec__shot img {
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ---- Caption ---------------------------------------------------------------- */

.pk-rec__name {
    margin: 0;
    padding: clamp(0.5rem, 2.5vw, 0.9rem) clamp(0.4rem, 2vw, 1rem);
    background: var(--pk-r-red);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    min-height: 85px;
}

.pk-rec__with {
  display: block;
  font-weight: 700;
}

/* ---- Hover: quicken the sweep ------------------------------------------------
   The card is not a link, so this is decoration rather than affordance —
   which is why it stays subtle.
   ------------------------------------------------------------------------- */

@media (hover: hover) {
  .pk-rec__card:hover::before { animation-duration: 1.6s; }
}

/* ---- Reduced motion -----------------------------------------------------------
   The sweep stops, and the rim settles into a still gradient rather than
   vanishing — the border is part of the design, only its movement was
   optional.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pk-rec__card::before {
    animation: none;
    background: linear-gradient(135deg,
      var(--pk-r-deep), var(--pk-r-gold), var(--pk-r-red));
  }
}



/* --- 04 PK DID YOU KNOW ---------------------------------------------------
   Red band, corner produce, three numbered facts.

   THE LAYOUT RULE

   Two columns, and if the last item finds itself alone on its row it spans
   both and centres. That is one rule, and it keeps working as the list
   grows: three cards give 2 + 1 centred, four give 2 + 2, five give 2 + 2 +
   1 centred. Nothing to change in the markup either way.

   :nth-child(odd) is what detects "alone on the row" — in a two-column grid
   the odd-numbered items are the ones that start a row, so an odd item that
   is also the last has no neighbour beside it.
   ------------------------------------------------------------------------- */

.pk-dyk {
  --pk-d-red:   #E8151B;
  --pk-d-cream: #FBF0E4;
  --pk-d-gold:  #F5C15A;

  --pk-d-disc: clamp(6.5rem, 34vw, 11rem);   /* the circle */
  --pk-d-rule: rgba(255, 255, 255, 0.75);    /* the dotted divider */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.75rem, 8vw, 3.5rem);
  background: var(--pk-d-red);
}

/* ---- Corner produce -------------------------------------------------------
   Percentages, not pixels, so they hold their place at every width. They sit
   behind the copy but above the flat red.
   ------------------------------------------------------------------------- */

.pk-dyk__corners {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.pk-dyk__corner {
    position: absolute;
    width: clamp(5rem, 50vw, 15rem);
    height: auto;
    color: transparent;
    font-size: 0;
    opacity: 0.5;
}

.pk-dyk__corner--l { top: 0; left: 0; }
.pk-dyk__corner--r { bottom: 0; right: 0; }

/* ---- Copy ------------------------------------------------------------------ */

.pk-dyk__inner {
  position: relative;
  z-index: 2;                 /* over the corner artwork */
  width: 100%;
  max-width: var(--container, 75rem);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 4vw, 2rem);
}

/* Flex, so the flourishes sit against the words rather than against the
   heading box — they stay put however the type scales. */
.pk-dyk__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 3vw, 1.25rem);
    margin: 0 0 clamp(1.25rem, 6vw, 2.25rem);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 6.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    padding: 15px 0;
}

/* em, so a flourish scales with the type it flanks — one number to change
   rather than two kept manually in step. flex:none, or a long heading
   squashes them. */
.pk-dyk__flourish {
  flex: none;
  width: clamp(2rem, 12vw, 4.5rem);
  height: auto;
  color: transparent;
  font-size: 0;
}
.arw-scnd{
  transform: scaleX(-1);
}

/* ---- Grid ------------------------------------------------------------------- */

.pk-dyk__grid {
  display: grid;
  /* minmax(0,…) matters: without it a column refuses to shrink below its
     content, and the longest sentence would push the layout wider than the
     screen. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 6vw, 2.5rem) 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.pk-dyk__item {
  display: grid;
  /* Two rows fixed by content, so every circle sits on one line and every
     paragraph starts on another — however uneven the sentences are. */
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: center;
  gap: clamp(0.75rem, 3.5vw, 1.25rem);
  padding-inline: clamp(0.6rem, 3vw, 1.5rem);
  text-align: center;
}

/* The dotted divider. A border on the item itself, so it follows the grid
   automatically instead of being a separate element that falls out of step
   when the row wraps. Only items in the second column get one. */
.pk-dyk__item:nth-child(even) {
  border-left: 2px dotted var(--pk-d-rule);
}

/* The odd one out: spans both columns and centres.
   Also drops the divider, since it now starts a row of its own. */
.pk-dyk__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(100%, 22rem);
  margin-inline: auto;
  border-left: 0;
}

/* ---- The circle -------------------------------------------------------------- */

.pk-dyk__disc {
  position: relative;         /* the number badge anchors to this */
  display: grid;
  place-items: center;
  width: var(--pk-d-disc);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pk-d-cream);
  /* The white ring sitting off the cream. box-shadow rather than a border,
     because a border would eat into the circle's own diameter and shrink
     the icon with it. */
  box-shadow: 0 0 0 3px var(--pk-d-red), 0 0 0 5px #FFFFFF;
}

.pk-dyk__icon {
  width: 62%;
  height: auto;
  color: transparent;
  font-size: 0;
}

/* Sits on the rim, top right. Percentages of the disc, so it tracks the
   circle's edge at every size. */
.pk-dyk__num {
    position: absolute;
    top: -6%;
    right: -2%;
    display: grid;
    place-items: center;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--pk-d-cream);
    box-shadow: 0 0 0 3px #E8151B;
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 4vw, 1.35rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pk-d-red);
}
/* ---- Text --------------------------------------------------------------------- */

.pk-dyk__text {
  margin: 0;
  font-family: var(--font-display);
  font-size:clamp(0.8rem, 3.8vw, 1.05rem);
  font-weight: 700;
  line-height: 1.45;
  color: #FFFFFF;
  text-wrap: pretty;          /* avoids a single word on the last line */
}

/* ---- Wider screens ------------------------------------------------------------
   Three across, which is what the design shows and what the space allows
   once the sentences stop wrapping so hard. The centring rule stops
   applying because nothing is left alone on a row.
   ------------------------------------------------------------------------- */

@media (min-width: 60em) {
  .pk-dyk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pk-dyk__item:nth-child(even) { border-left: 0; }

  /* In three columns the dividers belong before the 2nd and 3rd of each row */
  .pk-dyk__item:not(:nth-child(3n + 1)) {
    border-left: 2px dotted var(--pk-d-rule);
  }

  .pk-dyk__item:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }
}

.gg-entry{
  padding: 20px 0;
}