/* Cache Generated at 2026-07-01 03:46:26 | Post: 6 | Template: .twig, page.twig, default.twig */
 .feature-split { position: relative; background: var(--color-surface); padding-top: clamp(3.2rem, 6.5vw, 5.8rem); padding-bottom: clamp(3.2rem, 6.5vw, 5.8rem); } .feature-split--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; width: clamp(12px, 1.625vw, 1.625rem); background: var(--color-secondary); /* drawn down on scroll via --fs-bar (GSAP); defaults to full when no JS/motion */ transform-origin: top; transform: scaleY(var(--fs-bar, 1)); } .feature-split__inner { padding-left: var(--x-gap); padding-right: calc( var(--x-gap) * .8 ); display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 2.8vw, 3rem); align-items: center; } .feature-split__content { max-width: 38em; color: var(--color-text-muted); line-height: 1.75; } .feature-split__cta { margin-top: 2rem; } .feature-split__image { width: 100%; aspect-ratio: 7 / 6.6; object-fit: cover; border-radius: 14px; } /* Live Your Story variant: square image corners */ .feature-split--accent .feature-split__image { border-radius: 0; } @media (min-width: 880px) { .feature-split__inner { grid-template-columns: 1fr 50%; } .feature-split--reverse .feature-split__image { order: -1; } }  .location-feature { background: #fff var(--location-feature-bg, none) center / 100% 100% no-repeat; background-size: cover; padding-top: clamp(3.2rem, 6.5vw, 5.8rem); padding-bottom: clamp(3.2rem, 6.5vw, 5.8rem); } .location-feature__inner { padding-inline: var(--x-gap); display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 2.8vw, 3rem); align-items: center; } .location-feature__map { width: 100%; aspect-ratio: 7 / 6; object-fit: cover; border-radius: 14px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .35); } .location-feature__content { max-width: 38em; color: var(--color-text-muted); line-height: 1.75; } .location-feature__cta { margin-top: 1.4rem; } @media (min-width: 880px) { .location-feature__inner { grid-template-columns: 1fr 1fr; } }  .google-map { position: relative; width: 100%; height: 450px; background-color: var(--color-surface); transition: opacity 0.3s ease; opacity: 0; } .google-map.loaded { opacity: 1; } @media (min-width: 992px) { .google-map { height: 620px; } } .google-map__pin { display: flex; align-items: center; justify-content: center; } .google-map__property-logo { width: auto; height: auto; max-width: 100%; max-height: 100%; } .google-map__icon { width: 100%; height: 100%; object-fit: cover; } /* Hide Google's default white background + tail behind the bubble so our custom one shows through cleanly. */ .gm-style .gm-style-iw-tc::after { background: var(--iw-bg, #ffffff); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .gm-style .gm-style-iw-c { padding: 0 !important; /* remove default inner padding */ background: var(--iw-bg, #ffffff) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important; max-width: 320px !important; overflow: hidden !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Inner scrollable wrapper — kill the forced extra padding/scrollbar that Google adds when content is short. */ .gm-style .gm-style-iw-d { overflow: auto !important; padding: 18px 20px 16px !important; max-height: none !important; color: var(--iw-text, #1f2937); line-height: 1.5; font-size: 14px; } /* Reposition + restyle the close (×) button */ .gm-style .gm-style-iw-chr { position: absolute; top: 6px; right: 6px; height: auto !important; } .gm-style .gm-ui-hover-effect { width: 28px !important; height: 28px !important; opacity: 0.6 !important; border-radius: 50% !important; transition: opacity 0.15s ease, background-color 0.15s ease; } .gm-style .gm-ui-hover-effect:hover { opacity: 1 !important; background-color: rgba(0, 0, 0, 0.05) !important; } .gm-style .gm-ui-hover-effect > span { margin: 6px !important; width: 16px !important; height: 16px !important; } /* ---------- Theme 1: Modern (default) ---------- */ :root { --iw-bg: #ffffff; --iw-text: #1f2937; --iw-muted: #6b7280; --iw-accent: #2563eb; --iw-border: #e5e7eb; } /* ---------- Theme 2: Glass / Frosted ---------- Uncomment to use. Works best over satellite imagery. ------------------------------------------------- */ .gm-style .gm-style-iw-c { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6) !important; } .gm-style .gm-style-iw-tc::after { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(180%); } /* ---------- Theme 3: Dark ---------- Uncomment for dark-mode maps. ------------------------------------ */ /* :root { --iw-bg: #1f2937; --iw-text: #f3f4f6; --iw-muted: #9ca3af; --iw-accent: #60a5fa; --iw-border: #374151; } .gm-style .gm-ui-hover-effect { filter: invert(1); } */ /* ============================================================ Content classes — wrap your InfoWindow HTML with these for a consistent layout. Example: <div class="iw"> <div class="iw__image" style="background-image:url(...)"></div> <div class="iw__body"> <h3 class="iw__title">Blue Bottle Coffee</h3> <p class="iw__subtitle">Coffee shop · $$</p> <div class="iw__meta"> <span class="iw__rating">★ 4.6</span> <span class="iw__dot">·</span> <span>1,248 reviews</span> </div> <p class="iw__desc">Specialty pour-over and pastries in a minimalist space.</p> <a class="iw__button" href="#">Get directions</a> </div> </div> ============================================================ */ .iw { margin: -18px -20px -16px; /* counter .gm-style-iw-d padding */ } .iw__image { height: 140px; background-size: cover; background-position: center; background-color: #f3f4f6; } .iw__body { padding: 14px 18px 16px; } .iw__title { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: var(--iw-text); letter-spacing: -0.01em; } .iw__subtitle { margin: 0 0 10px; font-size: 13px; color: var(--iw-muted); } .iw__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--iw-muted); margin-bottom: 10px; } .iw__rating { color: #f59e0b; font-weight: 600; } .iw__dot { opacity: 0.5; } .iw__desc { margin: 0 0 14px; font-size: 13.5px; color: var(--iw-text); line-height: 1.5; } .iw__button { display: inline-block; padding: 8px 14px; background: var(--iw-accent); color: #ffffff; font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease, transform 0.05s ease; } .iw__button:hover { background: color-mix(in srgb, var(--iw-accent) 88%, black); } .iw__button:active { transform: translateY(1px); } /* Secondary / ghost button variant */ .iw__button--ghost { background: transparent; color: var(--iw-accent); border: 1px solid var(--iw-border); } .iw__button--ghost:hover { background: rgba(0, 0, 0, 0.03); } /* Divider */ .iw__divider { height: 1px; background: var(--iw-border); margin: 10px 0; } /* Tag / chip */ .iw__tag { display: inline-block; padding: 2px 8px; background: color-mix(in srgb, var(--iw-accent) 12%, transparent); color: var(--iw-accent); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } .google-map__pin:not(.google-map__pin--primary) { mask-image: url("https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/map-marker.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: var(--color-accent); width: 32px; height: 32px; } .google-map__pin.google-map__pin--primary { background-color: var(--color-primary-dark); padding: .65rem 1rem; } .google-map__pin.google-map__pin--primary::before { content: ""; background: url("https://www.mifflinchapter.com/wp-content/uploads/2026/06/logo-white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--color-primary-dark); width: 135px; aspect-ratio: 200/64; } /* After arrow at bottom center of primary pin */ .google-map__pin.google-map__pin--primary::after { content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid var(--color-primary-dark); }  .gallery-feature { position: relative; background: var(--color-secondary); color: #f4f1e8; padding-bottom: 1rem; } /* horizontal wood-plank divider capping the section, with the navy dome rising from its top edge into the (lighter) section above */ .gallery-feature__wood { position: relative; height: clamp(42px, 3.4vw, 60px); background: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/mifflin/wood.webp') center / cover; margin-bottom: var(--y-gap); } .gallery-feature__intro { max-width: 640px; } /* clips the carousel's peeking neighbour slides at the viewport edge (the section root no longer hides overflow, so the dome can escape upward). It also owns the grouped controls' positioning context: Swiper pins its own height to the slides, so a bottom padding on the swiper gets swallowed. The control strip therefore lives in the carousel's own padding-bottom, below the slides, with the swiper set position:static so it isn't the anchor. */ .gallery-feature__carousel { overflow: hidden; position: relative; padding-bottom: clamp(70px, 7vw, 92px); } .gallery-feature__top { padding-inline: var(--x-gap); display: grid; grid-template-columns: 1fr; gap: 1.4rem 3rem; align-items: start; margin-bottom: clamp(2.4rem, 4vw, 4rem); } .gallery-feature__content { color: #ede9dc; line-height: 1.75; } .gallery-feature__cta { margin-top: 1rem; } /* full-bleed carousel: the swiper itself doesn't clip, so the adjacent (next/prev) slides stay visible spilling out of the padding; the section's own overflow:hidden clips them at the viewport edge — i.e. "from offscreen". The horizontal padding sets how much of the neighbours peeks in. */ .gallery-feature .gallery-feature__swiper { position: static; overflow: visible; padding-inline: clamp(24px, 8vw, 130px); padding-block: 6px 26px; --swiper-navigation-color: #f4f1e8; --swiper-navigation-size: 15px; } /* grouped, boutique navigation: a slim cream-outlined pill (prev | next) anchored at the carousel's bottom-left, aligned with the first slide. Buttons resolve their offsets against .gallery-feature__carousel (the swiper above is position:static), so they sit in its padding-bottom. */ .gallery-feature__carousel .swiper-button-prev, .gallery-feature__carousel .swiper-button-next { top: auto; bottom: clamp(14px, 1.8vw, 24px); margin: 0; width: clamp(48px, 5vw, 58px); height: clamp(42px, 4.4vw, 50px); background: var(--color-primary); backdrop-filter: none; transition: background-color .2s ease, border-color .2s ease; z-index: 0; } .gallery-feature__carousel .swiper-button-prev { left: clamp(24px, 8vw, 130px); right: auto; border-radius: 999px 0 0 999px; border-right-width: 1px; border-right-color: rgba(255, 255, 255, .18); border-right-style: solid; } .gallery-feature__carousel .swiper-button-next { left: calc(clamp(24px, 8vw, 130px) + clamp(48px, 5vw, 58px)); right: auto; border-radius: 0 999px 999px 0; } .gallery-feature__carousel .swiper-button-prev:hover, .gallery-feature__carousel .swiper-button-next:hover { background: var(--color-primary-dark); } /* tactile "plastic" frame: sheen gradient + top highlight + drop shadow, photo inset with a dark edge */ .gallery-feature__tile { width: 100%; border-radius: 30px; padding: clamp(9px, 0.9vw, 15px); background: linear-gradient(155deg, #aab686 0%, #909c65 45%, #7d8956 100%); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .6), inset 0 -3px 4px rgba(58, 64, 36, .4), 0 10px 22px -8px rgba(38, 44, 24, .55); } .gallery-feature__inner { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 6 / 7; box-shadow: inset 0 0 0 1.5px rgba(26, 28, 16, .6); } .gallery-feature__image { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid color-mix(in srgb, var(--color-secondary) 80%, #000 20%); border-radius: 20px; } .gallery-feature__caption { position: absolute; inset: auto 0 0 0; padding: 20px 20px 22px; color: #fff; background: linear-gradient(transparent, rgba(18, 18, 16, .86)); } .gallery-feature__caption strong { display: block; font-family: var(--font-family-secondary); font-weight: 700; font-size: clamp(1.4rem, 1.85vw, 2.1rem); line-height: 1.1; text-wrap: pretty; margin-bottom: .35rem; } .gallery-feature__caption small { display: block; font-size: clamp(1.05rem, 1.35vw, 1.6rem); line-height: 1.4; color: #eae6da; } /* interactive tiles (those with a caption): on hover the photo dims behind a soft black wash, the text rises into view, and the image gently zooms. Gated to hover-capable devices so touch screens keep the caption visible. */ @media (hover: hover) { .gallery-feature__inner--interactive::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .45s ease; z-index: 1; } .gallery-feature__inner--interactive .gallery-feature__image { transition: transform .6s ease; } .gallery-feature__inner--interactive .gallery-feature__caption { z-index: 2; background: none; } /* title + paragraph animate individually so they can stagger. Delays here (on the resting state) govern the EXIT: the paragraph leaves first, then the title follows. Enter delays are set on the :hover state below. */ .gallery-feature__inner--interactive .gallery-feature__caption strong, .gallery-feature__inner--interactive .gallery-feature__caption small { opacity: 0; transform: translateY(1.4rem); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } .gallery-feature__inner--interactive .gallery-feature__caption small { transition-delay: 0s; } .gallery-feature__inner--interactive .gallery-feature__caption strong { transition-delay: .12s; } .gallery-feature__inner--interactive:hover::after, .gallery-feature__inner--interactive:focus-within::after { opacity: 1; } .gallery-feature__inner--interactive:hover .gallery-feature__image, .gallery-feature__inner--interactive:focus-within .gallery-feature__image { transform: scale(1.06); } .gallery-feature__inner--interactive:hover .gallery-feature__caption strong, .gallery-feature__inner--interactive:hover .gallery-feature__caption small, .gallery-feature__inner--interactive:focus-within .gallery-feature__caption strong, .gallery-feature__inner--interactive:focus-within .gallery-feature__caption small { opacity: 1; transform: translateY(0); } /* enter (hover/focus): title leads, paragraph trails a beat */ .gallery-feature__inner--interactive:hover .gallery-feature__caption strong, .gallery-feature__inner--interactive:focus-within .gallery-feature__caption strong { transition-delay: .06s; } .gallery-feature__inner--interactive:hover .gallery-feature__caption small, .gallery-feature__inner--interactive:focus-within .gallery-feature__caption small { transition-delay: .16s; } } @media (min-width: 880px) { .gallery-feature__top { grid-template-columns: auto auto; } }  @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}  .vibes-feature { position: relative; overflow: hidden; background: var(--color-surface); padding-top: clamp(3.2rem, 6.5vw, 5.8rem); padding-bottom: clamp(3.2rem, 6.5vw, 5.8rem); } /* full-height vertical wood-plank panel down the left edge */ .vibes-feature::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(12px, 1.625vw, 1.625rem); background: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/mifflin/wood-vertical.webp') center / cover; z-index: 0; /* drawn in from the left on scroll via --vb-plank (GSAP); full when no JS/motion */ transform-origin: left; transform: scaleX(var(--vb-plank, 1)); } .vibes-feature__inner { position: relative; padding-inline: var(--x-gap); display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 6.8vw, 6.8rem); align-items: center; } .vibes-feature__image { position: relative; z-index: 1; width: 100%; aspect-ratio: 5 / 6.15; object-fit: cover; } .vibes-feature__content { max-width: 38em; color: var(--color-text-muted); line-height: 1.75; } .vibes-feature__cta { margin-top: 1.4rem; } @media (min-width: 880px) { .vibes-feature::before { width: clamp(150px, 12vw, 340px); } .vibes-feature__inner { grid-template-columns: 46% 1fr; } }  .social-grid { position: relative; overflow: hidden; background: #fff; padding-top: calc(1.8 * var(--y-gap)); padding-bottom: calc(1.8 * var(--y-gap)); } /* a centered slider; cards are emphasised on hover, with neighbours peeking at the edges like the original layout */ .social-grid__swiper { position: relative; z-index: 1; /* room so the cards' (bottom-heavy) box shadow isn't clipped by the swiper's overflow: hidden */ padding-block: 20px 52px; --swiper-navigation-color: #fff; --swiper-navigation-size: 20px; --swiper-navigation-sides-offset: clamp(8px, 2vw, 40px); } /* slidesPerView:'auto' — each slide takes its own width, same as the old tiles */ .social-grid__swiper .swiper-slide { width: clamp(190px, 24.5vw, 480px); height: auto; } /* center the shorter photos against the taller featured card */ .social-grid__swiper .swiper-wrapper { align-items: center; } .social-grid__swiper .swiper-button-prev, .social-grid__swiper .swiper-button-next { width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); } /* a single sinusoidal text band behind the slider: top text rides the upper wave, bottom text the lower wave */ .social-grid__wave { position: absolute; top: 0; left: 0; /* width: 100%; */ height: 100%; color: var(--color-primary); z-index: 0; overflow: visible; max-width: 1600px; } /* the decorative wave is desktop-only — too cramped behind the cards on narrow screens (mobile-first: hidden by default, shown from 781px up) */ @media (min-width: 781px) { .social-grid__wave { display: block; } } .social-grid__wave text { font-family: var(--font-family-secondary); font-weight: 700; font-size: 38px; letter-spacing: .1em; fill: currentColor; text-transform: uppercase; } /* the bottom-trough word (MIFFLIN) reads ~33% larger than the crest phrase */ .social-grid__wave .social-grid__wave-word--lg { font-size: 50px; letter-spacing: .25em; } /* the two edge words (first trough word + last crest word, both half cut off at the viewport edges) recede in a light faded gray instead of brick */ .social-grid__wave .social-grid__wave-word--faded { fill: #d8d5d0; } .social-grid__card { display: block; width: 100%; position: relative; z-index: 2; border-radius: 6px; overflow: hidden; padding: .85rem 1.6rem; background: transparent; color: #222; font-weight: 500; font-size: 1.25em; transition: box-shadow .4s ease; text-decoration: none!important; /* prevent underline on links */ } .social-grid__card-head { display: flex; align-items: center; gap: .55rem; padding: 0 0 .6rem; } .social-grid__card-img { width: 100%; aspect-ratio: 47 / 51; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .4s ease; } .social-grid__card-bar { display: flex; align-items: center; gap: 1rem; padding: .6rem 0 0; } .social-grid__icon { display: inline-flex; color: #222; text-decoration: none; transition: color .2s ease; } /* icons load as deferred CSS masks (files in assets/images/icons) rather than inline SVGs — outline mask at rest, swapped to the solid mask on hover; the paint follows the link's currentColor so the colour change still transitions */ .social-grid__icon::before { content: ""; display: block; width: 23px; height: 23px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color .2s ease; } .social-grid__icon--like::before { background: #bd4833; -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/heart.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/heart.svg'); } .social-grid__icon--comment::before { -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/comment.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/comment.svg'); } .social-grid__icon--share::before { -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/share.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/share.svg'); } .social-grid__icon--bookmark::before { -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/bookmark.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/bookmark.svg'); } .social-grid__icon--bookmark { margin-left: auto; } /* on hover/focus the outline icons fill in (no movement) — the mask swaps to its solid variant; the heart also recolours to coral, the rest stay black */ .social-grid__icon--like:hover, .social-grid__icon--like:focus-visible { color: var(--color-accent); } .social-grid__icon--like:hover::before, .social-grid__icon--like:focus-visible::before { background: var(--color-primary); -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/heart-solid.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/heart-solid.svg'); } .social-grid__icon--comment:hover::before, .social-grid__icon--comment:focus-visible::before { -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/comment-solid.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/comment-solid.svg'); } .social-grid__icon--share:hover::before, .social-grid__icon--share:focus-visible::before { -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/share-solid.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/share-solid.svg'); } .social-grid__icon--bookmark:hover::before, .social-grid__icon--bookmark:focus-visible::before { -webkit-mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/bookmark-solid.svg'); mask-image: url('https://www.mifflinchapter.com/wp-content/themes/university-partners-2026/assets/images/icons/bookmark-solid.svg'); } /* card chrome (header + action bar) is hidden until the card is hovered (or focused), then fades in along with colour, border and shadow */ .social-grid__reveal { display: grid; opacity: 0; background: transparent; transition: opacity .45s ease, background .45s ease, border .45s ease; } .social-grid__card:hover, .social-grid__card:focus-within { z-index: 3; background: #fff; border: 1px solid #ececec; box-shadow: 0 24px 54px -24px rgba(0, 0, 0, .5); } .social-grid__card:hover .social-grid__card-img, .social-grid__card:focus-within .social-grid__card-img { filter: grayscale(0) contrast(1.02); } .social-grid__card:hover .social-grid__reveal, .social-grid__card:focus-within .social-grid__reveal { opacity: 1; } /* mobile-first: with no hover on small screens, the centred (active) slide carries the revealed instagram chrome at rest — the same treatment hover gives on desktop, applied to whichever card the slider has centred */ .social-grid__swiper .swiper-slide-active .social-grid__card { z-index: 3; background: #fff; border: 1px solid #ececec; box-shadow: 0 24px 54px -24px rgba(0, 0, 0, .5); } .social-grid__swiper .swiper-slide-active .social-grid__card-img { filter: grayscale(0) contrast(1.02); } .social-grid__swiper .swiper-slide-active .social-grid__reveal { opacity: 1; } /* from 781px up hover is available, so drop the always-on active treatment (only while the card isn't hovered/focused, so hover/focus still wins) and let the pointer drive the reveal again */ @media (min-width: 781px) { .social-grid__swiper .swiper-slide-active .social-grid__card:not(:hover):not(:focus-within) { z-index: 2; background: transparent; border: 0; box-shadow: none; } .social-grid__swiper .swiper-slide-active .social-grid__card:not(:hover):not(:focus-within) .social-grid__card-img { filter: grayscale(1) contrast(1.05); } .social-grid__swiper .swiper-slide-active .social-grid__card:not(:hover):not(:focus-within) .social-grid__reveal { opacity: 0; } }  .cta-form { background: var(--color-primary-deep); color: #fff; padding-top: clamp(3.2rem, 6vw, 5rem); padding-bottom: clamp(3.2rem, 6vw, 5rem); } .cta-form__inner { padding-inline: var(--x-gap); display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); } .cta-form__content { max-width: 33em; margin-top: 1.4rem; color: #eccfc9; font-size: clamp(1.05rem, 1.2vw, 1.45rem); line-height: 1.5; } /* Entrata lead form — restyled to match the mockup's CTA form. The markup and classes are owned by the Entrata component; we only override its appearance here, scoped to .cta-form so the contact-page form stays untouched. The higher-specificity .cta-form prefix wins over the component's base styles. */ .cta-form .form { gap: 16px; } .cta-form .form__input { height: auto; width: 100%; border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; padding: 1em 1.1em; font-family: var(--font-family-primary); font-size: .9rem; background: transparent; color: #fff; } .cta-form .form__input::placeholder { color: #e7c6c0; } .cta-form .form__input:focus { outline: none; border-color: #fff; } .cta-form .form__input--select { color: #e7c6c0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e7c6c0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1em center; } .cta-form .form__input--text-area { min-height: 7.5rem; } /* inline validation messages, legible on the dark panel */ .cta-form .form__group__error { color: #ffd2cb; font-size: .82rem; margin-top: .35rem; } /* coral submit, centered — matches the mockup button */ .cta-form .form__btn { display: block; width: fit-content; /* margin: .6rem auto 0; */ border: none; border-radius: 8px; padding: 1.05em 2.4em; background: var(--color-accent); color: #fff; font-family: var(--font-family-primary); font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .cta-form .form__btn:hover, .cta-form .form__btn:focus { background: var(--color-accent-dark); } @media (min-width: 900px) { .cta-form__inner { grid-template-columns: 1fr 1.05fr; } }  .footer { background: var(--color-primary-deep); color: #f4ece9; text-align: center; padding-top: clamp(2.4rem, 5vw, 3.4rem); } .footer__brand { line-height: 0; margin-bottom: 1.4rem; } .footer__logo { height: clamp(48px, 4.4vw, 62px); width: auto; display: inline-block; } /* Contact: phone · divider · stacked labeled addresses */ .footer__contact { font-size: .92rem; color: #f0ddd8; margin-bottom: 1.6rem; padding: 0 var(--x-gap); display: flex; flex-direction: column; align-items: center; gap: 1rem; } .footer__phone { font-family: var(--font-family-secondary); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1; letter-spacing: .01em; color: #fff; } .footer__phone:hover { text-decoration: underline; } .footer__divider { width: 64px; height: 1px; background: rgba(255, 255, 255, .28); } .footer__addresses { display: flex; flex-direction: column; gap: .35rem; text-align: center; } .footer__addr { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; } .footer__addr-label { font-family: var(--font-family-primary); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-light); } @media (min-width: 680px) { .footer__contact { flex-direction: row; align-items: center; justify-content: center; gap: 0; } .footer__divider { width: 1px; height: 50px; margin: 0 1.5rem; } .footer__addresses { text-align: left; } .footer__addr { flex-direction: row; justify-content: flex-start; } } /* Social icons restyled for the dark footer (outlined circles) */ .footer__socials { justify-content: center; margin-bottom: 2.2rem; } .footer__socials .sns__link { background: #fff; border: 1.5px solid rgba(255, 255, 255, .6); padding: .6rem; } .footer__socials .sns__link::before { background: var(--color-primary-deep); } .footer__socials .sns__link:hover, .footer__socials .sns__link:focus-visible { background: transparent; } .footer__socials .sns__link:hover::before, .footer__socials .sns__link:focus-visible::before { background: #fff; } /* Bottom bar: policies · footer nav · partner logo */ .footer__bar { border-top: 1px solid rgba(255, 255, 255, .18); padding: 1.2rem var(--x-gap); display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; justify-items: center; } .footer__policies-menu { display: flex; gap: .5rem; justify-content: center; } .footer__policies-menu .menu__item { display: inline-block; } .footer__policies-menu .menu__item:not(:last-child)::after { content: '|'; font-size: .7em; color: rgba(255, 255, 255, .18); margin-left: .25rem; } .footer__policies-menu .menu__link { font-family: var(--font-family-primary); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: #f4ece9; } .footer__nav { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; justify-content: center; } .footer__nav .menu__link { font-family: var(--font-family-primary); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: #f4ece9; } /* current page: coral accent + underline against the brick footer */ .footer__nav .menu__item--current .menu__link { color: var(--color-accent, #e9bcb0); text-decoration: underline; text-underline-offset: 4px; } .footer__partner { display: flex; align-items: center; } .footer__partner img { width: 90px; height: auto; display: block; } @media (min-width: 980px) { .footer__bar { grid-template-columns: 1fr auto 1fr; } .footer__policies-menu { justify-self: start; } .footer__nav { justify-self: center; } .footer__partner { justify-self: end; grid-column: 3; } }