/**
 * GGP Multicolumn — front end and editor.
 *
 * Built to GGP-DESIGN-SYSTEM.md: Manrope 800 headings with one Instrument
 * Serif italic accent, the documented token set, 22px outer / 16px inner radii,
 * spring easing on hovers, 0.5s image zoom.
 *
 * No JavaScript anywhere. The mobile carousel is CSS scroll-snap, which is
 * native swipe behaviour — see the plugin header for why a script is not an
 * option on this site.
 *
 * Namespaces on this site are deliberate and must not be crossed:
 *   .ggp       page content blocks
 *   .gsh-      header
 *   .gsf-      footer
 *   .fd-       fan deck
 *   .gss-      slideshow
 *   .gmc-      this block
 */

.ggp-multicolumn {
	/* Design-system tokens. On the wrapper, never on :root — a page block must
	   not reach outside itself. */
	--red: #c8102e;
	--red-soft: rgba( 200, 16, 46, 0.10 );
	--red-tint: #fdecef;
	--ink: #000000;
	--ink-mid: rgba( 60, 60, 67, 0.70 );
	--ink-soft: rgba( 60, 60, 67, 0.70 );
	--line: rgba( 0, 0, 0, 0.08 );
	--card: #ffffff;
	--shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.04 ), 0 1px 2px rgba( 0, 0, 0, 0.03 );
	--shadow-lg: 0 16px 56px rgba( 0, 0, 0, 0.10 ), 0 4px 16px rgba( 0, 0, 0, 0.05 );
	--spring: cubic-bezier( 0.34, 1.56, 0.64, 1 );

	/*
	 * 1600px, not the design system's 1080px. The live theme's Page width is
	 * set to 1600 and a four-up row of portraits needs it — capped at 1080 each
	 * card lands near 250px and the photos stop carrying the section. Flagged in
	 * GGP-DESIGN-SYSTEM.md rather than silently resolved.
	 */
	--gmc-max: 1600px;
	--gmc-gap: clamp( 14px, 1.6vw, 24px );

	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var( --ink );
}

/*
 * Every text element states its own font instead of inheriting it.
 *
 * Inheritance is not enough here and the reason is worth remembering: an
 * inherited value loses to ANY direct rule, at any specificity. The theme ships
 * `h1, h2, h3 { font-family: Poppins }`, which is (0,0,1) — feeble — but it
 * still beats `font-family` inherited from the wrapper, because inheritance
 * only applies when nothing else sets the property at all. Setting the wrapper
 * font styled the paragraphs and left every heading in the theme's face, which
 * is precisely the half-right result that looks fine until you measure it.
 */
.ggp-multicolumn .gmc-title,
.ggp-multicolumn .gmc-col-title,
.ggp-multicolumn .gmc-col-title a,
.ggp-multicolumn .gmc-eyebrow,
.ggp-multicolumn .gmc-sub,
.ggp-multicolumn .gmc-desc,
.ggp-multicolumn .gmc-link,
.ggp-multicolumn .gmc-btn {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ggp-multicolumn,
.ggp-multicolumn *,
.ggp-multicolumn *::before,
.ggp-multicolumn *::after {
	box-sizing: border-box;
}

.ggp-multicolumn .gmc-inner {
	max-width: var( --gmc-max );
	margin-inline: auto;
	padding: var( --gmc-pt, 4px ) clamp( 16px, 3vw, 28px ) var( --gmc-pb, 12px );
}

/* -------------------------------------------------------------------------
   Section header
   ------------------------------------------------------------------------- */

.ggp-multicolumn .gmc-head {
	max-width: 720px;
	margin: 0 auto 44px;
	text-align: center;
}

/*
 * A section heading is not always the display headline. "Popular Pages" over a
 * row of link cards wants to sit quietly at the left in small type; "More than
 * grad photos." over a photo row wants the full display treatment. Same field,
 * two jobs, so size and alignment are controls rather than assumptions.
 */
.ggp-multicolumn.is-head-left .gmc-head {
	margin-inline: 0;
	text-align: left;
}

.ggp-multicolumn.is-head-left .gmc-sub {
	margin-inline: 0;
}

.ggp-multicolumn .gmc-eyebrow {
	display: inline-block;
	background: none;
	color: var( --red );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0;
	border-radius: 0;
	margin-bottom: 14px;
}

.ggp-multicolumn .gmc-title {
	margin: 0;
	font-size: clamp( 2rem, 4.2vw, 3.2rem );
	font-weight: var( --gmc-head-w, 700 );
	letter-spacing: -0.028em;
	line-height: 1.06;
}

.ggp-multicolumn.is-head-medium .gmc-title {
	font-size: clamp( 1.6rem, 3vw, 2.2rem );
	letter-spacing: -0.022em;
	line-height: 1.12;
}

.ggp-multicolumn.is-head-small .gmc-title {
	font-size: clamp( 1.3rem, 2vw, 1.65rem );
	letter-spacing: -0.016em;
	line-height: 1.2;
}

/* A small heading needs less air under it than a display one. */
.ggp-multicolumn.is-head-small .gmc-head {
	margin-bottom: 24px;
}

.ggp-multicolumn.is-head-medium .gmc-head {
	margin-bottom: 32px;
}

/*
 * The house headline pattern: Manrope 800 with exactly one italic Instrument
 * Serif word. It is the single strongest brand signal in the type system, so
 * `<em>` is deliberately allowed through the heading fields.
 */
.ggp-multicolumn .gmc-title em,
.ggp-multicolumn .gmc-col-title em {
	/* v2: the serif accent word is retired. An <em> saved in a heading renders
	   as ordinary text rather than breaking the line. */
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	letter-spacing: inherit;
}

.ggp-multicolumn .gmc-sub {
	margin: 14px auto 0;
	max-width: 580px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var( --ink-soft );
}

/* -------------------------------------------------------------------------
   The grid
   ------------------------------------------------------------------------- */

.ggp-multicolumn .gmc-grid {
	display: grid;
	grid-template-columns: repeat( var( --gmc-cols, 4 ), minmax( 0, 1fr ) );
	gap: var( --gmc-gap );
	list-style: none;
	margin: 0;
	padding: 0;
}

.ggp-multicolumn .gmc-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ggp-multicolumn.is-align-center .gmc-col {
	text-align: center;
	align-items: center;
}

/* -------------------------------------------------------------------------
   Image
   ------------------------------------------------------------------------- */

/*
 * 16px is the design system's inner-card radius and the default here. The
 * control runs 0–60 because "however I want" was the ask; the editor says where
 * the house style sits rather than enforcing it.
 */
.ggp-multicolumn .gmc-media {
	display: block;
	width: var( --gmc-img-w, 100% );
	overflow: clip;
	border-radius: var( --gmc-radius, 16px );
	background: #f4f4f4;
}

.ggp-multicolumn.is-align-center .gmc-media {
	margin-inline: auto;
}

.ggp-multicolumn .gmc-img {
	display: block;
	width: 100%;
	height: auto;
	/* 0.5s ease is the documented image-zoom timing. Everything else in the
	   system is faster; the photo is the one thing allowed to take its time. */
	transition: transform 0.5s ease;
}

/*
 * "Adapt to image" is the absence of an aspect-ratio, not a value for it. With
 * a ratio set the photo is cropped to fill; without one it keeps its own shape
 * and the row's cards end up different heights, which is exactly what the
 * setting promises.
 */
.ggp-multicolumn.is-ratio-fixed .gmc-img {
	aspect-ratio: var( --gmc-ratio, 5 / 3 );
	height: 100%;
	object-fit: cover;
}

.ggp-multicolumn .gmc-col:hover .gmc-img {
	transform: scale( 1.04 );
}

/* -------------------------------------------------------------------------
   Card body
   ------------------------------------------------------------------------- */

.ggp-multicolumn .gmc-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 18px;
	flex: 1;
}

.ggp-multicolumn.is-align-center .gmc-body {
	align-items: center;
}

/*
 * Weight is a control, not a constant.
 *
 * 800 is the house default and stays the default, but a row of quiet link
 * cards wants a title that sits at the same weight as its own description —
 * and there was no way to get there, because this is not `<strong>` and Bold
 * has nothing to switch off. Hence the variable.
 */
.ggp-multicolumn .gmc-col-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: var( --gmc-title-w, 800 );
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.ggp-multicolumn .gmc-col-title a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.ggp-multicolumn .gmc-col-title a:hover {
	color: var( --red );
}

.ggp-multicolumn .gmc-desc {
	margin: 12px 0 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.55;
	color: var( --ink-mid );
}

.ggp-multicolumn .gmc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 0.875rem;
	font-weight: var( --gmc-link-w, 700 );
	letter-spacing: -0.01em;
	color: var( --ink );
	text-decoration: none;
	transition: color 0.15s ease;
}

.ggp-multicolumn .gmc-link:hover {
	color: var( --red );
}

/*
 * The arrow used to be the `&rarr;` glyph, which inherited the link's 700
 * weight and came out heavier than the label it sat next to — a text glyph has
 * no thickness of its own to set. A stroked path does: `--gmc-arrow-weight` is
 * the only thing that decides how heavy it reads, independently of the label,
 * the font and the text size. Picked off a rendered ladder against the old
 * glyph: 1.6 is indistinguishable from it, 1.25 is only slightly lighter, and
 * 1.1 is the first step that reads as a hairline next to a 700 label. Below
 * 1.0 the stroke lands under a whole CSS pixel and goes soft on a 1x screen.
 */
.ggp-multicolumn .gmc-arrow {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	fill: none;
	stroke: currentColor;
	stroke-width: var( --gmc-arrow-weight, 1.1 );
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.ggp-multicolumn .gmc-link:hover .gmc-arrow {
	transform: translateX( 4px );
}

/* The label is its own element so the arrow cannot be dragged around by the
   label's own inline sizing — an "XL" word in the label should not scale the
   arrow with it. */
.ggp-multicolumn .gmc-link-label {
	display: inline;
}

/* Push the link to the bottom so a row of cards lines its links up even when
   the descriptions run to different lengths. */
.ggp-multicolumn .gmc-link:last-child {
	margin-top: auto;
	padding-top: 16px;
}

/* -------------------------------------------------------------------------
   Inline text styles
   -------------------------------------------------------------------------

   Applied to a selection inside any of the rich text fields, so the same nine
   classes have to behave in a 3.2rem section heading and a 0.875rem card
   description alike.

   Sizes are in `em`, never `rem` or `px`. `em` is relative to whatever the
   containing field is set to, so "Larger" means one step up from this text
   rather than one absolute size — which is the only way a single control can
   serve a heading and a link label without one of them looking wrong. It also
   means the mobile type scale further down keeps working: shrink the field and
   everything inside it shrinks with it.
   ------------------------------------------------------------------------- */

.ggp-multicolumn .gmc-fs-xs { font-size: 0.72em; }
.ggp-multicolumn .gmc-fs-sm { font-size: 0.86em; }
.ggp-multicolumn .gmc-fs-lg { font-size: 1.3em; }
.ggp-multicolumn .gmc-fs-xl { font-size: 1.7em; }

/*
 * Larger text inside a line of body copy pushes the line box open and the
 * paragraph's leading goes ragged. Tightening the inline line-height keeps the
 * surrounding lines evenly spaced.
 */
.ggp-multicolumn .gmc-fs-lg,
.ggp-multicolumn .gmc-fs-xl {
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/*
 * The two families the design system allows, and no others. Serif carries the
 * italic and the 400 weight with it because that combination *is* the accent —
 * Instrument Serif upright at 800 is not a thing this site uses.
 */
.ggp-multicolumn .gmc-f-serif {
	/* v2: serif accent retired; the editor control still applies the class but
	   no longer changes the face. */
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	letter-spacing: inherit;
}

.ggp-multicolumn .gmc-f-sans {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-style: normal;
}

/*
 * Inline weight. Wins over the field's own weight because it matches the span
 * itself rather than being inherited, so no !important and no specificity
 * games. Only the five weights the font file actually contains — anything else
 * gets synthesised and stops looking like Manrope.
 */
.ggp-multicolumn .gmc-w-400 { font-weight: 400; }
.ggp-multicolumn .gmc-w-500 { font-weight: 500; }
.ggp-multicolumn .gmc-w-600 { font-weight: 600; }
.ggp-multicolumn .gmc-w-700 { font-weight: 700; }
.ggp-multicolumn .gmc-w-800 { font-weight: 800; }

.ggp-multicolumn .gmc-c-red { color: var( --red ); }
.ggp-multicolumn .gmc-c-muted { color: var( --ink-soft ); }
.ggp-multicolumn .gmc-c-white { color: #fff; }

/*
 * Bold, from the editor's own control.
 *
 * `<strong>` defaults to 700, which is *lighter* than the 800 a heading already
 * is — so bolding a word in a heading would visibly un-bold it. Each context
 * gets the weight that is actually a step up from its own.
 */
.ggp-multicolumn .gmc-desc strong,
.ggp-multicolumn .gmc-desc b,
.ggp-multicolumn .gmc-sub strong,
.ggp-multicolumn .gmc-sub b {
	font-weight: 700;
}

/*
 * Bold inside a field that is already heavy has to go somewhere heavier, and
 * these fields no longer have a fixed weight to step up from. `max()` on the
 * chosen weight is the whole trick: at a 400 title, bold lands on 700 and
 * reads as bold; at an 800 title it stays 800 rather than dropping to the
 * `<strong>` default of 700, which is what made bolding a heading look like
 * it un-bolded it.
 */
.ggp-multicolumn .gmc-title strong,
.ggp-multicolumn .gmc-title b {
	font-weight: max( 700, var( --gmc-head-w, 800 ) );
}

.ggp-multicolumn .gmc-col-title strong,
.ggp-multicolumn .gmc-col-title b {
	font-weight: max( 700, var( --gmc-title-w, 800 ) );
}

.ggp-multicolumn .gmc-link strong,
.ggp-multicolumn .gmc-link b {
	font-weight: max( 700, var( --gmc-link-w, 700 ) );
}

/* An inline link inside a description. Underlined rather than coloured, so it
   does not compete with the red accent. */
.ggp-multicolumn .gmc-desc a,
.ggp-multicolumn .gmc-sub a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.ggp-multicolumn .gmc-desc a:hover,
.ggp-multicolumn .gmc-sub a:hover {
	color: var( --red );
}

/* -------------------------------------------------------------------------
   Secondary background — the card treatment
   ------------------------------------------------------------------------- */

/*
 * The card, not the photo, is what has corners once a background is on — so the
 * roundness control drives all four of them. An earlier version pinned the
 * bottom two at the design system's 22px, which meant 0 could never actually
 * produce a square card. Square cards are a real design (see the Popular Pages
 * row), so the control wins and 22 stays the default rather than the floor.
 */
.ggp-multicolumn:not( .is-card-none ) .gmc-col {
	border-radius: var( --gmc-radius, 16px );
	overflow: clip;
	transition: transform 0.25s var( --spring ), box-shadow 0.25s ease, background-color 0.2s ease;
}

.ggp-multicolumn.is-card-light .gmc-col,
.ggp-multicolumn.is-card-dark .gmc-col {
	box-shadow: var( --shadow-sm );
}

.ggp-multicolumn.is-card-light .gmc-col:hover,
.ggp-multicolumn.is-card-dark .gmc-col:hover {
	transform: translateY( -5px );
	box-shadow: var( --shadow-lg );
}

/*
 * A full-width image inside a card runs edge to edge and lets the card's own
 * 22px radius clip it. A half or third width image cannot do that — it would
 * float against the card's top-left corner with nothing under it — so it keeps
 * its own rounding and sits inside the card's padding instead.
 *
 * The first version of this rule set `width: 100%` for every card, which
 * silently threw away an explicit Half or Third setting. A control that looks
 * like it worked and did nothing is worse than one that is not offered.
 */
/* A full-width photo in a card is clipped by the card, so it squares itself. */
.ggp-multicolumn:not( .is-card-none ).is-img-full .gmc-media {
	border-radius: 0;
	width: 100%;
}

.ggp-multicolumn:not( .is-card-none ):not( .is-img-full ) .gmc-media {
	width: var( --gmc-img-w, 100% );
	max-width: calc( 100% - 40px );
	margin: 18px 20px 0;
}

.ggp-multicolumn:not( .is-card-none ):not( .is-img-full ).is-align-center .gmc-media {
	margin-inline: auto;
}

.ggp-multicolumn:not( .is-card-none ) .gmc-body {
	padding: 18px 20px 22px;
}

/*
 * A card with no photo has nothing above the copy, so the 18px meant as a gap
 * under an image becomes a cramped top margin. `:only-child` catches exactly
 * that case without needing a class from PHP.
 */
.ggp-multicolumn:not( .is-card-none ) .gmc-body:only-child {
	padding: 26px 22px 24px;
}

.ggp-multicolumn.is-card-light .gmc-col {
	background: var( --card );
	border: 1px solid var( --line );
}

/*
 * "Secondary" is the theme's flat panel, and it is deliberately calmer than the
 * light card: no border, no shadow, no lift. A row of eight of these is a
 * navigation aid, not eight things asking to be clicked, and eight cards each
 * rising 5px on hover reads as fidgety.
 */
.ggp-multicolumn.is-card-secondary .gmc-col {
	background: #f1f1f1;
}

.ggp-multicolumn.is-card-secondary .gmc-col:hover {
	background: #eaeaea;
}

/*
 * The dark card gradient is hardcoded in the design system rather than
 * tokenised, so it is reproduced literally here — including the red glow, which
 * is the one place a gradient is allowed on a background.
 */
.ggp-multicolumn.is-card-dark .gmc-col {
	background: linear-gradient( 160deg, #18181b 0%, #0a0a0a 60% );
	color: #fff;
	position: relative;
}

.ggp-multicolumn.is-card-dark .gmc-col::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -30%;
	width: 60%;
	height: 90%;
	background: radial-gradient( circle, rgba( 200, 16, 46, 0.35 ) 0%, rgba( 200, 16, 46, 0 ) 60% );
	pointer-events: none;
	z-index: 0;
}

.ggp-multicolumn.is-card-dark .gmc-body {
	position: relative;
	z-index: 1;
}

.ggp-multicolumn.is-card-dark .gmc-desc {
	color: rgba( 255, 255, 255, 0.72 );
}

.ggp-multicolumn.is-card-dark .gmc-link,
.ggp-multicolumn.is-card-dark .gmc-col-title a {
	color: #fff;
}

.ggp-multicolumn.is-card-dark .gmc-link:hover,
.ggp-multicolumn.is-card-dark .gmc-col-title a:hover {
	color: var( --red-tint );
}

/* "Muted" means muted against the surrounding text, not a fixed grey. On a
   dark card the fixed grey is nearly invisible, so it flips with the card. */
.ggp-multicolumn.is-card-dark .gmc-c-muted {
	color: rgba( 255, 255, 255, 0.55 );
}

/* Red on near-black fails contrast. The tint is the same accent, legible. */
.ggp-multicolumn.is-card-dark .gmc-c-red {
	color: var( --red-tint );
}

/* -------------------------------------------------------------------------
   Section button
   ------------------------------------------------------------------------- */

.ggp-multicolumn .gmc-cta {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.ggp-multicolumn .gmc-btn {
	display: inline-flex;
	align-items: center;
	background: var( --ink );
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 100px;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ggp-multicolumn .gmc-btn:hover {
	opacity: 0.87;
	transform: scale( 0.97 );
}

/* -------------------------------------------------------------------------
   Tablet
   ------------------------------------------------------------------------- */

@media ( min-width: 750px ) and ( max-width: 989px ) {
	.ggp-multicolumn.gmc-hide-tablet {
		display: none;
	}

	/* Four across is too tight on a tablet whatever the desktop setting says.
	   Cap at two and let the rows wrap. */
	.ggp-multicolumn .gmc-grid {
		grid-template-columns: repeat( min( var( --gmc-cols, 4 ), 2 ), minmax( 0, 1fr ) );
	}
}

/* -------------------------------------------------------------------------
   Phones
   ------------------------------------------------------------------------- */

@media ( max-width: 749px ) {
	.ggp-multicolumn.gmc-hide-mobile {
		display: none;
	}

	.ggp-multicolumn .gmc-grid {
		grid-template-columns: repeat( var( --gmc-mob-cols, 1 ), minmax( 0, 1fr ) );
	}

	.ggp-multicolumn .gmc-head {
		margin-bottom: 28px;
	}

	.ggp-multicolumn .gmc-title {
		font-size: clamp( 1.6rem, 7.4vw, 2.2rem );
	}

	.ggp-multicolumn .gmc-col-title {
		font-size: clamp( 1rem, 4.4vw, 1.15rem );
	}

	.ggp-multicolumn .gmc-desc {
		font-size: clamp( 0.82rem, 3.5vw, 0.875rem );
	}

	.ggp-multicolumn .gmc-link,
	.ggp-multicolumn .gmc-btn {
		font-size: clamp( 0.8rem, 3.4vw, 0.875rem );
	}

	/* Two-up on a phone leaves very little width, so the image goes full
	   regardless of the desktop half/third setting. */
	.ggp-multicolumn.is-mob-cols-2 .gmc-media {
		width: 100%;
	}

	/*
	 * Carousel. scroll-snap is the entire mechanism: the browser's own
	 * momentum scrolling does the swiping, the snap points do the paging, and
	 * no script is involved. `overflow-x: auto` here is safe because .gmc-grid
	 * has no sticky descendants — elsewhere on this site that would be a trap.
	 */
	.ggp-multicolumn.is-mob-carousel .gmc-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: clamp( 16px, 3vw, 28px );
		/* Bleed to the screen edges so the next card peeks in and the swipe
		   affordance is obvious without a dot row. */
		margin-inline: calc( -1 * clamp( 16px, 3vw, 28px ) );
		padding-inline: clamp( 16px, 3vw, 28px );
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.ggp-multicolumn.is-mob-carousel .gmc-grid::-webkit-scrollbar {
		display: none;
	}

	.ggp-multicolumn.is-mob-carousel .gmc-col {
		flex: 0 0 auto;
		width: calc( ( 100% - var( --gmc-gap ) ) / var( --gmc-mob-cols, 1 ) );
		scroll-snap-align: start;
	}

	.ggp-multicolumn.is-mob-carousel.is-mob-cols-1 .gmc-col {
		width: 82%;
	}
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.ggp-multicolumn .gmc-img,
	.ggp-multicolumn .gmc-col,
	.ggp-multicolumn .gmc-arrow,
	.ggp-multicolumn .gmc-btn {
		transition: none;
	}

	.ggp-multicolumn .gmc-col:hover .gmc-img {
		transform: none;
	}

	.ggp-multicolumn:not( .is-card-none ) .gmc-col:hover {
		transform: none;
	}
}