/*
 * Minimal, explicit patches on top of the self-hosted original CSS/JS.
 * Loaded last so it can override the mirrored CSS where needed.
 *
 * (Previously this file contained CSS-only workarounds for JetElements'
 * Slider Pro and Slick carousel widgets not initializing -- that turned out
 * to be caused by RawLayout.astro double-loading every plugin script, which
 * broke Elementor's `frontend/element_ready` hook dispatch for the whole
 * page. With the duplicate script tags removed, those widgets' own JS
 * initializes correctly, so the workarounds are gone too.)
 *
 * The one widget that's genuinely gone for good is the original "Simple
 * Weather" plugin: it rendered via Vue.js fed by a WordPress REST proxy to
 * a keyed weather API, neither of which exist on a static host. It's
 * replaced in the fragment (see src/fragments/home.html) with a static
 * markup + a small inline script hitting the free, keyless Open-Meteo API
 * directly from the browser. These rules make that replacement match the
 * black top bar's existing icon-list styling instead of using the (now
 * unused) simple-weather plugin CSS.
 */
.simple-weather-static {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: inherit;
  font-family: inherit;
  justify-content: flex-end;
}
.simple-weather-static__temp {
  font-style: normal;
  font-weight: 700;
}

/*
 * Amenities page "Cabana Rentals" row: the source photo is a portrait
 * phone shot (775x1086), but every other amenity row uses a landscape
 * photo, and Elementor's flex columns stretch both halves of a row to
 * equal height. With no crop, the portrait image forced the whole row
 * to be much taller than the short text block next to it, leaving a
 * huge empty gap -- on both desktop and mobile. Cropping to the same
 * landscape ratio the other rows use fixes it everywhere at once, no
 * separate mobile rule needed. The vertical offset is tuned to keep the
 * cabanas themselves (the row's actual subject, roughly the middle third
 * of the frame) in view rather than the sky/rooftop above them or too
 * much pool water below.
 */
.elementor-element-cabanaimgw img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}

/*
 * Every other amenity row's heading and text-column on this page carries
 * page-specific Elementor CSS keyed to that widget's own unique ID (e.g.
 * .elementor-element-118110b .elementor-heading-title{font-size:30px...},
 * .elementor-element-20a0abd > .elementor-element-populated{padding:6% 0%
 * 0% 11%}) -- generated when each row was built in the original page
 * builder. New widgets get none of that automatically, so the Cabana
 * heading fell back to a much larger default size and the text column
 * had no left/top padding, closing the gap against the image entirely.
 * Copied the exact values from the other rows' own widget IDs so this
 * row matches them, not approximated ones.
 */
.elementor-element-cabanahead .elementor-heading-title {
  color: #000000;
  font-family: "Pathway Gothic One", Sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1em;
  letter-spacing: -0.6px;
  /* Every sibling row's heading gets this same 40px margin-top from a
     sitewide default, but it's visually hidden there: each of those
     rows is paired with a second amenity, and when the paired column's
     content is taller, the shorter side's image gets vertically
     centered within the extra height, pushing the image down into
     that 40px instead of it showing as a gap. Cabana has no pairing
     partner, so its image starts at the true row top with nothing to
     center into, and the same 40px is fully exposed as a visible gap
     above the heading. Tightened it here since there's no natural fix
     for the underlying cause on an unpaired row. */
  margin-top: 4px !important;
}
.elementor-element-cabanatxtcol > .elementor-element-populated {
  padding: 6% 0% 0% 11% !important;
}
@media (max-width: 1024px) {
  .elementor-element-cabanatxtcol > .elementor-element-populated {
    padding: 30px 0 0 0 !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-cabanatxtcol > .elementor-element-populated {
    padding: 10px 0 0 0 !important;
  }
}
/* The padding rules above already assumed cabanaimgcol/cabanatxtcol
   stack to full width at <=1024px (top-padding instead of left-
   padding), but that stacking rule itself was never added -- these
   are hand-authored widget IDs (this row was added during the
   Astro migration, not scraped from the original WordPress page), so
   they never got Elementor's usual auto-generated responsive width
   overrides. Left at their nested 25%-of-row width, the image column
   rendered far narrower than intended at tablet, and combined with
   the aspect-ratio crop elsewhere in this file, far shorter than its
   flex-stretched sibling column -- leaving 200-300px of empty space
   below the image. */
@media (max-width: 1024px) {
  .elementor-element-cabanaimgcol,
  .elementor-element-cabanatxtcol {
    width: 100% !important;
  }
}

/*
 * A second, separate per-widget rule exists on every other row: the OUTER
 * top-level column (wrapping the whole image+text pair, not just the text
 * sub-column above) also carries its own small side padding, e.g.
 * .elementor-element-0910bfc > .elementor-element-populated{padding:0px
 * 15px 0px 10px} at desktop, widening to 15px both sides at <=1024px. At
 * desktop this only shows up as a few missing px; at mobile, where columns
 * stack to full width, it's the ENTIRE left/right page gutter -- without
 * it the Cabana row's text sat flush against both screen edges while
 * every other row's text had a visible 15px margin.
 */
.elementor-element-cabana0col > .elementor-element-populated {
  padding: 0px 15px 0px 10px !important;
}
@media (max-width: 1024px) {
  .elementor-element-cabana0col > .elementor-element-populated {
    padding: 0px 15px 0px 15px !important;
  }
}

/*
 * Blog post typography: the post title (h1.entry-title.h2-style) and every
 * in-content heading (.entry-content h2/h3.wp-block-heading) inherited the
 * site's Elementor "Pathway Gothic One" condensed display font -- the same
 * loud, all-caps-feeling face used for nav/section headers sitewide. That
 * reads inconsistently against the /windsor-hills-blog/ card grid and the
 * post body copy itself, both already set in Lato. Switch blog post
 * headings to the same Lato / navy (#162541) / coral (#ff4157) theme the
 * card grid uses, so a post reads as one consistent design instead of two.
 *
 * (This block also carries the earlier h2-vs-h3 sizing fix: the sitewide
 * `.elementor-kit-1176 h3` rule set every real h3 to 56px/800/-3px letter-
 * spacing -- bigger than the h2 above it -- regardless of context; fixed
 * with higher-specificity scoped rules here.)
 *
 * Terms of Use (body.page-id-5931) and Privacy Policy (body.page-id-3) are
 * plain WP Pages, not Posts -- their title is h1.page-title and their body
 * wrapper is .page-content rather than .entry-title/.entry-content -- but
 * they have the exact same condensed-font problem, so the same rules are
 * scoped onto them too.
 */
.entry-title.h2-style,
body.page-id-5931 .page-title,
body.page-id-3 .page-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  color: #162541;
  line-height: 1.25;
}
/* Blog post headline only: tighter leading on every viewport. */
.entry-title.h2-style {
  line-height: 1;
}
/* Lato is wider per character than the condensed display font this
   replaces, so the unchanged 55px desktop title size wraps to too many
   lines on a phone-width viewport -- scale it down there. */
@media (max-width: 767px) {
  .entry-title.h2-style,
  body.page-id-5931 .page-title,
  body.page-id-3 .page-title {
    font-size: 34px;
  }
}
.entry-content h2.wp-block-heading,
body.page-id-5931 .page-content h2.wp-block-heading,
body.page-id-3 .page-content h2.wp-block-heading {
  font-family: 'Lato', sans-serif;
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: capitalize;
  color: #162541;
  line-height: 1.3;
}
.entry-content h3.wp-block-heading,
body.page-id-5931 .page-content h3.wp-block-heading,
body.page-id-3 .page-content h3.wp-block-heading {
  font-family: 'Lato', sans-serif;
  font-size: 22px !important;
  font-weight: 600;
  letter-spacing: normal;
  color: #162541;
  line-height: 1.3;
}
/* On phones the 30px section headings matched the post headline, so the
   page had no clear top level -- step them down there. */
@media (max-width: 767px) {
  .entry-content h2.wp-block-heading,
  body.page-id-5931 .page-content h2.wp-block-heading,
  body.page-id-3 .page-content h2.wp-block-heading {
    font-size: 24px !important;
  }
  .entry-content h3.wp-block-heading,
  body.page-id-5931 .page-content h3.wp-block-heading,
  body.page-id-3 .page-content h3.wp-block-heading {
    font-size: 20px !important;
  }
  /* Blog post breadcrumb: the full post title wraps to 2-3 lines on a
     phone and duplicates the headline right below it -- keep just
     Home > Category there (the title item plus the separator before it). */
  /* The header logo box hangs ~35px below the breadcrumb bar on phones,
     leaving the post headline only ~9px under it. */
  body.single-post .site-content__wrap {
    padding-top: 40px;
  }
  body.single-post .jet-breadcrumbs__item:has(.jet-breadcrumbs__item-target),
  body.single-post .jet-breadcrumbs__item:has(+ .jet-breadcrumbs__item .jet-breadcrumbs__item-target) {
    display: none;
  }
}

/*
 * Blog post in-body image captions (figcaption.wp-element-caption): these
 * had zero real styling before -- just the block-library's default
 * margin, inheriting plain body text. Coral accent bar + small label,
 * in the same Lato/coral/navy pairing the rest of the blog typography
 * above already uses. The label shows the post's own category (e.g.
 * "DISNEY WORLD TIPS") via --caption-label, set from .cat-links__label's
 * text by the inline script in RawLayout.astro; "PHOTO" is only a
 * fallback for the rare case that script doesn't find a category.
 */
.entry-content figcaption.wp-element-caption {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid #ff4157;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #000000;
  line-height: 1.5;
}
.entry-content figcaption.wp-element-caption::before {
  content: var(--caption-label, "PHOTO");
  display: block;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #ff4157;
  margin-bottom: 3px;
}

/*
 * Category pills: one color per category, on the post header (keyed off the
 * <article>'s category-<slug> class) and the blog index cards (keyed off the
 * label's data-cat attribute, set in windsor-hills-blog/[...page].astro).
 * A new category with no color here falls back to navy. White text on every
 * color passes WCAG AA; gold uses navy text instead.
 */
.category-where-to-stay, [data-cat="where-to-stay"] { --cat-bg: #162541; }
.category-family-guides, [data-cat="family-guides"] { --cat-bg: #d6283f; }
.category-budget-food, [data-cat="budget-food"] { --cat-bg: #2e7d32; }
.category-getting-around, [data-cat="getting-around"] { --cat-bg: #0277bd; }
.category-booking-tips, [data-cat="booking-tips"] { --cat-bg: #6a3fb5; }
.category-local-area, [data-cat="local-area"] { --cat-bg: #c2410c; }
.category-resort-amenities, [data-cat="resort-amenities"] { --cat-bg: #00838f; }
.category-trip-planning, [data-cat="trip-planning"] { --cat-bg: #ffc14d; --cat-fg: #162541; }
.category-disney-world-tips, [data-cat="disney-world-tips"] { --cat-bg: #ad1457; }

.cat-links__label,
.blog-card__cat-label {
  display: inline-block;
  padding: 5px 11px 4px;
  border-radius: 999px;
  background: var(--cat-bg, #162541);
  color: var(--cat-fg, #fff);
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 1.2px;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
/* Post header: drop the "In" / "on" connector words around the pill and
   date (font-size 0 on the wrappers hides those bare text nodes). */
.entry-meta .cat-links,
.entry-meta .posted-on-custom {
  font-size: 0;
}
.entry-meta .posted-on-custom time {
  font-size: 15px;
  margin-left: 12px;
  vertical-align: middle;
}

/*
 * Activities page's monthly calendar PDF: the raw <iframe src="...pdf">
 * this widget used relied on each browser's own native PDF viewer, and
 * those are NOT consistent -- Chromium's PDFium respects CSS width and
 * the #toolbar=0/view=FitH open-parameters, but iOS Safari's WebKit
 * PDFKit-based viewer doesn't reliably honor either, and rendered the
 * PDF's own page content wider than the viewport (confirmed via an
 * actual iPhone Safari screenshot showing calendar text cut off at the
 * right edge). Since then, the iframe src was switched (see
 * activities.html) to our own self-hosted PDF.js viewer
 * (/assets/pdfjs/web/viewer.html?file=...) instead of the raw PDF file --
 * PDF.js renders entirely via JS/canvas, the same on every browser
 * regardless of that browser's own native PDF engine, so this sizing fix
 * now genuinely applies everywhere instead of needing a mobile-only
 * fallback.
 */
.activities-pdf-embed {
  margin-top: 30px;
}
.activities-pdf-embed .embedpress-document-embed,
.activities-pdf-embed .embedpress-embed-document-pdf {
  width: 100% !important;
  max-width: 100% !important;
}
.activities-pdf-embed .embedpress-document-embed {
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .activities-pdf-embed .embedpress-document-embed,
  .activities-pdf-embed .embedpress-embed-document-pdf {
    height: 420px !important;
  }
  /* Elementor's own generated CSS zeroes the PDF widget's bottom margin
     at this breakpoint -- fine for the original single-calendar layout,
     but with two calendars now stacked (see activities.html), the current
     month's embed butted straight up against the next month's headline
     below it with no gap. */
  .activities-pdf-embed--current {
    margin-bottom: 50px !important;
  }
}
/* Elementor's own generated CSS sizes this heading at 24px desktop/tablet,
   16px mobile -- bumped up a bit at both, now that it's carrying just the
   month name (see activities.html) rather than the full original
   "SEPTEMBER 2026 - ACTIVITIES CALENDAR!" text. */
.activities-calendar-heading .elementor-heading-title {
  font-size: 28px !important;
}
@media (max-width: 767px) {
  .activities-calendar-heading .elementor-heading-title {
    font-size: 20px !important;
  }
}
/* One of "current month" / "next month" -- the proxy (functions/
   activities-calendar.js) resolves each slot by matching the source
   page's own month-labeled buttons, and 404s if that month isn't posted
   yet. The inline script in activities.html removes the iframe and
   reveals this instead when that happens. Hidden by default so it
   doesn't flash before the availability check resolves. */
.activities-pdf-coming-soon {
  display: none;
  margin: 20px 4px 0;
  padding: 40px 20px;
  text-align: center;
  background: #f4f4f4;
  border-radius: 4px;
  color: #7d7d7d;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

/*
 * Homepage hero slider's new "NEW! Rent A Pool Side Cabana" slide: none of
 * the original 3 slides ever used the widget's button field (all left it
 * empty), so there's no existing JetElements-generated CSS for it to
 * inherit. Sized well below the 120px all-caps headline above it so it
 * reads as a secondary link, not competing with the subtitle.
 */
.jet-slider__more-info-link {
  display: inline-block;
  margin-top: 6px;
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: underline;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.jet-slider__more-info-link:hover {
  color: #ff4157;
}
/* "Over 150 Windsor Hills Vacation Rentals..." heading: Elementor's
   own page CSS pulls this heading up with a -36px top margin at
   desktop (closing the gap under the paragraph above it, which fits
   on 2 lines there) and resets to a small positive margin at mobile
   (<=767px, where that paragraph wraps to more lines). Nothing
   overrides the desktop value at tablet widths (768-1024px), where
   the paragraph also wraps to extra lines -- the same -36px pull
   then digs into that extra line's text instead of just closing a
   gap, overlapping the heading on top of the paragraph. */
@media (max-width: 1024px) {
  .elementor-element-60a06d14 > .elementor-widget-container {
    margin-top: 2px !important;
  }
}
/* .jet-slider__subtitle carries a very aggressive letter-spacing
   (-5px at desktop's 120px size) meant for tightening a single run of
   uppercase text -- applied to the space between "NEW!" and "Rent",
   it collapsed that space to nothing. Margin instead of relying on
   the literal space character. */
.hero-cabana-new-badge {
  margin-right: 0.15em;
}

/*
 * Homepage "...Ready to Book DIRECT!" heading: an animated hand-drawn
 * double underline that draws itself in once scrolled into view --
 * same SVG stroke-dasharray technique and gold color as the reference
 * the request pointed to (moneylooper.com's "come back around"
 * effect). The paths stay hidden (stroke-dashoffset equal to their
 * own length)
 * until home.html's inline IntersectionObserver script adds
 * .is-visible, since this heading is well below the fold and
 * shouldn't animate before it's actually seen.
 */
.loop-word {
  position: relative;
  white-space: nowrap;
}
.loop-word svg {
  position: absolute;
  left: -2%;
  bottom: -4px;
  width: 104%;
  height: auto;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.loop-word svg path {
  stroke: #ffc14d;
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.loop-word.is-visible svg path {
  animation: draw-loop-underline 1.1s ease 0.3s 1 normal forwards;
}
.loop-word.is-visible svg path:last-child {
  animation-delay: 0.7s;
  opacity: 0.55;
}
@keyframes draw-loop-underline {
  to {
    stroke-dashoffset: 0;
  }
}

/*
 * Homepage "BOOK NOW! / Book Direct & Save." banner: Elementor's own
 * page CSS only centered this pair (and zeroed their 55px left
 * offset) at tablet/mobile widths (<=1024px) -- at desktop it stayed
 * left-aligned, so the shorter subtitle sat flush-left under the
 * wider heading instead of centered under it. Applying the same
 * centered treatment unconditionally makes it consistent at every
 * width. Also tightened the gap between the two lines slightly.
 */
.elementor-element-37bb0055,
.elementor-element-5bf88bbc {
  text-align: center !important;
}
.elementor-element-37bb0055 > .elementor-widget-container {
  padding-left: 0 !important;
}
.elementor-element-5bf88bbc > .elementor-widget-container {
  margin-left: 0 !important;
}
/* Mobile/tablet already have their own tightened top margin from
   Elementor's page CSS -- only tighten further at desktop, where it
   was a looser -5px. */
@media (min-width: 768px) {
  .elementor-element-5bf88bbc > .elementor-widget-container {
    margin-top: -10px !important;
  }
}
/* The booking form widget next to this banner is absolutely
   positioned and stretched 81px past its column's left edge at
   desktop widths (Elementor's own left:-81px), crowding it right up
   against "BOOK NOW!". Pulling that back in adds real breathing room
   between the two without affecting tablet/mobile, which already
   have their own left offsets (0px / 23px). */
@media (min-width: 1025px) {
  .elementor-element-58a4f4e {
    left: -20px !important;
  }
}
/* The booking form widget is absolutely positioned with top:-104px
   relative to its OWN column's wrapper (not this shared container),
   pulling it up to sit under the heading instead of below the empty
   column it nominally occupies. Elementor's flex-wrap layout splits
   this container's 334px min-height evenly across both stacked
   columns (align-content:stretch on two single-item wrapped lines),
   inflating the HEADING column from its own ~63px of real text up to
   ~190px -- that inflated 127px is what the widget's -104px offset
   pulls up into safely, landing just below the heading text rather
   than below the (now-vacated) form column.

   A first attempt just zeroed this container's min-height -- that
   removed the heading column's buffer along with the form column's,
   so the same -104px offset pulled the widget up PAST the heading
   text entirely (confirmed via computed geometry: widget top ended
   up above the heading column's top). Decoupling them fixes it
   correctly: force the heading column to keep the ~190px buffer the
   widget's offset depends on, while letting the form column (which
   contributes no visible content of its own here -- its widget lives
   entirely outside its flow) collapse to its true near-zero natural
   height instead of being stretched to match. Verified via computed
   geometry that the widget's rendered position is byte-for-byte
   identical to the original 334px layout; only the form column's
   dead space is removed.

   Scoped to tablet only (768-1024px), NOT max-width:1024px alone: Elementor's
   own CSS already has a SEPARATE, different mobile rule at max-width:767px for
   this same banner (min-height:350px on the container, and the form widget's
   own top:-115px/width:88%/left:23px/right:23px, all distinct from the tablet
   values this fix targets). An earlier version of this rule used max-width:1024px
   without a min-width floor, so its !important values also applied at mobile
   widths and clobbered that separate, already-correct mobile CSS -- the form's
   later fields (Any Bedrooms/Search) ended up floating over the section below
   instead of the collapsed container's own content. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-231b2b7 > .elementor-container,
  .elementor-element-531b9eb > .elementor-container,
  .elementor-element-a5ad07a > .elementor-container,
  .elementor-element-bc9d1e3 > .elementor-container,
  .elementor-element-65a0960 > .elementor-container {
    min-height: 0 !important;
  }
  .elementor-element-6e03f7db,
  .elementor-element-b1c319b,
  .elementor-element-c588c83,
  .elementor-element-932cbae,
  .elementor-element-74ed9c6 {
    min-height: 190px !important;
  }
}
/* Homepage "Condos / Townhomes" and "houses / Not Sure?" rows: each
   pairs a background-image column (a spacer widget with a
   background-image on its wrapper, not a real <img>) with a
   jet-services text column, side by side. The image column has no
   height of its own -- it's stretched by flexbox to match its own
   row's text column, which is exactly what's wanted at desktop where
   both rows sit in one wide grid. At tablet widths (<=1024px) the two
   rows stack (via width:100% + Elementor's own order:2 on the second
   row of each pair), but each row's image keeps stretching to match
   ONLY its own paired text -- since Condos' text and Townhomes' text
   (or houses' and "Not Sure?"'s) are different lengths, their images
   end up different heights, and with no margin between the two
   stacked rows, they butt directly against each other with zero
   gap. Giving each image column a fixed height instead of a
   stretched one makes both images in a pair consistent regardless of
   their paired text length, and a margin-bottom on the first row of
   each pair (the one Elementor's own order property puts on top)
   adds the missing separation before the second. */
@media (max-width: 1024px) {
  .elementor-element-de7a890,
  .elementor-element-3c5d10b,
  .elementor-element-3b34d31,
  .elementor-element-c98ab4b {
    height: 300px !important;
  }
  .elementor-element-5edd27b,
  .elementor-element-1adb2b2 {
    margin-bottom: 30px !important;
  }
}

/* whBlog on phones: the theme's 60px top margin on .site-content__wrap
   (woods/style.css) leaves a large empty band under the breadcrumb bar
   before the post title / card grid. Halve it on mobile. */
@media (max-width: 767px) {
  body.single-post .site-content__wrap,
  body.blog .site-content__wrap {
    margin-top: 30px;
  }
}

/* Global footer disclaimer: was #B1B1B18C (55%-opacity gray) on black and
   hard to read. Solid #a4a4a4 (owner), and space between its paragraphs. */
.elementor-element.elementor-element-96e610c,
.elementor-element.elementor-element-96e610c p {
  color: #a4a4a4 !important;
}
.elementor-element.elementor-element-96e610c p {
  margin-bottom: 0.9em;
}

/* Activities page: fallback link under the second calendar embed, for
   visitors whose browser won't render the PDF viewer. */
.activities-calendar-fallback {
  max-width: 560px;
  margin: 30px auto 10px;
  padding: 16px 20px;
  background: #eef3f8;
  border-radius: 6px;
  text-align: center;
  color: #162541;
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  line-height: 1.4;
}
.activities-calendar-fallback a {
  color: #ff4157;
  font-weight: 700;
  text-decoration: underline;
}

/* Seasonal holiday-hours flyer under the Activities calendars (temporary). */
.activities-holiday-flyer {
  /* Its parent is a wrapping flex row: take a full row of its own. */
  flex: 0 0 100%;
  width: 100%;
  margin: 30px 0 40px;
  padding: 0 16px;
  box-sizing: border-box;
}
.activities-holiday-flyer img {
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}