/* ==========================================================================
   Beyond the Table - page styling
   Direction: Mediterranean Grove (Threshold composition)
   Ground #F1EDE3 / Surface #FFFFFF / Stone #D6D1C4 / Ink #0B1320
   Accent #566246 (deep olive) / Accent 2 #A3A380 (sage)
   Scoped to .page-id-669 so nothing here leaks into the rest of the site.
   ========================================================================== */

.page-id-669 {
  --bt-cream: #F1EDE3;
  --bt-surface: #FFFFFF;
  --bt-stone: #D6D1C4;
  --bt-ink: #0B1320;
  --bt-ink-soft: #4A5260;
  --bt-olive: #566246;
  --bt-sage: #A3A380;
  --bt-radius: 10px;
  --bt-ease: cubic-bezier(.2, .7, .3, 1);
}

/* Kadence pads the content wrapper 32px from the header. The hero is
   full-bleed and should meet the nav directly, with no cream sliver. */
.page-id-669 .entry-content-wrap {
  padding-top: 0;
}

/* ==========================================================================
   1. HERO
   The hero scrolls away normally. It was pinned with position:sticky, which
   left the video showing through at the very bottom of the page.
   ========================================================================== */

.page-id-669 .bt-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The hero fills the screen below the site header, never more.
   --bt-header-h is measured by beyond.js; the fallback covers no-JS. */
.page-id-669 .bt-hero > .kt-row-column-wrap {
  min-height: calc(100vh - var(--bt-header-h, 180px));
}

@supports (height: 100svh) {
  .page-id-669 .bt-hero > .kt-row-column-wrap {
    min-height: calc(100svh - var(--bt-header-h, 180px));
  }
}

.page-id-669 .bt-hero .kb-blocks-bg-video-container,
.page-id-669 .bt-hero video {
  transform-origin: 62% 46%;
  will-change: transform;
}

.page-id-669 .bt-hero video {
  object-fit: cover;
}

.page-id-669 .bt-hero-copy {
  will-change: opacity, transform;
}

.page-id-669 .bt-hero h1 {
  max-width: 16ch;
  text-wrap: balance;
}

.page-id-669 .bt-hero .bt-hero-sub {
  max-width: 46ch;
}

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

.page-id-669 .kb-button {
  transition: background-color .3s var(--bt-ease),
              color .3s var(--bt-ease),
              border-color .3s var(--bt-ease),
              transform .3s var(--bt-ease);
}

.page-id-669 .kb-button:hover {
  transform: translateY(-2px);
}

/* Ghost button over photography keeps a visible stroke for contrast. */
.page-id-669 .kb-button.bt-btn-ghost {
  border: 1.5px solid rgba(241, 237, 227, .72);
  background: transparent;
  backdrop-filter: blur(4px);
}

.page-id-669 .kb-button.bt-btn-ghost:hover,
.page-id-669 .kb-button.bt-btn-ghost:focus-visible {
  background: var(--bt-cream);
  color: var(--bt-ink);
  border-color: var(--bt-cream);
}

.page-id-669 .kb-button.bt-btn-solid {
  border: 1.5px solid #566246;
}

.page-id-669 .kb-button.bt-btn-solid:hover,
.page-id-669 .kb-button.bt-btn-solid:focus-visible {
  background: var(--bt-cream);
  color: var(--bt-ink);
  border-color: var(--bt-cream);
}

/* ==========================================================================
   3. TOPIC TILES
   Name only. The tile is one horizontal bar: name left, arrow right.
   ========================================================================== */

.page-id-669 .kb-row-layout-idbt-topics-grid-v2 > .kt-row-column-wrap,
.page-id-669 .kb-row-layout-idbt-streams-v2 > .kt-row-column-wrap {
  align-items: stretch;
}

.page-id-669 .bt-topic-tile,
.page-id-669 .bt-stream {
  align-self: stretch;
  height: 100%;
  transition: transform .45s var(--bt-ease);
}

.page-id-669 .bt-topic-tile > .kt-inside-inner-col,
.page-id-669 .bt-stream > .kt-inside-inner-col {
  height: 100%;
}

/* The tile names are centred in the block editor, so the tile centres too:
   no right-hand arrow to fight the alignment. */
.page-id-669 .bt-topic-tile > .kt-inside-inner-col {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  transition: background-color .45s var(--bt-ease),
              border-color .45s var(--bt-ease);
}

.page-id-669 .bt-topic-tile:hover > .kt-inside-inner-col,
.page-id-669 .bt-topic-tile:focus-within > .kt-inside-inner-col {
  background-color: var(--bt-olive);
  border-color: var(--bt-olive);
}

.page-id-669 .bt-topic-tile:hover,
.page-id-669 .bt-topic-tile:focus-within {
  transform: translateY(-4px);
}

.page-id-669 .bt-topic-tile .wp-block-kadence-advancedheading {
  transition: color .45s var(--bt-ease), transform .45s var(--bt-ease);
}

.page-id-669 .bt-topic-tile:hover .wp-block-kadence-advancedheading,
.page-id-669 .bt-topic-tile:focus-within .wp-block-kadence-advancedheading {
  color: var(--bt-cream) !important;
  transform: scale(1.04);
}

/* ==========================================================================
   4. STREAM PANELS (three equal cards)
   ========================================================================== */

.page-id-669 .bt-stream {
  overflow: hidden;
  border-radius: var(--bt-radius);
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  /* A gentle overshoot so the card lands rather than glides. */
  transition: transform .4s cubic-bezier(.34, 1.28, .5, 1);
}

.page-id-669 .bt-stream > .kt-inside-inner-col {
  min-height: 440px;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  z-index: 2;
}

/* The whole card pops forward, photograph and text together and in
   proportion. Nothing is re-cropped inside a fixed frame, so the image
   never shifts or reflows under the text. */
.page-id-669 .bt-stream:hover,
.page-id-669 .bt-stream:focus-within {
  transform: translateY(-9px) scale(1.02);
  z-index: 3;
}

/* The CTA rule draws itself out on hover. */
.page-id-669 .bt-stream .bt-stream-cta {
  position: relative;
  padding-top: 15px;
  padding-right: 2px;
  margin-top: 10px;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}

.page-id-669 .bt-stream .bt-stream-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(241, 237, 227, .5);
  transform: scaleX(.34);
  transform-origin: left;
  transition: transform .6s var(--bt-ease);
}

.page-id-669 .bt-stream:hover .bt-stream-cta::before {
  transform: scaleX(1);
}

.page-id-669 .bt-stream .bt-stream-cta::after {
  content: " \2192";
  display: inline-block;
  transition: transform .45s var(--bt-ease);
}

.page-id-669 .bt-stream:hover .bt-stream-cta::after {
  transform: translateX(6px);
}

/* ==========================================================================
   5. POST LOOPS
   ========================================================================== */

.page-id-669 .kadence-post-image,
.page-id-669 .post-thumbnail {
  overflow: hidden;
  border-radius: var(--bt-radius);
}

.page-id-669 .kb-post-list-item img {
  border-radius: var(--bt-radius);
  transition: transform 1.1s var(--bt-ease);
}

.page-id-669 .kb-post-list-item:hover img {
  transform: scale(1.05);
}

.page-id-669 .kb-post-list-item .entry-title a {
  transition: color .3s var(--bt-ease);
}

.page-id-669 .kb-post-list-item:hover .entry-title a {
  color: var(--bt-olive);
}

/* "Latest from the table" queries four devotionals so tablets can show a
   4-up row. Desktop and phones keep the three they had, so the fourth is
   dropped at both ends of the range and shown only in between.

   Kadence's posts block only offers 1 or 3 tablet columns when the desktop
   count is 3 (it falls back to grid-sm-col-2), so the 4-up row is set here
   rather than in the block's own settings. */
@media (min-width: 1025px) {
  .page-id-669 .bt-devo-loop > li:nth-child(4) {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page-id-669 ul.bt-devo-loop {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Four across on a tablet is a narrow column; ease the titles down. */
  .page-id-669 .bt-devo-loop .entry-title {
    font-size: 17px;
    line-height: 1.22;
  }
}

@media (max-width: 767px) {
  .page-id-669 .bt-devo-loop > li:nth-child(4) {
    display: none;
  }
}

/* Recipe rail closing the page: photo-forward cards, sized for four across. */
.page-id-669 .bt-recipe-loop .entry-title {
  font-size: 19px !important;
  line-height: 1.24 !important;
  letter-spacing: -.3px;
  margin: 14px 0 0;
}

.page-id-669 .bt-recipe-loop .entry-taxonomies,
.page-id-669 .bt-recipe-loop .category-links {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .page-id-669 .bt-recipe-loop .entry-title {
    font-size: 20px !important;
  }
}

/* ==========================================================================
   6. THE SHELF
   A horizontal rail of covers rather than a grid, so a growing review
   collection reads as a shelf you scan sideways.
   ========================================================================== */

.page-id-669 ul.kb-posts-id-bt-shelf-posts {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 34px 0 0;
  padding: 0 4px 16px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--bt-stone) transparent;
}

.page-id-669 ul.kb-posts-id-bt-shelf-posts::-webkit-scrollbar {
  height: 7px;
}

.page-id-669 ul.kb-posts-id-bt-shelf-posts::-webkit-scrollbar-thumb {
  background: var(--bt-stone);
  border-radius: 999px;
}

.page-id-669 ul.kb-posts-id-bt-shelf-posts > li {
  flex: 0 0 246px;
  max-width: 246px;
  margin: 0;
  scroll-snap-align: start;
  background: var(--bt-surface);
  border: 1px solid var(--bt-stone);
  border-radius: var(--bt-radius);
  padding: 14px;
  transition: transform .45s var(--bt-ease), border-color .4s var(--bt-ease);
}

.page-id-669 ul.kb-posts-id-bt-shelf-posts > li:hover {
  transform: translateY(-6px);
  border-color: var(--bt-olive);
}

/* Shelf cards carry no titleFont of their own, so the loop inherits the
   theme's full-size post heading. Size it for a 246px card instead. */
.page-id-669 .bt-shelf-rail .entry-title {
  font-size: 17px !important;
  line-height: 1.24 !important;
  letter-spacing: -.2px;
  margin: 12px 0 0;
}

.page-id-669 .bt-shelf-rail .entry-taxonomies,
.page-id-669 .bt-shelf-rail .category-links {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Covers stand upright on a shelf. Kadence sizes its ratio box with
   padding-bottom on the anchor, so that has to be released first. */
.page-id-669 .bt-shelf-rail .post-thumbnail {
  padding-bottom: 0 !important;
  height: auto !important;
}

.page-id-669 .bt-shelf-rail .post-thumbnail-inner {
  position: relative;
  aspect-ratio: 3 / 4;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  border-radius: var(--bt-radius);
}

.page-id-669 .bt-shelf-rail .post-thumbnail-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   7. SHELF EMPTY STATE
   Markup comes from a render_block filter in the sandbox loader, so it is
   a composed panel rather than Kadence's bare "No posts" line.
   ========================================================================== */

.page-id-669 .bt-shelf-empty {
  margin-top: 34px;
  padding: 30px 28px;
  border: 1px dashed var(--bt-stone);
  border-radius: var(--bt-radius);
  background: rgba(255, 255, 255, .55);
  color: var(--bt-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 52ch;
}

/* Grow's in-content recommendation slot reserves 548px whether or not it
   has anything to show, leaving a hole above the footer. Collapse it only
   while it is genuinely empty; the space returns the moment Grow fills it. */
.page-id-669 #grow-me-in-content-recs-root:empty {
  /* Grow sets min-height and margin inline, so this has to outrank them. */
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* ==========================================================================
   8. SUBSCRIBE CARD
   ========================================================================== */

.page-id-669 .bt-subscribe .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   9. REVEALS
   Elements render visible unless the script confirms it can undo them.
   ========================================================================== */

html.bt-anim .page-id-669 .bt-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--bt-ease), transform .75s var(--bt-ease);
}

html.bt-anim .page-id-669 .bt-reveal.bt-in {
  opacity: 1;
  transform: none;
}

/* Cards are reveal targets too, so the reveal transition otherwise wins the
   cascade and the hover pop inherits its slow .75s curve. Once a card has
   revealed (.bt-in) hand the transition back to the hover. */
html.bt-anim .page-id-669 .bt-stream.bt-in,
html.bt-anim .page-id-669 .bt-topic-tile.bt-in {
  transition: transform .4s cubic-bezier(.34, 1.28, .5, 1);
}

html.bt-anim .page-id-669 .bt-reveal.bt-d1 { transition-delay: .08s; }
html.bt-anim .page-id-669 .bt-reveal.bt-d2 { transition-delay: .16s; }
html.bt-anim .page-id-669 .bt-reveal.bt-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html.bt-anim .page-id-669 .bt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .page-id-669 .bt-hero video,
  .page-id-669 .bt-hero .kb-blocks-bg-video-container {
    transform: none !important;
  }
  .page-id-669 .bt-hero-copy {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   10. TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .page-id-669 .bt-topic-tile > .kt-inside-inner-col {
    min-height: 78px;
    flex-direction: row;
    justify-content: center;
  }

  .page-id-669 .bt-stream > .kt-inside-inner-col {
    min-height: 360px;
    justify-content: flex-end;
  }

  .page-id-669 .bt-hero h1 {
    max-width: 18ch;
  }

  .page-id-669 ul.kb-posts-id-bt-shelf-posts > li {
    flex-basis: 220px;
    max-width: 220px;
  }
}

/* ==========================================================================
   11. MOBILE
   ========================================================================== */

@media (max-width: 767px) {
  .page-id-669 .bt-topic-tile > .kt-inside-inner-col {
    min-height: 68px;
    flex-direction: row;
    justify-content: center;
  }

  .page-id-669 .bt-stream > .kt-inside-inner-col {
    min-height: 300px;
    justify-content: flex-end;
  }

  .page-id-669 .bt-hero h1,
  .page-id-669 .bt-hero .bt-hero-sub {
    max-width: 100%;
  }

  /* The 19px hero subhead is set inline by the block; ease it off on phones. */
  .page-id-669 .bt-hero .bt-hero-sub {
    font-size: 16.5px !important;
  }

  /* Two stacked pills of different widths read as an accident. */
  .page-id-669 .bt-hero .kb-buttons-wrap {
    width: 100%;
  }

  .page-id-669 .bt-hero .kb-buttons-wrap .kb-button {
    width: 100%;
    justify-content: center;
  }

  .page-id-669 ul.kb-posts-id-bt-shelf-posts > li {
    flex-basis: 200px;
    max-width: 200px;
  }
}

@media (max-width: 420px) {
  .page-id-669 .bt-stream > .kt-inside-inner-col {
    min-height: 260px;
  }
}

/* ==========================================================================
   12. PHONES: STREAMS AS LIST ROWS, DEVOTIONALS AS 2-UP ARCHES (2026-09-20)
   Same system as the home page's Trending / Fall follow-ups: 112px square
   thumb, 16px gap, 17px row padding, #D6D1C4 hairlines, 10px radius.
   Phones only. Tablet and desktop keep the three photo panels.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---- Streams: three 338px photo panels -> three list rows ---- */
  .page-id-669 .kb-row-layout-idbt-streams-v2 > .kt-row-column-wrap {
    row-gap: 0 !important;
    gap: 0 !important;
  }

  .page-id-669 .bt-stream,
  .page-id-669 .bt-stream:hover,
  .page-id-669 .bt-stream:focus-within {
    transform: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
    border-top: 1px solid var(--bt-stone);
  }

  .page-id-669 .bt-stream:last-child {
    border-bottom: 1px solid var(--bt-stone);
  }

  /* The photo leaves the card background and becomes the thumb. Kadence's
     overlay pseudo-element is reused to draw it, so no markup changes. */
  .page-id-669 .bt-stream > .kt-inside-inner-col {
    min-height: 146px !important;
    padding: 17px 30px 17px 128px !important;
    justify-content: center !important;
    gap: 3px;
    background-image: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
  }

  .page-id-669 .bt-stream > .kt-inside-inner-col::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 112px !important;
    height: 112px !important;
    transform: translateY(-50%);
    opacity: 1 !important;
    border-radius: var(--bt-radius) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 0;
  }

  .page-id-669 .kadence-columnbt-stream-devo > .kt-inside-inner-col::before {
    background-image: url('https://stirredbygrace.com/wp-content/uploads/2026/05/42a6b70f-82c4-47df-b04f-c904f7a8e1bd.webp') !important;
  }
  .page-id-669 .kadence-columnbt-stream-life > .kt-inside-inner-col::before {
    background-image: url('https://stirredbygrace.com/wp-content/uploads/2020/04/dana-devolk-yPO-pc_cobQ-unsplash-1-1.jpg') !important;
  }
  .page-id-669 .kadence-columnbt-stream-study > .kt-inside-inner-col::before {
    background-image: url('https://stirredbygrace.com/wp-content/uploads/2026/08/coffee-817643_1280.jpg') !important;
  }

  /* A quiet arrow on the right says the whole row is a link. */
  .page-id-669 .bt-stream > .kt-inside-inner-col::after {
    content: "\2192";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: var(--bt-olive);
    transition: transform .45s var(--bt-ease);
  }

  .page-id-669 .bt-stream:active > .kt-inside-inner-col::after {
    transform: translate(4px, -50%);
  }

  /* Cream text on a photo -> ink text on the cream band. */
  .page-id-669 .bt-stream h3.wp-block-kadence-advancedheading {
    color: var(--bt-ink) !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    letter-spacing: -.4px !important;
    margin: 0 !important;
  }

  .page-id-669 .bt-stream p.bt-stream-line {
    color: var(--bt-ink-soft) !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* The arrow and the row carry the call to action; the text label would
     repeat it on every row. */
  .page-id-669 .bt-stream .bt-stream-cta {
    display: none !important;
  }

  /* ---- Latest devotionals: 1-up 335px arches -> 2-up arches ---- */
  .page-id-669 ul.bt-devo-loop {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 26px !important;
  }

  /* Three cards: the third sits centred under the pair at the same size. */
  .page-id-669 ul.bt-devo-loop > li:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }

  .page-id-669 ul.bt-devo-loop .post-thumbnail {
    margin-bottom: 12px !important;
  }

  .page-id-669 ul.bt-devo-loop .entry-header {
    margin-bottom: 0;
  }

  .page-id-669 ul.bt-devo-loop .entry-title,
  .page-id-669 ul.bt-devo-loop .entry-title a {
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-align: center;
  }

  .page-id-669 .kt-adv-headingbt-recent-h2-v2 {
    margin-bottom: 26px !important;
  }
}
/* ==========================================================================
   13. PHONES: RECIPE BAND AS A 2-UP GRID (2026-09-20)
   "Looking for a meal to fellowship over?" - four 335x394 cards stacked one
   up ran 1,695px. Two across, four cards, matching the home page's Browse by
   Equipment grid. The square 1:1 crop is kept (equipment uses 4:5) because
   every other card on this page is square or arched.

   kadence/posts has no mobile column class below 576px - mobileColumns is a
   no-op on the block - so the grid has to come from CSS, and the title rule
   needs ul.<uid> + !important to beat the block's own inline <style>.
   ========================================================================== */

@media (max-width: 767px) {
  .page-id-669 ul.bt-recipe-loop {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 26px !important;
  }

  .page-id-669 ul.bt-recipe-loop .post-thumbnail {
    width: auto !important;
    padding-bottom: 100% !important;
    margin-bottom: 10px !important;
  }

  .page-id-669 ul.bt-recipe-loop .entry-header {
    margin-bottom: 0;
  }

  .page-id-669 ul.bt-recipe-loop .entry-title,
  .page-id-669 ul.bt-recipe-loop .entry-title a {
    font-size: 15.5px !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
  }
}
/* ==========================================================================
   14. PHONES: CTA SPACING AND SMOOTHER REVEALS (2026-09-20)
   ========================================================================== */

@media (max-width: 767px) {
  /* The 2-up grid left the button 18px under the last row of cards, close
     enough to read as part of the grid. */
  .page-id-669 .kb-btnsbt-close-btns-v2 {
    margin-top: 38px;
  }

  /* ---- Reveal motion ----
     Same fade-and-lift, tuned for a thumb-speed scroll: a shorter throw and
     a shorter run, so a card has settled by the time it is read instead of
     still arriving. translate3d keeps the lift on the compositor.

     The stagger is halved too. On a 375px screen all three cards of a band
     are on screen at once, and a 0.24s spread between them reads as three
     separate jumps rather than one movement. */
  html.bt-anim .page-id-669 .bt-reveal {
    transform: translate3d(0, 14px, 0);
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
                transform .5s cubic-bezier(.22, .61, .36, 1);
  }

  html.bt-anim .page-id-669 .bt-reveal.bt-in {
    transform: translate3d(0, 0, 0);
  }

  html.bt-anim .page-id-669 .bt-reveal.bt-d1 { transition-delay: .04s; }
  html.bt-anim .page-id-669 .bt-reveal.bt-d2 { transition-delay: .08s; }
  html.bt-anim .page-id-669 .bt-reveal.bt-d3 { transition-delay: .12s; }

  /* Stream rows and topic tiles hand their transition back to the hover pop
     once revealed. A phone has no hover, and that rule otherwise leaves a
     0.4s overshoot curve attached to a row the reader is tapping. */
  html.bt-anim .page-id-669 .bt-stream.bt-in,
  html.bt-anim .page-id-669 .bt-topic-tile.bt-in {
    transition: none;
  }
}