is deliberate:
pseudo-elements are painted inside the element's own paint
record and never promoted to a separate GPU compositing layer.
This guarantees overflow:hidden clips them correctly even when
the parent card is mid-3D-tilt. An injected
can escape
its parent's clip when the parent has an active 3D transform.
*/
.glass::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 2; /* above card content (z:1), below nothing */
opacity: 0;
background: radial-gradient(
circle at var(--gx, 50%) var(--gy, 50%),
rgba(255, 255, 255, 0.09) 0%,
transparent 55%
);
transition: opacity 0.5s var(--ease);
/* Deliberately NO will-change here — keeping it in the parent layer */
}
.glass.glow-on::after {
opacity: 1;
}
/* Neutralise old .card-specular elements (in case any are cached) */
.card-specular { display: none !important; }
/* ── Enhanced glass hover border ────────────────────────────── */
.project-card:hover {
border-color: rgba(255, 255, 255, 0.22);
border-top-color: rgba(255, 255, 255, 0.42);
}
.system-card:hover {
border-color: rgba(255, 255, 255, 0.20);
border-top-color: rgba(255, 255, 255, 0.36);
}
.service-card:hover {
border-color: rgba(255, 255, 255, 0.18);
border-top-color: rgba(255, 255, 255, 0.32);
}
/* ── Custom cursor ───────────────────────────────────────────── */
.cursor-dot {
position: fixed;
top: 0; left: 0;
width: 8px;
height: 8px;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.75);
border-radius: 50%;
pointer-events: none;
z-index: 100000;
/* No mix-blend-mode — difference blend inverts underlying colors
and can produce unexpected hues (the "blue highlighter" effect) */
opacity: 0;
transform: translate(-50%, -50%) scale(1);
transition:
transform 0.3s var(--ease),
opacity 0.4s var(--ease),
border-color 0.3s var(--ease);
will-change: left, top, transform;
}
.cursor-dot.cursor--hovering {
transform: translate(-50%, -50%) scale(4.5);
border-color: rgba(255, 255, 255, 0.45);
}
.cursor-dot.cursor--clicking {
transform: translate(-50%, -50%) scale(2);
border-color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 767px), (pointer: coarse) {
.cursor-dot { display: none; }
}
/* ── Service card list item stagger ─────────────────────────── */
/*
Items start invisible and shifted left. When the parent card
receives .visible (via app.js IntersectionObserver), the cascade
triggers each li with an increasing delay.
*/
.service-card__list li {
opacity: 0;
transform: translateX(-14px);
transition:
opacity 0.55s var(--ease),
transform 0.55s var(--ease);
}
.service-card.visible .service-card__list li {
opacity: 1;
transform: translateX(0);
}
.service-card.visible .service-card__list li:nth-child(1) { transition-delay: 0.32s; }
.service-card.visible .service-card__list li:nth-child(2) { transition-delay: 0.44s; }
.service-card.visible .service-card__list li:nth-child(3) { transition-delay: 0.56s; }
.service-card.visible .service-card__list li:nth-child(4) { transition-delay: 0.68s; }
.service-card.visible .service-card__list li:nth-child(5) { transition-delay: 0.80s; }
/* ── Project tag entrance stagger ───────────────────────────── */
.project-tag {
transition:
opacity 0.5s var(--ease),
transform 0.5s var(--ease);
/* Tags start in their resting state (not hidden) since they are
already inside a .reveal card that starts at opacity:0.
This adds additional stagger once the card is visible. */
}
.project-card .project-card__meta .project-tag:nth-child(1) { transition-delay: 0.22s; }
.project-card .project-card__meta .project-tag:nth-child(2) { transition-delay: 0.32s; }
.system-card .system-card__meta .project-tag:nth-child(1) { transition-delay: 0.18s; }
.system-card .system-card__meta .project-tag:nth-child(2) { transition-delay: 0.28s; }
/* ── Image placeholder — dot grid ───────────────────────────── */
/*
Replaces the flat linear-gradient with a dot grid — more
intentional, clearly a design decision rather than a missing image.
*/
.project-card__img-placeholder {
background-color: #0c0c0c;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 22px 22px;
}
.system-card__img-placeholder {
background-color: #0b0b0b;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 22px 22px;
}
/* ── Noise texture — film grain overlay ─────────────────────── */
/*
A subtle fractal noise at 3% opacity adds the organic texture
that separates premium dark sites from flat digital ones.
z-index: 99 sits above content, below nav/preloader/cursor.
pointer-events: none means it is completely non-interactive.
*/
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 99;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 168px 168px;
}
/* Confirm these stay above the noise layer */
#site-nav { z-index: 1000; }
#preloader { z-index: 9999; }
.cookie-banner { z-index: 5000; }
.mob-menu { z-index: 999; }
.cursor-dot { z-index: 100000; }
/* ── Contact card — Instagram active state glow ─────────────── */
a.contact-card:hover .contact-card__icon {
color: rgba(255, 255, 255, 0.80);
}
a.contact-card:hover .contact-card__icon svg {
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.22));
transition: filter 0.45s var(--ease);
}
/* ── About visual placeholder — enhanced glass ──────────────── */
.about-visual__placeholder {
/* Add a subtle inner cross-gradient to give it more glass depth */
background:
radial-gradient(
ellipse at 30% 25%,
rgba(255, 255, 255, 0.04) 0%,
transparent 60%
),
var(--glass-bg);
}
/* ════════════════════════════════════════════════════════════
BUG FIXES
════════════════════════════════════════════════════════════ */
/* ── Liquid glass text ───────────────────────────────────────
Grey/muted text elements get a diagonal gradient instead of
a flat rgba opacity. The gradient shifts between two slightly
different white levels at an angle — mimicking how light
refracts through glass. Combined with drop-shadow this gives
a frosted, luminous quality without touching size or weight.
No hue introduced — stays strictly monochromatic.
*/
/* Body text — descriptions, taglines, about copy */
.hero-tagline,
.about-body,
.contact-sub,
.project-card__desc,
.system-card__desc,
.service-card__desc {
background: linear-gradient(
158deg,
rgba(255, 255, 255, 0.76) 0%,
rgba(255, 255, 255, 0.46) 42%,
rgba(255, 255, 255, 0.68) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 1px 6px rgba(255, 255, 255, 0.07));
}
/* Section labels — currently at 0.22 opacity, very faint */
.sec-label {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.48) 0%,
rgba(255, 255, 255, 0.28) 50%,
rgba(255, 255, 255, 0.42) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Contact card platform labels ("Instagram" etc.) */
.contact-card__platform {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.44) 0%,
rgba(255, 255, 255, 0.26) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Service list items — fix ::before dash so it stays visible */
.service-card__list li {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.56) 0%,
rgba(255, 255, 255, 0.36) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Restore the — dash glyph in ::before (it inherits transparent fill) */
.service-card__list li::before {
-webkit-text-fill-color: rgba(255, 255, 255, 0.22);
}
/* ── Hero letter wave ─────────────────────────────────────────
Each letter starts at translateY(20px) + opacity 0.
When .letters-in is added at t≈3, they animate in with
staggered delays (--li × 65ms) creating a left-to-right wave.
opacity & transform are always GPU-composited — zero jank.
*/
.hero-letter {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.7s var(--ease-snap),
transform 0.7s var(--ease-snap);
transition-delay: calc(var(--li, 0) * 0.065s);
}
.hero-center-title.letters-in .hero-letter {
opacity: 1;
transform: translateY(0);
}
/* ── FIX 1: Aurora blob containment layer ────────────────────
Injected by motion.js inside each section that has blobs.
overflow: hidden ensures blur never bleeds into adjacent
sections or cards. The section itself stays overflow: visible
so 3D card hover (translateY / scale) is unaffected.
*/
.aura-layer {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
/* Blobs are now clipped to exactly the section's bounds */
}
@media (max-width: 767px) {
.aura-layer { display: none; }
}
/* ── FIX 2: overflow:hidden + transform-style:preserve-3d conflict
CSS spec: preserve-3d is overridden by overflow:hidden, but
browser behaviour is inconsistent — sometimes the overflow
does NOT clip, so the .card-specular bleeds visually onto
neighbouring cards when the card tilts in 3D.
Fix: force transform-style: flat on project/system cards.
They tilt via JS transform on the card element itself — no
CHILDREN need 3D context — so flat is correct and safe.
(service-card keeps preserve-3d for its icon translateZ).
*/
.project-card,
.system-card {
transform-style: flat;
}
/* ── FIX 3: Hero VITOWEB title — smooth hover glow ──────────
The old approach animated 4-layer text-shadow on a ~13rem
font every frame → pure CPU rasterisation → jank.
New approach: a ::after pseudo with a pre-blurred radial
gradient that only transitions OPACITY — GPU-composited,
zero per-frame rasterisation. mix-blend-mode: screen makes
the glow additive (brightens whatever is behind, including
the video frame).
*/
.hero-center-title {
/* Establish containing block for ::after */
isolation: isolate;
}
.hero-center-title::after {
content: '';
position: absolute;
/* extend well beyond the letter bounds */
top: -80%; left: -25%;
width: 150%; height: 260%;
background: radial-gradient(
ellipse 55% 60% at 50% 48%,
rgba(255, 255, 255, 0.20) 0%,
rgba(255, 255, 255, 0.08) 30%,
transparent 70%
);
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
transition: opacity 0.42s var(--ease);
will-change: opacity;
/* keep below the text's own paint */
z-index: -1;
}
.hero-center-title:hover::after {
opacity: 1;
}
/* On mobile hero title is already much smaller — skip glow */
@media (max-width: 480px) {
.hero-center-title::after { display: none; }
}
/* ════════════════════════════════════════════════════════════
WORK LIST — Full-width project showcase (#websites section)
Replaces the old 3-card project grid.
════════════════════════════════════════════════════════════ */
.work-list {
margin-top: clamp(3rem, 6vw, 5rem);
}
/* ── Each project row ── */
.work-item {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.07);
/* Default: VISIBLE. JS adds .clip-hidden for the reveal animation
(progressive enhancement — content always accessible without JS). */
}
.work-item:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* Clip-path reveal — only when JS has added .clip-hidden */
.work-item.clip-hidden {
clip-path: inset(0 0 100% 0);
transition: clip-path 0.72s var(--ease-snap);
}
.work-item.clip-hidden.in-view {
clip-path: inset(0 0 0% 0);
}
/* Stagger per row */
.work-item.clip-hidden:nth-child(1) { transition-delay: 0.00s; }
.work-item.clip-hidden:nth-child(2) { transition-delay: 0.06s; }
.work-item.clip-hidden:nth-child(3) { transition-delay: 0.12s; }
.work-item.clip-hidden:nth-child(4) { transition-delay: 0.18s; }
.work-item.clip-hidden:nth-child(5) { transition-delay: 0.24s; }
.work-item.clip-hidden:nth-child(6) { transition-delay: 0.30s; }
.work-item.clip-hidden:nth-child(7) { transition-delay: 0.36s; }
/* Row highlight on hover */
.work-item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.022);
opacity: 0;
transition: opacity 0.4s var(--ease);
pointer-events: none;
}
.work-item:hover::after { opacity: 1; }
/* Red accent line — slides in from left on hover */
.work-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background: var(--red);
transform: scaleY(0);
transform-origin: bottom center;
transition: transform 0.45s var(--ease-snap);
z-index: 2;
}
.work-item:hover::before { transform: scaleY(1); }
/* ── Inner link — full-row clickable area ── */
/* Columns: num | info | desktop-thumb | cta */
.work-item__link {
display: grid;
grid-template-columns: clamp(2.5rem, 5vw, 4rem) 1fr clamp(90px, 13vw, 200px) auto;
align-items: center;
gap: clamp(0.75rem, 2vw, 1.75rem);
padding: clamp(1.4rem, 2.8vw, 2.2rem) 0;
cursor: pointer;
position: relative;
z-index: 1;
}
/* ── Project number ── */
.work-item__num {
font-family: var(--font-display);
font-size: clamp(0.9rem, 1.8vw, 1.35rem);
letter-spacing: 0.12em;
color: var(--text-subtle);
flex-shrink: 0;
transition: color 0.4s var(--ease);
line-height: 1;
padding-top: 0.1em;
}
.work-item:hover .work-item__num {
color: var(--red);
}
/* ── Info block ── */
.work-item__info {
min-width: 0;
}
/* ── Project name — large display type ── */
.work-item__name {
font-family: var(--font-display);
font-size: clamp(2rem, 5.5vw, 4.5rem);
font-weight: 400;
letter-spacing: 0.03em;
line-height: 1;
color: var(--text);
display: block;
margin-bottom: 0.55rem;
transition: transform 0.55s var(--ease-snap), letter-spacing 0.55s var(--ease);
}
.work-item:hover .work-item__name {
transform: translateX(0.35rem);
letter-spacing: 0.055em;
}
/* ── Tags row ── */
.work-item__tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.35rem;
}
/* ── Domain ── */
.work-item__domain {
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.1em;
color: var(--text-subtle);
display: block;
transition: color 0.4s var(--ease);
}
.work-item:hover .work-item__domain {
color: var(--text-muted);
}
/* ── View CTA ── */
.work-item__cta {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-subtle);
white-space: nowrap;
flex-shrink: 0;
transition: color 0.4s var(--ease), gap 0.4s var(--ease);
padding-left: clamp(0.5rem, 2vw, 1rem);
}
.work-item:hover .work-item__cta {
color: var(--text);
gap: 0.75rem;
}
/* ── Always-visible desktop thumbnail (3rd grid column) ── */
.work-item__thumb {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.work-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.55s var(--ease), filter 0.45s var(--ease);
filter: brightness(0.82) saturate(0.82);
}
.work-item:hover .work-item__thumb img {
transform: scale(1.06);
filter: brightness(1) saturate(1.05);
}
/* Hide on tablets and below; collapse the ghost grid column */
@media (max-width: 768px) {
.work-item__thumb { display: none; }
.work-item__link {
grid-template-columns: clamp(2.5rem, 5vw, 4rem) 1fr auto;
}
}
/* ── Cursor-following floating image (desktop only) ── */
.work-item__img-wrap {
position: fixed;
top: 0;
left: 0;
width: clamp(220px, 20vw, 380px);
aspect-ratio: 16 / 9; /* matches actual image dimensions (2400×1350) */
border-radius: var(--radius-sm);
overflow: hidden;
pointer-events: none;
z-index: 900;
opacity: 0;
transform: scale(0.84) rotate(-3deg);
transition:
opacity 0.42s var(--ease-snap),
transform 0.5s var(--ease-snap);
will-change: transform, opacity;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.75),
0 6px 20px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
/* Separate layer — composited by GPU, not affected by parent overflow */
}
.work-item__img-wrap.img-active {
opacity: 1;
transform: scale(1) rotate(-0.5deg);
}
.work-item__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Mobile thumbnail (hidden on desktop, shown on touch) ── */
.work-item__mobile-thumb {
display: none;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: clamp(1rem, 2vw, 1.5rem);
position: relative;
z-index: 1;
}
.work-item__mobile-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Show thumbnail + hide fixed image on touch / coarse pointer */
@media (hover: none), (pointer: coarse) {
.work-item__mobile-thumb { display: block; }
.work-item__img-wrap { display: none; }
/* Collapse to 3 columns: num | info | cta (desktop thumb hidden via its own @media) */
.work-item__link {
grid-template-columns: 2.2rem 1fr auto;
gap: 0.6rem;
}
}
/* At very small screens, hide the CTA text — the whole row is already a link */
@media (max-width: 360px) {
.work-item__cta { display: none; }
}
/* ════════════════════════════════════════════════════════════
GALLERY GRID — websites section
Full-bleed image grid: 2 col mobile → 3 col tablet → 4 col desktop
Professional pattern: images only, label on hover (always visible on touch)
════════════════════════════════════════════════════════════ */
/* Strip horizontal padding from the section so gallery bleeds edge-to-edge.
Restore it on the sec-inner wrapper (the heading) only. */
.sec--websites {
padding-left: 0;
padding-right: 0;
/* Keep top/bottom padding on the section via sec-inner margin */
}
.sec--websites .sec-inner {
padding-left: var(--pad-x);
padding-right: var(--pad-x);
padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
/* Grid container */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
/* No side padding — full bleed */
}
@media (min-width: 640px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
.gallery-grid {
grid-template-columns: repeat(4, 1fr);
/* Fixed row height drives all cell heights on desktop.
This collapses 3 rows into ~1 viewport instead of aspect-ratio
letting each row grow to 16/9 of its column width. */
grid-auto-rows: clamp(160px, 18vw, 270px);
}
}
/* Individual card */
.gallery-item {
position: relative;
overflow: hidden;
display: block;
aspect-ratio: 16 / 9; /* mobile/tablet: ratio drives height */
background: var(--bg-elevated);
-webkit-tap-highlight-color: transparent;
/* Pre-create GPU layer — prevents compositing tear on Windows Chrome */
transform: translateZ(0);
}
/* Desktop: grid-auto-rows controls height — aspect-ratio must be unset
or it fights the row height and creates collapsed/broken cells */
@media (min-width: 1100px) {
.gallery-item { aspect-ratio: unset; }
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
/* Slight desaturation at rest — pops on hover */
filter: brightness(0.86) saturate(0.82);
transition: transform 0.7s var(--ease), filter 0.55s var(--ease);
will-change: transform;
}
/* Hover — pointer devices only */
@media (hover: hover) {
.gallery-item:hover img {
transform: scale(1.05);
filter: brightness(1) saturate(1.08);
}
}
/* Labels removed per design decision */
.gallery-item__label { display: none; }
/* Category head: visible — label + SEO description above each image row */
/* ── Spanning rules ────────────────────────────────────────────
Mobile 2-col: [1,2][3,4][5,6][7→span2]
Tablet 3-col: [1,2,3][4,5,6][7→span3]
Desktop 4-col: mirror bento layout
Row 1 → [1][2][3→span2] (small, small, large)
Row 2 → [4→span2][5][6] (large, small, small) — mirror of row 1
Row 3 → [7→span4] (full-width closer)
──────────────────────────────────────────────────────────── */
/* Mobile default */
.gallery-item:last-child { grid-column: span 2; }
/* Tablet */
@media (min-width: 640px) {
.gallery-item:last-child { grid-column: span 3; }
}
/* Desktop bento — kept for reference, gallery-grid no longer in HTML */
@media (min-width: 1100px) {
.gallery-item:nth-child(3) { grid-column: span 2; }
.gallery-item:nth-child(4) { grid-column: span 2; }
.gallery-item:last-child { grid-column: 2 / 4; }
}
/* ════════════════════════════════════════════════════════════
CATEGORY-GROUPED GALLERY
════════════════════════════════════════════════════════════ */
.gallery-categories {
display: flex;
flex-direction: column;
}
.gallery-category {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gallery-category__head {
padding: 0.75rem var(--pad-x);
}
.gallery-category__head-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.gallery-category__label {
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-subtle);
white-space: nowrap;
}
.gallery-category__projects {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 300;
color: var(--text-muted);
opacity: 0.5;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gallery-category__more {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
opacity: 0.5;
white-space: nowrap;
transition: opacity 0.2s;
}
.gallery-category__more:hover { opacity: 1; color: var(--text-base); }
/* Images side-by-side within a category — all screen sizes */
.gallery-row {
display: flex;
flex-direction: row;
gap: 2px;
}
.gallery-row .gallery-item {
flex: 1 1 0;
min-width: 0;
}
/* Single-item row */
.gallery-row--single {
justify-content: center;
}
.gallery-row--single .gallery-item {
flex: 1 1 auto;
}
@media (min-width: 640px) {
.gallery-row--single .gallery-item {
flex: 0 0 clamp(280px, 58%, 680px);
}
}
/* 3-card rows: 2 side-by-side on top, last full-width below */
.gallery-row--three {
flex-wrap: wrap;
}
.gallery-row--three .gallery-item {
flex: 1 1 calc(50% - 1px);
min-width: 0;
}
.gallery-row--three .gallery-item:last-child {
flex: 0 0 100%;
}
/* Desktop: fixed row height keeps all 4 categories compact */
@media (min-width: 1100px) {
.gallery-row .gallery-item {
aspect-ratio: unset;
height: clamp(155px, 16vw, 245px);
}
.gallery-row--single .gallery-item {
aspect-ratio: unset;
height: clamp(175px, 19vw, 280px);
}
}