/* Trial: one shared native story strip, sized for each page's purpose. */
.oi-site-highlights {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}
.oi-site-highlights:not(.oi-site-highlights--gallery) {
  padding: 24px 20px 22px;
}
.oi-site-highlights:not(.oi-site-highlights--gallery) .instagram-highlights {
  --highlight-size: 80px;
  grid-template-columns: repeat(4, 120px);
  gap: clamp(16px, 3vw, 40px);
}
.oi-site-highlights:not(.oi-site-highlights--gallery) .instagram-highlight {
  gap: 12px;
}
.oi-site-highlights:not(.oi-site-highlights--gallery) .instagram-highlight-label {
  font-size: 14px;
  white-space: nowrap;
}
.oi-site-highlights--home,
.oi-site-highlights--about {
  padding-top: 32px !important;
  padding-bottom: 30px !important;
}
.oi-site-highlights--home .instagram-highlights,
.oi-site-highlights--about .instagram-highlights {
  --highlight-size: 100px !important;
}
@media (max-width: 600px) {
  .oi-site-highlights:not(.oi-site-highlights--gallery) {
    padding: 22px 14px 20px !important;
  }
  .oi-site-highlights:not(.oi-site-highlights--gallery) .instagram-highlights {
    --highlight-size: clamp(58px, 17vw, 80px) !important;
    grid-template-columns: repeat(4, var(--highlight-size));
    gap: clamp(10px, 3.5vw, 20px);
  }
  .oi-site-highlights:not(.oi-site-highlights--gallery) .instagram-highlight-label {
    font-size: clamp(10px, 2.8vw, 13px);
    white-space: normal;
  }
}
