/**
 * Destination Grid widget.
 *
 * Colour and type resolve through component tokens declared on `.goxom-dg`,
 * each pointing at a theme global first (--color-primary, --color-black,
 * --font-title …) with a literal fallback for the Elementor editor, where the
 * theme stylesheet is not always loaded. A rebrand is an edit to the theme's
 * :root, not to this file.
 *
 * Cards are never left invisible: the "hide first" rules are scoped to
 * `.goxom-dg--js`, which the JS adds only once it knows GSAP is available, and
 * the GSAP-less path gets `.goxom-dg--css` keyframes instead.
 */

.goxom-dg {
	/* Brand */
	--dg-primary: var(--color-primary, #1273C4);
	--dg-primary-dark: var(--color-primary-dark, #0B5596);

	/* Ink */
	--dg-title: var(--color-black, #0C2338);
	--dg-body: var(--color-body, #5A7387);
	--dg-white: var(--color-white, #ffffff);

	/* Surface */
	--dg-tint: var(--color-tint, #F0F6FC);
	--dg-line: var(--color-line, rgba(12, 35, 56, .1));

	/* Type */
	--dg-font-title: var(--font-title, inherit);
	--dg-font-body: var(--font-body, inherit);

	/* Shape */
	--dg-radius: 20px;
	--dg-ease: cubic-bezier(.22, .61, .36, 1);

	/* The scrim is built from the ink token so it sits in the palette rather
	   than being a generic black wash.
	   Six stops rather than three, tracing an ease-out curve: a straight ramp
	   between two stops has a visible shoulder where it meets the photo, and on
	   a bright sky that shoulder reads as a seam across the card. */
	--dg-scrim: linear-gradient(
		to top,
		color-mix(in srgb, var(--dg-title) 94%, transparent) 0%,
		color-mix(in srgb, var(--dg-title) 84%, transparent) 12%,
		color-mix(in srgb, var(--dg-title) 60%, transparent) 28%,
		color-mix(in srgb, var(--dg-title) 34%, transparent) 44%,
		color-mix(in srgb, var(--dg-title) 13%, transparent) 62%,
		transparent 82%
	);

	position: relative;
	padding: 100px 20px;
	font-family: var(--dg-font-body);
}

.goxom-dg__inner {
	position: relative;
	max-width: 1320px;
	margin-inline: auto;
}

/* ================================================================== heading */

.goxom-dg__head {
	margin-bottom: 48px;
	text-align: center;
}

.goxom-dg__subtitle {
	display: block;
	margin-bottom: 12px;
	font-family: var(--dg-font-title);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dg-primary);
}

.goxom-dg__title {
	margin: 0;
	font-family: var(--dg-font-title);
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.14;
	font-weight: 700;
	color: var(--dg-title);
}

/* Word masking for the default title animation — the JS injects these, so with
   no JS the heading stays plain text. */
.goxom-dg__title .goxom-dg__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.goxom-dg__title .goxom-dg__w > span,
.goxom-dg__title .goxom-dg__char {
	display: inline-block;
	will-change: transform, opacity;
}

/* ===================================================================== grid */

.goxom-dg__grid {
	--goxom-dg-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--goxom-dg-cols), minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 48px;
}

/* Mosaic: the first card carries two columns and two rows, and `dense` lets
   the smaller cards backfill the gap it leaves rather than pushing a hole
   through the layout. */
.goxom-dg--mosaic .goxom-dg__grid {
	grid-auto-flow: dense;
}

/* Rows are sized by the ordinary cards' aspect-ratio; the feature stretches
   across two of them, so its own ratio steps aside.
   Two things about this selector: the grid class is in it purely for
   specificity, because the Card Ratio control writes `aspect-ratio` two
   classes deep and this has to outrank it — and the whole rule is behind a
   min-width so that on phones the ratio simply never gets overridden, rather
   than being overridden back to a hardcoded number that would ignore the
   control. */
@media (min-width: 768px) {
	.goxom-dg--mosaic .goxom-dg__grid .goxom-dg__card--feature {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: auto;
	}
}

/* Stagger: every second card drops half a gap, which reads as editorial rather
   than as a misaligned grid because the offset is consistent.
   margin, not transform — the reveal tweens, the hover lift and the tilt all
   write to transform, and any one of them would flatten an offset set there. */
.goxom-dg--stagger .goxom-dg__card:nth-child(even) {
	margin-top: 28px;
}

.goxom-dg--stagger .goxom-dg__grid {
	margin-bottom: 76px;
}

/* ==================================================================== cards */

.goxom-dg__card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1.1;
	border-radius: var(--dg-radius);
	text-decoration: none;
	/* Dark rather than the light tint: this is what shows through while a photo
	   is still decoding, and a pale slab flashing behind a dark card is the more
	   noticeable of the two. */
	background-color: color-mix(in srgb, var(--dg-title) 86%, #000);
	/* A resting shadow, not just a hover one — without it the cards read as
	   flat cut-outs on a tinted section. */
	box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--dg-title) 55%, transparent);
	transition: transform .45s var(--dg-ease), box-shadow .45s var(--dg-ease);
}

a.goxom-dg__card:focus-visible {
	outline: 3px solid var(--dg-primary);
	outline-offset: 3px;
}

/* Media wrapper, absolutely positioned. The image used to sit directly in the
   card at `height: 100%`, which depends on a percentage resolving against an
   aspect-ratio box and on nothing else in the cascade setting `height` on an
   img — in practice the photos rendered at their natural height and left a
   slab of card background beneath them. `inset: 0` needs neither. */
.goxom-dg__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	transition: transform .7s var(--dg-ease);
}

/* The parent class is in this selector to win a specificity fight, not for
   readability: Elementor ships `.elementor img { height: auto }` at (0,1,1),
   which outranks a lone `.goxom-dg__img` at (0,1,0). And `height: auto` is not
   harmless here — an absolutely positioned *replaced* element resolves it to
   the image's intrinsic height and ignores `bottom`, so the photo sits at the
   top of the frame at its natural size with a strip of card showing beneath.
   That, rather than any letterboxing, was the band under these cards. */
.goxom-dg__media .goxom-dg__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	will-change: transform;
}

/* ---------------------------------------------------------------- image fit */

/* cover — the photo fills the card and is cropped to do it. This is the
   default fit, and the only one that guarantees all four edges are photo. */
.goxom-dg--fit-cover .goxom-dg__img {
	object-fit: cover;
}

/* The overscan is the parallax's alone: the tween drifts the image inside its
   frame, and the extra 12% keeps an edge from swinging into view. `--drift` is
   added by the JS only once the tween is actually bound, so a card that never
   moves — no ScrollTrigger, parallax off — is not charged 12% of its picture
   for a drift that is not coming. */
.goxom-dg--drift .goxom-dg__img {
	top: -6%;
	bottom: auto;
	height: 112%;
}

/* contain — the whole photo, never cropped. What is left over at the sides or
   top is filled by the blurred backdrop below rather than by flat bars. */
.goxom-dg--fit-contain .goxom-dg__img {
	object-fit: contain;
}

/* Two classes deep for the same reason as the photo above. */
.goxom-dg__media .goxom-dg__backdrop {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Scaled past the frame so the blur's soft edge never lands inside it. */
	transform: scale(1.18);
	/* Darkened as well as blurred, and close to opaque. At half opacity over a
	   pale card the letterbox came out as a flat grey slab that read as a
	   loading state; carrying the photo's own colour at this depth makes the
	   band look like the frame it is meant to be. */
	filter: blur(28px) saturate(1.3) brightness(.72);
	opacity: .95;
	transition: opacity .5s var(--dg-ease), transform .7s var(--dg-ease);
	pointer-events: none;
}

.goxom-dg--fit-contain .goxom-dg__backdrop {
	display: block;
}

/* The contained photo needs an edge, or a picture whose own border is dark
   dissolves into the blurred band behind it and the card loses its subject. */
.goxom-dg--fit-contain .goxom-dg__img {
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
}

/* natural — the card takes the photo's own aspect ratio, published per card as
   --dg-ratio by the template. Frame and picture are then the same shape, so
   `cover` has nothing to crop and `contain` would have nothing to letterbox:
   the whole image, edge to edge, with no band under it. Rows go ragged, which
   is the trade.
   The grid class is in the selector for specificity, since the Card Ratio
   control writes aspect-ratio two classes deep — and that control still
   supplies the fallback for any image whose dimensions could not be read. */
.goxom-dg--fit-natural .goxom-dg__grid {
	/* stretch would override the ratio and reintroduce the band. */
	align-items: start;
}

.goxom-dg--fit-natural .goxom-dg__grid .goxom-dg__card {
	aspect-ratio: var(--dg-ratio, 1.1);
}

.goxom-dg--fit-natural .goxom-dg__img {
	object-fit: cover;
}

/* Per-card ratios and a fixed 2×2 block are contradictory: a card sized to its
   own photo cannot also be told to fill four cells. In this fit the mosaic's
   feature card stands down and the layout reads as an even grid whose rows are
   set by the photos themselves. */
.goxom-dg--fit-natural .goxom-dg__grid .goxom-dg__card--feature {
	grid-column: span 1;
	grid-row: span 1;
}

/* The zoom lives on the wrapper, not the image: the image's own transform is
   spoken for by the parallax tween, and two owners of one transform means the
   last writer wins every frame.
   Kept away from `contain`, where the frame holds a letterboxed picture and
   scaling it would drag the photo's edges behind the card's own bounds — a
   crop, in the one mode chosen specifically to avoid one. `cover` and
   `natural` both fill their frame, so the zoom reads as intended there. */
.goxom-dg--zoom:not(.goxom-dg--fit-contain) .goxom-dg__card:hover .goxom-dg__media,
.goxom-dg--zoom:not(.goxom-dg--fit-contain) a.goxom-dg__card:focus-visible .goxom-dg__media {
	transform: scale(1.07);
}

/* `contain` gets a cue that costs no pixels instead: the backdrop behind the
   letterbox warms up and drifts, leaving the photo itself untouched. */
.goxom-dg--zoom.goxom-dg--fit-contain .goxom-dg__card:hover .goxom-dg__backdrop {
	opacity: .75;
	transform: scale(1.24);
}

/* Left unconditional even when the tilt is on: GSAP writes the card's
   transform inline, so on a desktop pointer the tilt simply supersedes this,
   while tablets and touch — where the tilt never binds — keep the lift. Both
   land on the same -8px, so the handover is invisible. */
.goxom-dg--lift .goxom-dg__card:hover,
.goxom-dg--lift .goxom-dg__card.is-hold,
.goxom-dg--lift a.goxom-dg__card:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 26px 46px -20px color-mix(in srgb, var(--dg-title) 48%, transparent);
}

.goxom-dg--tilt .goxom-dg__card {
	will-change: transform;
}

/* A hairline ring that tightens on hover — cheaper than a border and it never
   shifts the layout. */
.goxom-dg__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dg-white) 22%, transparent);
	opacity: 0;
	transition: opacity .4s var(--dg-ease);
	pointer-events: none;
}

.goxom-dg__card:hover::after {
	opacity: 1;
}

/* ============================================================ name & count */

.goxom-dg__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--dg-scrim);
	opacity: .92;
	transition: opacity .4s ease;
	pointer-events: none;
}

.goxom-dg__card:hover .goxom-dg__overlay {
	opacity: 1;
}

.goxom-dg__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 26px;
	pointer-events: none;
}

.goxom-dg--mosaic .goxom-dg__card--feature .goxom-dg__body {
	padding: 34px;
}

.goxom-dg__name {
	position: relative;
	font-family: var(--dg-font-title);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--dg-white);
	/* The photo underneath is uncontrolled, so the scrim alone cannot be
	   trusted to carry the text — a soft shadow guarantees the name reads over
	   a bright horizon as well as a dark one. */
	text-shadow: 0 2px 14px color-mix(in srgb, var(--dg-title) 60%, transparent);
	transition: transform .45s var(--dg-ease);
}

/* A rule that draws itself under the name on hover: it points at the card
   being a link without adding anything to the resting state. */
.goxom-dg__name::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -7px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--dg-primary);
	transition: right .55s var(--dg-ease);
}

a.goxom-dg__card:hover .goxom-dg__name::after,
a.goxom-dg__card:focus-visible .goxom-dg__name::after {
	right: 0;
}

.goxom-dg--mosaic .goxom-dg__card--feature .goxom-dg__name {
	font-size: clamp(24px, 2.4vw, 32px);
}

/* The count reads as a chip rather than a caption — it gives the card a second
   piece of information without a second line of prose. */
.goxom-dg__count {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	/* Tinted with the ink token, not white: a 16% white chip vanished against
	   the pale sky that sits at the top of most landscape photos. */
	background-color: color-mix(in srgb, var(--dg-title) 55%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dg-white) 22%, transparent);
	backdrop-filter: blur(10px) saturate(1.3);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--dg-white);
}

.goxom-dg__count-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--dg-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dg-primary) 30%, transparent);
}

/* The card lifts its label a touch on hover, which sells the scrim deepening
   underneath it. */
.goxom-dg__card:hover .goxom-dg__name {
	transform: translateY(-2px);
}

/* Hover mode: label and scrim ride in together. Driven by CSS so it stays
   responsive to a pointer that leaves mid-animation. */
.goxom-dg--label-hover .goxom-dg__overlay,
.goxom-dg--label-hover .goxom-dg__body {
	opacity: 0;
	transition: opacity .4s ease, transform .45s var(--dg-ease);
}

.goxom-dg--label-hover .goxom-dg__body {
	transform: translateY(16px);
}

.goxom-dg--label-hover .goxom-dg__card:hover .goxom-dg__overlay,
.goxom-dg--label-hover a.goxom-dg__card:focus-visible .goxom-dg__overlay {
	opacity: 1;
}

.goxom-dg--label-hover .goxom-dg__card:hover .goxom-dg__body,
.goxom-dg--label-hover a.goxom-dg__card:focus-visible .goxom-dg__body {
	opacity: 1;
	transform: none;
}

/* ============================================================== arrow chip */

.goxom-dg__go {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--dg-white);
	color: var(--dg-title);
	opacity: 0;
	transform: scale(.6) rotate(-35deg);
	transition: opacity .35s var(--dg-ease), transform .45s var(--dg-ease),
	            background-color .35s ease, color .35s ease;
	pointer-events: none;
}

.goxom-dg__go svg {
	width: 17px;
	height: 17px;
	display: block;
}

.goxom-dg__card:hover .goxom-dg__go,
a.goxom-dg__card:focus-visible .goxom-dg__go {
	opacity: 1;
	transform: none;
	background-color: var(--dg-primary);
	color: var(--dg-white);
}

/* =================================================================== button */

.goxom-dg__foot {
	display: flex;
	justify-content: center;
}

.goxom-dg__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	padding: 16px 34px;
	border-radius: 999px;
	font-family: var(--dg-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var(--dg-white);
	background-color: var(--dg-primary);
	transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.goxom-dg__btn > * {
	position: relative;
	z-index: 1;
}

.goxom-dg__btn:hover,
.goxom-dg__btn:focus-visible {
	color: var(--dg-white);
	background-color: var(--dg-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--dg-primary-dark) 85%, transparent);
}

.goxom-dg__btn svg,
.goxom-dg__btn i {
	width: 1.1em;
	height: 1.1em;
	font-size: 1em;
	transition: transform .3s ease;
}

.goxom-dg__btn:hover svg,
.goxom-dg__btn:hover i {
	transform: translateX(4px);
}

/* ================================================================== notices */

.goxom-dg__notice {
	padding: 22px;
	margin-bottom: 24px;
	border: 1px dashed color-mix(in srgb, var(--dg-title) 35%, transparent);
	border-radius: 12px;
	text-align: center;
	color: var(--dg-title);
	background-color: color-mix(in srgb, var(--dg-primary) 7%, transparent);
}

/* ================================================================== reveals */

/* Only hide cards once JS has confirmed it will animate them. */
.goxom-dg--js[data-reveal="rise"] .goxom-dg__card,
.goxom-dg--js[data-reveal="scale"] .goxom-dg__card,
.goxom-dg--js[data-reveal="fade"] .goxom-dg__card,
.goxom-dg--js[data-reveal="wipe"] .goxom-dg__card,
.goxom-dg--js[data-reveal="flip"] .goxom-dg__card {
	opacity: 0;
}

/* GSAP-less fallback: the same reveals as keyframes, staggered by nth-child so
   the grid still arrives in a wave. */
.goxom-dg--css[data-reveal] .goxom-dg__card {
	animation: goxom-dg-rise .7s var(--dg-ease) both;
}

.goxom-dg--css[data-reveal="scale"] .goxom-dg__card { animation-name: goxom-dg-scale; }
.goxom-dg--css[data-reveal="fade"] .goxom-dg__card  { animation-name: goxom-dg-fade; }
.goxom-dg--css[data-reveal="wipe"] .goxom-dg__card  { animation-name: goxom-dg-wipe; }
.goxom-dg--css[data-reveal="flip"] .goxom-dg__card  { animation-name: goxom-dg-rise; }

.goxom-dg--css[data-reveal=""] .goxom-dg__card {
	animation: none;
	opacity: 1;
}

.goxom-dg--css .goxom-dg__card:nth-child(2)   { animation-delay: .07s; }
.goxom-dg--css .goxom-dg__card:nth-child(3)   { animation-delay: .14s; }
.goxom-dg--css .goxom-dg__card:nth-child(4)   { animation-delay: .21s; }
.goxom-dg--css .goxom-dg__card:nth-child(5)   { animation-delay: .28s; }
.goxom-dg--css .goxom-dg__card:nth-child(6)   { animation-delay: .35s; }
.goxom-dg--css .goxom-dg__card:nth-child(7)   { animation-delay: .42s; }
.goxom-dg--css .goxom-dg__card:nth-child(8)   { animation-delay: .49s; }
.goxom-dg--css .goxom-dg__card:nth-child(n+9) { animation-delay: .56s; }

@keyframes goxom-dg-rise {
	from { opacity: 0; transform: translateY(38px); }
	to   { opacity: 1; transform: none; }
}

@keyframes goxom-dg-scale {
	from { opacity: 0; transform: scale(.88); }
	to   { opacity: 1; transform: none; }
}

@keyframes goxom-dg-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes goxom-dg-wipe {
	from { opacity: 0; clip-path: inset(0 0 100% 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Title fallback. The GSAP path overrides this inline. */
.goxom-dg--css[data-title-anim] .goxom-dg__title {
	animation: goxom-dg-rise .8s var(--dg-ease) both;
}

/* =============================================================== breakpoints */

@media (max-width: 1024px) {
	.goxom-dg__grid {
		--goxom-dg-cols: 2;
	}
}

@media (max-width: 767px) {
	.goxom-dg {
		padding: 64px 16px;
	}

	.goxom-dg__grid {
		--goxom-dg-cols: 1;
		gap: 16px;
	}

	/* The feature's spans and ratio override live behind a min-width, so there
	   is nothing to undo here — a 2×2 block inside a single column would just
	   be a taller card with no contrast left to trade on. The stagger offset
	   does need undoing: once the cards are stacked it reads as broken
	   alignment rather than as rhythm. */
	.goxom-dg--stagger .goxom-dg__card:nth-child(even) {
		margin-top: 0;
	}

	.goxom-dg--stagger .goxom-dg__grid {
		margin-bottom: 48px;
	}

	.goxom-dg__body,
	.goxom-dg--mosaic .goxom-dg__card--feature .goxom-dg__body {
		padding: 20px;
	}

	.goxom-dg__name {
		font-size: 19px;
	}
}

/* Touch devices never get :hover, so hover-only affordances would be
   unreachable there. */
@media (hover: none) {
	.goxom-dg--label-hover .goxom-dg__overlay,
	.goxom-dg--label-hover .goxom-dg__body {
		opacity: 1;
		transform: none;
	}

	.goxom-dg__go {
		opacity: 1;
		transform: none;
	}
}

/* color-mix is recent enough that a couple of shipping browsers still miss it;
   without these the scrim and chips would render fully transparent. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.goxom-dg {
		--dg-scrim: linear-gradient(
			to top,
			rgba(6, 15, 61, .94) 0%,
			rgba(6, 15, 61, .84) 12%,
			rgba(6, 15, 61, .60) 28%,
			rgba(6, 15, 61, .34) 44%,
			rgba(6, 15, 61, .13) 62%,
			transparent 82%
		);
	}

	.goxom-dg__card {
		background-color: #060f3d;
		box-shadow: 0 12px 30px -20px rgba(6, 15, 61, .55);
	}

	.goxom-dg__count {
		background-color: rgba(6, 15, 61, .55);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	}

	.goxom-dg__name {
		text-shadow: 0 2px 14px rgba(6, 15, 61, .6);
	}

	.goxom-dg__card::after {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	}

	.goxom-dg--lift .goxom-dg__card:hover {
		box-shadow: 0 26px 46px -20px rgba(6, 15, 61, .48);
	}
}

@media (prefers-reduced-motion: reduce) {
	.goxom-dg__card,
	.goxom-dg__media,
	.goxom-dg__img,
	.goxom-dg__backdrop,
	.goxom-dg__btn,
	.goxom-dg__go,
	.goxom-dg__overlay,
	.goxom-dg__name,
	.goxom-dg__name::after,
	.goxom-dg__card::after,
	.goxom-dg__body {
		transition: none !important;
	}

	.goxom-dg--css[data-reveal] .goxom-dg__card,
	.goxom-dg--css[data-title-anim] .goxom-dg__title,
	.goxom-dg--js[data-reveal] .goxom-dg__card {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}