/* The theme's default "Text Only" layout slide width (250px / max 290px) is a fixed value that doesn't
   scale down to fit narrower containers like a sidebar widget. With the slider's "Number of visible items"
   set to 1, each slide should fill 100% of the slider's viewport — otherwise, with a fixed sub-container
   width, more than one slide's content shows at once, each cut off, which is the misalignment being fixed
   here. Matches on both classes present in the rendered markup for higher specificity than the theme rule,
   and covers both width- and flex-basis-driven sizing since we can't see which one the theme CSS relies on.
   Scoped to OUTSIDE the 768–1024px range: that's this site's tablet breakpoint (see child.css), where the
   "Number of visible items (tablet, optional)" module field can show 2+ items side by side via Swiper's own
   JS-computed slide width. 

/* Swiper never runs inside HubSpot's own content editors, so without it every .swiper-slide just stacks as a
   normal block element, inflating the module's height in the editor canvas only (live/published pages are
   unaffected — is_in_editor, which controls the pwr-sec-posts--editor-preview class below, is always false
   there). Hiding everything but the first slide here approximates what the live, initialized slider would
   actually show, giving an accurate height while editing. */
.pwr-sec-posts--editor-preview .swiper-slide:not(:first-child) {
  display: none !important;
}

/* At the 768–1024px tablet range (where "Number of visible items (tablet, optional)" shows 2 real slides
   side by side), neighboring off-screen slides were bleeding into view at both edges instead of being
   clipped — the swiper-bundle CSS already sets overflow:hidden on .swiper, but something in this site's
   responsive layout (likely child.css's tablet stacking rules, which resize this widget's container at
   this exact breakpoint) is winning the specificity fight. Forcing it back here, scoped tightly to this
   breakpoint and this module only, so it doesn't affect the swiper container at any other screen size or
   any other module on the page. */
@media (min-width: 768px) and (max-width: 1024px) {
  .pwr-sec-posts--text.pwr-sec-posts .pwr-sec-posts__container.swiper {
    overflow: hidden !important;
  }
  .pwr-sec-posts--text .swiper-slide.pwr-rel-post-item__wrapper--text {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}
@media (max-width:767px) {
  .swiper-wrapper{max-width:295px;}
}