/* ==========================================================================
   Content sections rendered by the theme's shortcodes.

   Lived inline in the front page's Custom HTML blocks until 2026-09-01.
   The markup they style comes from inc/shortcodes-sections.php and
   inc/collections.php and inc/newsletter.php, so the CSS belongs next to it
   rather than in a
   page the client can edit.

   Load order matters: this file is enqueued AFTER overflow-guard.css
   (inc/assets.php, priority 100). The guard's `.est-products{
   overflow-x: clip }` and this file's `.est-products{ overflow: hidden }`
   have the same specificity, and inline styles in the page body used to
   come last. Enqueue this earlier and the section rules quietly lose.
   ========================================================================== */

/* global.css spaces prose list items with `.entry-content li + li`. Every
   list in these sections is a row or grid of cards (and the swatch dots
   inside the product cards), where that margin pushed each item but the
   first a few pixels down. Same override as the newsletter's perks row in
   global.css and the Bambus grids in bambus.css. */
.entry-content .est-collections li + li,
.entry-content .est-products li + li,
.entry-content .est-finder li + li,
.entry-content .est-colgrid li + li{
  margin-block-start: 0;
}

/* =========================================================================
   COLLECTIONS — [est_collections]
   ========================================================================= */

/* Section 02 — Category grid (static, no carousel) */
.est-collections{
  background: var(--est-bg, #fff);
  color: var(--est-ink, #131313);
  padding-block: clamp(3rem, 8vw, 6rem);
  font-family: var(--est-font-body, "DM Sans", sans-serif);
}

.est-collections .est-collections__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--est-gutter);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}

.est-collections .est-collections__title{
  font-family: var(--est-font-display, "Instrument Serif", serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--est-tracking-display, -0.02em);
  margin: 0;
}

.est-collections .est-collections__track{
  list-style: none;
  margin: 0;
  padding-inline: var(--est-gutter);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem);
}

@media (min-width: 40em){
  .est-collections .est-collections__track{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 60em){
  .est-collections .est-collections__track{ grid-template-columns: repeat(4, 1fr); }
}

.est-collections .est-card{
  display: block;
  text-decoration: none;
  color: inherit;
}

.est-collections .est-card__media{
  display: block;
  overflow: hidden;
  background: var(--est-surface, #ececea);
  aspect-ratio: 3 / 4;
}

.est-collections .est-card__media img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}
.est-collections .est-card:hover .est-card__media img{ transform: scale(1.04); }
.est-collections .est-card:focus-visible{
  outline: 2px solid var(--est-ink, #131313);
  outline-offset: 4px;
}

.est-collections .est-card__label{
  display: block;
  margin-block-start: .6rem;
  font-size: clamp(.8rem, 1.2vw, .9375rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* "Se alle", under the grid. Same treatment as the carousel's and the
   finder's own footers — without it the link is a bare block element with
   no container, so it landed flush against the left edge of the viewport
   while the grid above it sat inside the 1280px container. */
.est-collections .est-collections__more{
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--est-gutter);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  margin-block-start: clamp(1.5rem, 5vw, 2.5rem);
}

@media (max-width: 39.99em){
  .est-collections .est-collections__more .est-btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .est-collections .est-card__media img{ transition: none; }
  .est-collections .est-card:hover .est-card__media img{ transform: none; }
}

/* =========================================================================
   PRODUCT CAROUSEL — [est_products]
   ========================================================================= */

/* Section 03 — Bestselgere (carousel) */
.est-products{
  position: relative;
}

.est-products .est-products__item{
  position: relative;
}
.est-products{
  /* Tracks the archive grid's column count (shop.css: 2 / 3 / 4 at the same
     breakpoints) so a carousel card is about as wide as a category card and
     the price and swatches have room to share a line. The fraction is the
     peek that shows the row scrolls. */
  --est-prod-cols: 2.2;
  --est-prod-gap: clamp(.75rem, 2vw, 1.25rem);
  --est-prod-pad: var(--est-gutter);
  --est-prod-ratio: 3 / 4.4;

  background: var(--est-surface, #EFEFED);
  color: var(--est-ink, #131313);
  font-family: var(--est-font-body, "DM Sans", sans-serif);
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

.est-products .est-products__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--est-prod-pad);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  margin-block: 0 clamp(1.25rem, 3vw, 2rem);
}

.est-products .est-products__title{
  font-family: var(--est-font-display, "Instrument Serif", serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--est-tracking-display, -0.02em);
  margin: 0;
}

.est-products .est-products__nav{
  display: none;
  gap: clamp(.5rem, 1.5vw, 1.25rem);
  flex: 0 0 auto;
}

.est-products .est-products__arrow{
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--est-ink, #131313);
  cursor: pointer;
  transition: opacity 400ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}
.est-products .est-products__arrow:hover{ opacity: .55; }
.est-products .est-products__arrow[disabled]{ opacity: .2; pointer-events: none; }
.est-products .est-products__arrow svg{ inline-size: 1.5rem; block-size: 1.5rem; }

.est-products ul.est-products__track{
  list-style: none;
  margin: 0;
  padding-inline: var(--est-prod-pad);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  display: flex;
  gap: var(--est-prod-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--est-prod-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.est-products ul.est-products__track::-webkit-scrollbar{ display: none; }

/* --est-prod-cols is how many cards fit across the visible track, and the
   fraction is the peek that tells the eye the row scrolls: 4.3 means four
   whole cards plus about a quarter of the fifth.

   A percentage flex-basis resolves against the flex container's CONTENT
   box, so the track's own padding is already out of "100%" — subtracting
   it here as well used to take it off twice, which is why this needed a
   fudged 3.8 to look like four columns. It then landed a 0.8px shard of
   the fifth card rather than a peek. */
.est-products .est-products__item{
  flex: 0 0 calc(
    (100% - ((var(--est-prod-cols) - 1) * var(--est-prod-gap)))
    / var(--est-prod-cols)
  );
  scroll-snap-align: start;

  /* A column, so the button can sit on `margin-block-start: auto` and line
     up across cards whose titles wrap to different heights — the same trick
     the archive card uses (shop.css). The track stretches every item to the
     tallest one, so the images stay level at the top too. */
  display: flex;
  flex-direction: column;
}

.est-products .est-products__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.est-products .est-products__media{
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--est-bg, #fff);
  aspect-ratio: var(--est-prod-ratio);
}

.est-products .est-products__media img{
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 400ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}

.est-products .est-products__media.has-hover img + img{ opacity: 0; }

@media (hover: hover) and (pointer: fine){
  .est-products .est-products__link:hover .est-products__media.has-hover img + img{ opacity: 1; }
  .est-products .est-products__link:hover .est-products__media.has-hover img:first-child{ opacity: 0; }
}

.est-products .est-products__media .est-card__badges{
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 2;
}

/* Title, price and button all repeat the archive card's treatment
   (shop.css) — the carousel renders outside any body.woocommerce template
   context, so those selectors never reach it. */
.est-products .est-products__name{
  display: block;
  margin-block: .75rem .5rem;
  font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--est-tracking-display, -0.02em);
  color: var(--est-ink, #131313);
}

.est-products .est-products__price{
  display: block;
  font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--est-ink, #131313);
  margin: 0;
}
.est-products .est-products__price ins{ text-decoration: none; color: var(--est-accent, var(--est-ink)); }
.est-products .est-products__price del{ opacity: .5; }

/* Price + swatches share one row (price left, swatches right) instead of
   stacking — shorter card, matches shop.css's archive cards. */
.est-products .est-products__pricerow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  /* A long "fra kr 1 299" next to five dots can outgrow a narrow card. Let
     the swatches drop to their own line, still right-aligned, rather than
     spill out over the neighbouring card. */
  flex-wrap: wrap;
  /* Takes the card's slack, so the price row and the button below it line
     up across a row of cards whose titles wrap to different heights. The
     title stays where it is, under the image. */
  margin: auto 0 1rem;
}

/* Color swatches + buy button — same look as a category-archive card
   (shop.css), duplicated here because .est-products renders outside any
   body.woocommerce template context, so those rules never match it. */
.est-products .est-swatches{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .375rem;
  list-style: none;
  /* Holds the right edge whether it shares the price's line or wraps below it. */
  margin: 0 0 0 auto;
  padding: 0;
}
.est-products .est-swatches__item{ margin: 0; padding: 0; line-height: 0; }
.est-products .est-swatch{
  display: block;
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  background-color: var(--est-swatch-color, #CCC);
  box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .18);
}
.est-products .est-swatches__more{
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--est-ink, #131313);
  opacity: .6;
  line-height: 1;
  margin-left: .125rem;
}

.est-products .est-products__item a.button{
  font-family: var(--est-font-body, "DM Sans", sans-serif);
  font-size: clamp(.6875rem, 2vw, .8125rem);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--est-bg, #FFFFFF);
  background-color: var(--est-accent, #4A1F45);
  border: 1px solid var(--est-accent, #4A1F45);
  border-radius: var(--est-radius, 0);
  padding: .875rem .75rem;
  width: 100%;
  display: block;
  /* The price row above already absorbed the slack, so this just follows it. */
  margin: 0;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 400ms cubic-bezier(.22,1,.36,1), border-color 400ms cubic-bezier(.22,1,.36,1);
}
.est-products .est-products__item a.button:hover,
.est-products .est-products__item a.button:focus{
  background-color: var(--est-accent-dark, #341530);
  border-color: var(--est-accent-dark, #341530);
}
.est-products .est-products__item a.button:focus-visible{
  outline: 2px solid var(--est-accent, #4A1F45);
  outline-offset: 2px;
}
.est-products .est-products__item a.button.added,
.est-products .est-products__item a.button.loading{ opacity: .7; }

/* The "view cart" link ajax appends after a successful add */
.est-products .est-products__item a.added_to_cart{
  display: block;
  margin-block-start: .5rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--est-ink, #131313);
  text-align: center;
  text-decoration: underline;
}

.est-products .est-products__item span.onsale{ display: none; }

.est-products .est-products__more{
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--est-prod-pad);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  margin-block-start: clamp(1.5rem, 5vw, 2.5rem);
}

@media (max-width: 39.99em){
  .est-products .est-products__more .est-btn{ width: 100%; }
}

@media (min-width: 48em){
  .est-products{ --est-prod-cols: 3.3; --est-prod-ratio: 4 / 5; }
  .est-products .est-products__nav{ display: flex; }
}
@media (min-width: 75em){
  .est-products{ --est-prod-cols: 4.3; }
}

@media (prefers-reduced-motion: reduce){
  .est-products ul.est-products__track{ scroll-behavior: auto; }
  .est-products .est-products__media img{ transition: none; }
}

/* =========================================================================
   STYLE FINDER — [est_collections_finder]
   ========================================================================= */

/* Section 04 — Collections finder ("Finn din stil") */
.est-finder{
  background: var(--est-bg, #fff);
  color: var(--est-ink, #131313);
  padding-block: clamp(3rem, 8vw, 6rem);
  font-family: var(--est-font-body, "DM Sans", sans-serif);
}

.est-finder .est-finder__head{
  padding-inline: var(--est-gutter);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}

.est-finder .est-finder__title{
  font-family: var(--est-font-display, "Instrument Serif", serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--est-tracking-display, -0.02em);
  margin: 0;
}

.est-finder .est-finder__grid{
  list-style: none;
  margin: 0;
  padding-inline: var(--est-gutter);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
}

/* Two by two on a tablet; from 64em every collection shares one row,
   however many there are, so a new one never leaves an orphan below. */
@media (min-width: 48em){
  .est-finder .est-finder__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em){
  .est-finder .est-finder__grid{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

.est-finder .est-finder__card{
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.est-finder .est-finder__media{
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--est-surface, #ececea);
  overflow: hidden;
}

.est-finder .est-finder__media img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--est-ease, cubic-bezier(.22,1,.36,1));
}
.est-finder .est-finder__card:hover .est-finder__media img{ transform: scale(1.04); }

.est-finder .est-finder__body{
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: linear-gradient(to top, rgb(23 23 44 / .78), rgb(23 23 44 / 0) 70%);
  color: #fff;
}

.est-finder .est-finder__name{
  display: block;
  font-family: var(--est-font-display, "Instrument Serif", serif);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  letter-spacing: var(--est-tracking-display, -0.01em);
}

.est-finder .est-finder__blurb{
  display: block;
  margin-block-start: .35rem;
  max-width: 28ch;
  font-size: .8125rem;
  line-height: 1.5;
  opacity: .88;
}

.est-finder .est-finder__cta{
  display: inline-block;
  margin-block-start: .75rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.est-finder .est-finder__more{
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--est-gutter);
  max-width: var(--est-container, 1280px) !important;
  margin-inline: auto;
  margin-block-start: clamp(1.5rem, 5vw, 2.5rem);
}

@media (max-width: 39.99em){
  .est-finder .est-finder__more .est-btn{ width: 100%; }
}

/* =========================================================================
   NEWSLETTER — [est_newsletter]
   ========================================================================= */

/* Section 07 — Newsletter */
.est-newsletter{
  background: linear-gradient(135deg, var(--est-lavender, #F4F1F8), var(--est-lavender-deep, #E7DEEF));
  color: var(--est-ink, #131313);
  font-family: var(--est-font-body, "DM Sans", sans-serif);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.est-newsletter__inner{
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--est-gutter);
  text-align: center;
}

.est-newsletter__icon{ display: block; margin-inline: auto; color: var(--est-accent, var(--est-ink)); }

.est-newsletter__title{
  margin: .75rem 0 0;
  font-family: var(--est-font-display, "Instrument Serif", serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
}

.est-newsletter__sub{
  margin: .5rem auto 0;
  max-width: 32ch;
  font-size: .9375rem;
  color: var(--est-ink-muted, #6A6A68);
}

.est-newsletter__form{
  display: flex;
  gap: .5rem;
  margin-block-start: 1.5rem;
}

@media (max-width: 30em){
  .est-newsletter__form{ flex-direction: column; }
}

.est-newsletter__input{
  flex: 1 1 auto;
  min-height: 3rem;
  padding-inline: 1rem;
  border: 1px solid var(--est-line, #DFDEDB);
  background: var(--est-bg, #fff);
  font: inherit;
}

/* Honeypot — see inc/newsletter.php. Kept out of the flex row entirely so
   it can never claim a gap, and off-screen rather than display:none, since
   a few bots skip fields that are outright hidden. */
.est-newsletter__hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.est-newsletter__msg{
  margin: .75rem 0 0;
  font-size: .8125rem;
}
.est-newsletter__msg.is-error{ color: #B3261E; }

.est-newsletter__perks{
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  font-size: .8125rem;
  color: var(--est-ink-muted, #6A6A68);
}

/* =========================================================================
   COLLECTIONS GRID — [est_collections_grid]
   ========================================================================= */

/* Collections Page — Grid */
.est-colgrid{
  --est-cg-pad: var(--est-gutter);
  --est-cg-gap: clamp(0.5rem, 1.6vw, 1.25rem);
  --est-cg-cols: 2;
  --est-cg-ratio: 3 / 4;

  background: var(--est-bg, #F8F8F7);
  color: var(--est-ink, #131313);
  padding-block: clamp(2.5rem, 7vw, 5rem);
  font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
}

.est-colgrid__inner{
  inline-size: 100%;
  max-inline-size: var(--est-container, 1280px);
  margin-inline: auto;
  padding-inline: var(--est-cg-pad);
}

/* Head */
.est-colgrid__head{
  margin-block-end: clamp(1.5rem, 4vw, 2.75rem);
}

.est-colgrid__title{
  margin: 0 0 var(--est-space-s, .75rem);
  font-family: var(--est-font-display, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  line-height: var(--est-leading-display, 1.06);
  letter-spacing: var(--est-tracking-display, -0.02em);
  font-size: var(--est-step-3);
}

.est-colgrid__sub{
  margin: 0;
  max-inline-size: 46ch;
  font-size: var(--est-step-0);
  line-height: var(--est-leading-body, 1.65);
}

/* Grid */
.est-colgrid__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--est-cg-cols), minmax(0, 1fr));
  gap: var(--est-cg-gap);
}

.est-colgrid__item{ margin: 0; }

.est-colgrid__card{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--est-radius, 0);
}

/* Media */
.est-colgrid__media{
  display: block;
  position: relative;
  aspect-ratio: var(--est-cg-ratio);
  overflow: hidden;
  background: var(--est-surface, #EFEFEE);
  border-radius: var(--est-radius, 0);
}

.est-colgrid__media img,
.est-colgrid__placeholder{
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--est-dur, 400ms) var(--est-ease, cubic-bezier(.22,1,.36,1));
}

.est-colgrid__placeholder{ background: var(--est-surface, #EFEFEE); }

/* Meta */
.est-colgrid__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.65rem;
}

.est-colgrid__name{
  font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.est-colgrid__count{
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}

/* Hover only on real pointers */
@media (hover: hover) and (pointer: fine){
  .est-colgrid__card:hover .est-colgrid__media img{ transform: scale(1.04); }
  .est-colgrid__card:hover .est-colgrid__name{ text-decoration: underline; text-underline-offset: 4px; }
}

.est-colgrid__card:focus-visible{
  outline: 2px solid var(--est-ink, #131313);
  outline-offset: 4px;
}

/* Breakpoints */
@media (min-width: 30em){
  .est-colgrid{ --est-cg-gap: 1rem; }
}

@media (min-width: 48em){
  .est-colgrid{ --est-cg-cols: 3; }
}

@media (min-width: 75em){
  .est-colgrid{ --est-cg-cols: 4; }
}

@media (prefers-reduced-motion: reduce){
  .est-colgrid__media img{ transition: none; }
  .est-colgrid__card:hover .est-colgrid__media img{ transform: none; }
}

/* ==========================================================================
   Instagram feed — desktop only

   The section itself is page content (an HTML block on the front page,
   styles and all, which is why there is no .est-instagram block above this
   one). On a phone it is a second full grid of images below an already long
   page, competing with the product rows for the same scroll — dropped there
   at the client's request 2026-09-01.

   body.home outranks the block's own inline <style>, which loads after this
   file and would otherwise win the tie.
   ========================================================================== */
@media (max-width: 47.999em){
  body.home .est-instagram{
    display: none;
  }
}

/* The block's own grid is a 6-column layout for the old static thumbnails
   (repeat(6, 1fr) from 60em). The live feed is a single child — the Smash
   Balloon wrapper, which lays out its own columns — so that grid put the
   whole feed into one sixth of the width and the plugin then split that
   sixth into six more columns. One column hands the plugin the full width. */
body.home .est-instagram__grid--live{
  grid-template-columns: minmax(0, 1fr);
}