/* ==========================================================================
style-licht.css — build 20260903-a · WIT + ROZE
Eén bestand dat de site licht maakt: wit als achtergrond, roze als
accentkleur, en de XXX-signatuur terug in de koppen.
Zo werkt het:
· Je zet hem aan door in de van een pagina deze regel te plaatsen,
ALS LAATSTE stylesheet — dus onder style-fix.css en style-uitgelicht.css:
· Je zet hem uit door die ene regel weg te halen. Er verandert niets in
de andere bestanden, dus terugdraaien kost één handeling.
· Begin desnoods met alleen videos.html. Bevalt het, dan plak je dezelfde
regel in index.html, blog.html, info.html enzovoort.
Opgebouwd in drie lagen:
1. de kleuren zelf
2. de vlakken die eerst zwart waren en nu licht moeten worden
3. de XXX-signatuur
========================================================================== */
/* ==========================================================================
1. DE KLEUREN
De hele site tekent zich met deze handvol variabelen. Door ze hier te
overschrijven verandert alles in één keer mee — knoppen, randjes,
accenten, de dunne lijn links in beeld.
========================================================================== */
:root{
/* achtergronden */
--paper : #ffffff; /* de hoofdachtergrond */
--ivory : #fff6f9; /* kaarten en rustige vlakken, heel licht roze */
--white : #ffffff;
/* tekst — geen hard zwart maar een warme bijna-zwart met een roze zweem */
--ink : #241820;
--coal : #fff0f5; /* was de donkere voettekst-kleur, nu een roze paneel */
--text : #5d4d55;
--muted : #9c8b94;
/* het accent: rood wordt roze */
--red : #e0407e;
--red-bright : #ff5fa2;
--red-deep : #b32a62;
--red-soft : #f7b7d1;
/* lijnen */
--line : rgba(179,42,98,.16);
--line-d : rgba(179,42,98,.16);
/* eigen hulpkleuren voor deze variant */
--paneel : #fff0f5; /* vervangt de zwarte vlakken */
--paneel-rand : rgba(179,42,98,.22);
}
html,body{background:var(--paper)}
/* ==========================================================================
2. DE VLAKKEN DIE EERST ZWART WAREN
Alleen de kleuren wijzigen — geen enkele maat, marge of positie. De
indeling blijft dus exact zoals je hem kent.
========================================================================== */
/* --- 2a. De balk bovenaan ------------------------------------------------ */
.head{
background:rgba(255,255,255,.82);
border-bottom-color:var(--paneel-rand);
}
/* --- 2b. De kop van de pagina (videotheek, samenwerken) ------------------ */
.libhero,.shero{
background:
radial-gradient(110% 80% at 88% 0%,rgba(224,64,126,.10),transparent 55%),
var(--paneel);
color:var(--ink);
}
.libhero h1 em,.shero h1 em{color:var(--red-deep)}
.libhero .intro,.shero p{color:var(--text)}
.libhero .take,.shero .take{color:var(--muted)}
.libhero .take b,.shero .take b{color:var(--red-deep)}
.libhero .trustbar,.shero .trustbar{border-color:var(--line)}
.libhero .trustbar span,.shero .trustbar span{color:var(--text)}
.libhero-beam,.hero-beam{
background:linear-gradient(90deg,transparent,rgba(224,64,126,.18),#fff,rgba(255,95,162,.5),transparent);
}
/* --- 2c. Het bundelblok -------------------------------------------------- */
.bundle{
background:
linear-gradient(145deg,rgba(224,64,126,.08),transparent 45%),
var(--paneel);
color:var(--ink);
border-color:var(--paneel-rand);
}
.bundle-lbl{color:var(--red-deep)}
.bundle p,.bundle-list{color:var(--text)}
.bundle-price{border-bottom-color:var(--line)}
.bundle-price s{color:var(--muted)}
.bundle-price i{color:var(--red-deep)}
.bundle .btn-solid{background:var(--red);color:#fff;border-color:var(--red-deep)}
.bundle .btn-solid:hover{background:var(--red-deep)}
/* --- 2d. De donkere lijst-secties ---------------------------------------- */
.sec-ink{background:var(--paneel);color:var(--ink)}
.sec-ink .take{color:var(--muted)}
.sec-ink .take b,.sec-ink .head-xl em{color:var(--red-deep)}
.sec-ink p{color:var(--text)}
/* --- 2e. Het kader rond de voorproefjes ---------------------------------- */
/* De speler zelf blijft donker — dat hoort ook, een filmbeeld staat het
mooist in een donker kader. Alleen de rand eromheen wordt licht. */
.vp-media,.feat-media,.prod-media{
background:var(--paneel);
border-bottom:1px solid var(--line);
}
.vp-top,.feat-mediatop,.prod-top{color:var(--muted)}
.vp-top b,.feat-mediatop b{color:var(--red-deep)}
.chint{color:var(--muted)}
/* --- 2f. De voettekst ---------------------------------------------------- */
.foot{background:var(--paneel);color:var(--ink);border-top:1px solid var(--line)}
.foot p,.foot span{color:var(--text)}
.foot a{color:var(--ink)}
.foot a:hover{color:var(--red-deep)}
.foot-brand span{color:var(--red-deep)}
.foot-lbl{color:var(--red-deep)!important}
.foot-bot{border-top:1px solid var(--line)}
/* --- 2g. De bestelbalk onderin ------------------------------------------- */
.orderrail{
background:rgba(255,255,255,.95);
border-top-color:var(--red);
box-shadow:0 -12px 34px rgba(179,42,98,.10);
}
.orderrail .orderrail-title{color:var(--ink)}
.orderrail-frame{color:var(--muted)}
.orderrail .btn-solid{background:var(--red);color:#fff;border-color:var(--red-deep)}
/* --- 2h. Knoppen --------------------------------------------------------- */
/* De hoofdknop was zwart. In een lichte, roze site is roze logischer:
hij is meteen de aandachtstrekker op een witte pagina. */
.btn-solid{background:var(--red);color:#fff;border-color:var(--red-deep)}
.btn-solid:hover{background:var(--red-deep)}
.btn-line{border-color:var(--paneel-rand)}
.btn-line:hover{border-color:var(--red);color:var(--red-deep)}
/* --- 2i. Filters, zoeken en de rest van de bibliotheek ------------------- */
.filter{border-color:var(--paneel-rand)}
.filter.on{background:var(--red);color:#fff;border-color:var(--red)}
.libsearch input{background:var(--white);border-color:var(--paneel-rand)}
.badge-top{background:var(--red)}
.facade-tag::before{background:var(--red-bright)}
.progress{background:linear-gradient(90deg,var(--red-deep),var(--red-bright))}
/* --- 2j. De 18+-poort ----------------------------------------------------
Dit scherm ziet iedereen als eerste, dus leesbaarheid gaat hier voor sfeer.
De kaart is wit met donkere tekst; het roze zit in de rand, het kopje en
de knop. Contrast ruim boven de toegankelijkheidsnorm.
-------------------------------------------------------------------------- */
.gate{
background:rgba(255,240,246,.95);
backdrop-filter:blur(20px);
}
.gate-card{
background:#fff;
color:var(--ink);
border:1px solid var(--red);
box-shadow:0 30px 70px rgba(179,42,98,.18);
}
.gate-card h2{color:var(--ink)}
.gate-card p{color:var(--text)}
.gate-eyebrow{color:var(--red-deep)}
.gate-actions.on-dark .btn-solid{background:var(--red);color:#fff;border-color:var(--red-deep)}
.gate-actions.on-dark .btn-solid:hover{background:var(--red-deep)}
.gate-actions.on-dark .btn-line{border-color:var(--paneel-rand);color:var(--ink)}
.gate-actions.on-dark .btn-line:hover{color:#fff;border-color:var(--red)}
/* ==========================================================================
3. DE XXX-SIGNATUUR
Vroeger stond er vaak XXX vlak voor of vlak na een kop. Hieronder staan
drie manieren om dat terug te krijgen — van "helemaal zelf bepalen" tot
"overal automatisch".
========================================================================== */
/* --- 3a. Handmatig, per plek (aanbevolen) --------------------------------
Zet in je HTML gewoon XXX waar je hem wilt:
JOEY XXX
XXX ALLE VIDEO'S
*/
.xxx{
display:inline-block;
font-family:"Rubik Mono One",sans-serif;
color:var(--red);
letter-spacing:.02em;
vertical-align:baseline;
}
/* een iets bescheidener variant, voor in lopende tekst of kleine koppen */
.xxx-sm{
font-family:"Rubik Mono One",sans-serif;
font-size:.62em;
letter-spacing:.14em;
color:var(--red);
vertical-align:.18em;
}
/* --- 3b. Automatisch achter elke grote paginakop -------------------------
STAAT AAN. De signatuur komt vanzelf achter de
van elke pagina, dus
je hoeft in de HTML niets te doen. Wil je hem toch niet, zet dan
commentaartekens om dit blok — de rest van de site verandert daar niet
van. Voor schermlezers staat hij op aria-hidden-niveau buiten de tekst,
omdat het puur decoratie is. */
.libhero h1::after,.shero h1::after,.hero-title::after,
.legal-main h1::after,
.about-copy h1::after,
.spot-title::after{
content:" XXX";
color:var(--red);
font-size:.5em;
letter-spacing:.1em;
vertical-align:.35em;
}
/* --- 3c. Automatisch vóór elke sectiekop ---------------------------------
Zelfde idee, maar dan ervoor en bij de kleinere sectiekoppen. */
/*
.head-xl::before{
content:"XXX ";
color:var(--red-soft);
font-size:.45em;
letter-spacing:.12em;
vertical-align:.5em;
}
*/
/* ==========================================================================
4. KLEINE DINGEN DIE OP WIT ANDERS VALLEN
========================================================================== */
/* Op een donkere site verdwijnt een slagschaduw; op wit wordt hij snel
vuil. Daarom zachter en met een roze zweem in plaats van grijs. */
.feat-card{box-shadow:0 26px 60px rgba(179,42,98,.12),0 6px 18px rgba(179,42,98,.07)}
@media (hover:hover){
.vp:hover,.prod:hover{box-shadow:0 22px 50px rgba(179,42,98,.13)}
}
/* De korrel over de pagina is gemaakt voor een donkere ondergrond en maakt
wit een beetje grauw. Daarom hier zwakker. */
.grain{opacity:.35}
/* De dunne verticale lijn links */
.thread::before{
background:linear-gradient(transparent,rgba(224,64,126,.16) 12%,rgba(224,64,126,.16) 88%,transparent);
}
.thread-run{
background:linear-gradient(180deg,transparent,#fff,var(--red-bright),var(--red-deep));
box-shadow:0 0 18px rgba(255,95,162,.5);
}
/* Kleur van de browserbalk op mobiel. Zet in de van elke pagina ook:
anders blijft die balk zwart terwijl de site wit is. */
/* ==========================================================================
5. DE OVERIGE DONKERE VLAKKEN
Toegevoegd toen de lichte variant de standaard werd: alles wat op de
andere pagina's nog zwart was, wordt hier ook licht. Steeds alleen kleur,
nooit een maat of een marge.
========================================================================== */
/* --- 5a. Het "over mij"-blok en andere donkere secties -------------------- */
.sec-ink .about-copy p{color:var(--text)}
.sec-ink .about-copy .lead{color:var(--ink)}
.sec-ink .stat b,.sec-ink .stat span{color:var(--ink)}
.sec-ink .stat span{color:var(--text)}
.about-first .hero-proof{border-top-color:var(--line)}
.about-first .hero-proof span{color:var(--muted)}
.about-first .hero-proof b{color:var(--ink)}
.about-first .text-link{color:var(--red-deep)}
/* knoppen die op een donkere ondergrond stonden, binnen die secties */
.sec-ink .on-dark .btn-solid,
.contact .on-dark .btn-solid{background:var(--red);color:#fff;border-color:var(--red-deep)}
.sec-ink .on-dark .btn-line,
.contact .on-dark .btn-line{border-color:var(--paneel-rand);color:var(--ink)}
/* --- 5b. Het contactblok op de homepage ---------------------------------- */
.contact{
background:var(--paneel);
color:var(--ink);
border:1px solid var(--paneel-rand);
}
.contact-l h2 em{color:var(--red-deep)}
.contact-l p,.cnote{color:var(--text)}
.crow small{color:var(--red-deep)}
.contact a{color:var(--ink)}
.contact a:hover{color:var(--red-deep)}
/* --- 5c. De makersband (samenwerken) ------------------------------------- */
.mk-band{
background:var(--paneel);
color:var(--ink);
border-block-color:var(--paneel-rand);
}
.mk-band-lbl,.mk-band h2 em{color:var(--red-deep)}
.mk-band-sub{color:var(--text)}
.mk-roles li{color:var(--ink);border-color:var(--paneel-rand)}
/* --- 5d. De juridische pagina's (voorwaarden, privacy, 2257, refunds) ---- */
.legal-top{
background:var(--paneel);
color:var(--ink);
border-bottom:1px solid var(--line);
}
.legal-brand span{color:var(--red-deep)}
.legal-back:hover{color:var(--red-deep)}
/* --- 5e. Knoppen met een oplopende vulling ------------------------------- */
/* De omlijnde knop en de navigatieknop liepen vol met zwart. Nu met roze,
zodat ze bij de rest passen. */
.btn-line::before,.nav-cta::before{background:var(--red)}
.btn-line:hover,.nav-cta:hover{color:#fff;border-color:var(--red)}
/* --- 5f. Losse zwarte details -------------------------------------------- */
.sheet-total{background:var(--red);color:#fff}
.skip{background:var(--red);color:#fff}
.info-jump a:hover{background:var(--red);color:#fff;border-color:var(--red)}
.filter.on{background:var(--red);color:#fff;border-color:var(--red)}
/* De "sluiter" die over het scherm loopt bij een paginawissel was zwart.
Op een witte site is een lichte veeg rustiger voor de ogen. */
.aperture{background:var(--paneel)}
/* De loopband met steekwoorden: diep roze in plaats van diep rood. */
.marquee{background:var(--red-deep);color:#fff}
/* --- 5g. Het fotokader blijft donker ------------------------------------- */
/* Bewust niet aangeraakt: een portret of een filmbeeld staat het mooist in
een donker kader, ook op een witte pagina. Dat geldt voor .plate,
.portrait-card en de speler zelf. */
/* ==========================================================================
7. DE XXX-BREUK
Naast de signatuur achter de paginakop breekt XXX nu ook de pagina op,
op een paar plekken waar de ene sectie in de andere overgaat. Het is
hetzelfde teken, maar dan als adempauze in plaats van als handtekening.
Twee varianten:
.xxx-break lijn — XXX — lijn, voor tussen twee secties
.xxx-break.solo alleen de drie letters, zonder lijnen
In de HTML staat er aria-hidden op: het is decoratie, en een schermlezer
die drie keer "X" voorleest helpt niemand.
========================================================================== */
.xxx-break{
display:flex;
align-items:center;
gap:clamp(14px,3vw,34px);
width:min(var(--max),90vw);
margin:clamp(30px,5vw,58px) auto;
}
.xxx-break::before,
.xxx-break::after{
content:"";
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,var(--paneel-rand),transparent);
}
.xxx-break span{
font:clamp(12px,1.5vw,17px)/1 "Rubik Mono One",sans-serif;
letter-spacing:.36em;
padding-left:.36em; /* vangt de letterspatiëring achter de laatste X op */
color:var(--red);
white-space:nowrap;
}
/* de middelste X net iets dieper roze, zodat het teken niet plat oogt */
.xxx-break span i{font-style:normal;color:var(--red-deep)}
/* zonder lijnen, voor als een sectie er zelf al een rand heeft */
.xxx-break.solo::before,
.xxx-break.solo.solo::after{display:none}
.xxx-break.solo{justify-content:center}
/* op een donkere ondergrond (de lichtbak, het fotokader) */
.sec-ink .xxx-break span{color:var(--red-soft)}
@media (max-width:560px){
.xxx-break{gap:16px;margin-block:clamp(24px,7vw,36px)}
}
/* ==========================================================================
9. XXX IN DRIE MATEN
De breuk stond op één formaat. Nu zijn er drie, zodat het teken zich kan
aanpassen aan de plek: groot waar een pagina echt even ademt, klein waar
het alleen een scheiding is.
.xxx-break de gewone maat, tussen twee secties
.xxx-break.xl groot, als afsluiting van een pagina
.xxx-break.sm klein en zacht, in de voettekst of tussen alinea's
.xxx-break.solo zonder de lijnen ernaast
Ze zijn te combineren: class="xxx-break xl solo" is een grote XXX zonder
lijnen, midden op de pagina.
========================================================================== */
/* --- groot -------------------------------------------------------------- */
.xxx-break.xl{
margin-block:clamp(48px,7vw,96px);
gap:clamp(20px,4vw,48px);
}
.xxx-break.xl span{
font-size:clamp(26px,5vw,62px);
letter-spacing:.28em;
padding-left:.28em;
}
.xxx-break.xl::before,
.xxx-break.xl::after{
height:2px;
background:linear-gradient(90deg,transparent,var(--red-soft),transparent);
}
/* --- klein -------------------------------------------------------------- */
.xxx-break.sm{
margin-block:clamp(18px,2.6vw,30px);
gap:clamp(10px,2vw,20px);
}
.xxx-break.sm span{
font-size:clamp(9px,1vw,11px);
letter-spacing:.42em;
padding-left:.42em;
color:var(--red-deep);
opacity:.75;
}
/* in de voettekst loopt de breuk over de volle kolombreedte mee */
.foot .xxx-break{width:auto;margin-inline:0}
/* op de smalle tekstpagina's blijft de breuk binnen de leeskolom */
.legal-card .xxx-break{width:auto;margin-inline:0}
/* --- de signatuur achter de kop, per soort pagina ------------------------
Op een grote paginakop mag hij groot mee; boven een lap voorwaarden is
klein netter. */
.libhero h1::after,
.shero h1::after,
.hero-title::after,
.spot-title::after{font-size:.52em}
.about-copy h1::after{font-size:.44em}
.legal-main h1::after{
font-size:.38em;
color:var(--red-deep);
vertical-align:.5em;
}
/* ==========================================================================
10. DE FOTOSTROOK — ÉÉN BLOK, GEEN LOSSE LAGEN MEER
Hier stonden eerst drie versies over elkaar heen: de rechthoekige strook,
daarna de harten, daarna de rondjes. Die vochten met elkaar — een regel
uit de ene versie won het van een regel uit de andere, en dat is wat je
online zag. Nu staat alles op één plek.
WAT HET DOET
Rondjes onder elkaar, in vier afwisselende formaten, om en om links,
rechts en midden. De strook is precies zo hoog als de tekst ernaast: hij
rekt mee met de kolom in plaats van een eigen hoogte te hebben.
Op een smal scherm staat de tekst onder de strook in plaats van ernaast;
daar krijgt de strook wel een eigen hoogte, anders klapt hij dicht.
========================================================================== */
/* --- 10a. Even hoog als de tekst ---------------------------------------- */
@media (min-width:901px){
/* de twee kolommen even hoog maken in plaats van gecentreerd */
.about{ align-items:stretch }
/* de kolom met beeld wordt een staande stapel: strook boven, teller onder */
.about-reel{
display:flex;
flex-direction:column;
min-height:0;
}
/* de strook pakt alle ruimte die overblijft */
.about-reel .reel-frame{
flex:1 1 auto;
min-height:0;
display:flex;
}
.about-reel .gal.gal-reel{
height:auto;
max-height:none;
flex:1 1 auto;
min-height:0;
}
}
/* --- 10b. De strook zelf ------------------------------------------------ */
.reel-frame{
--perf:0px;
padding:0;
background:transparent;
border:0;
}
.reel-frame::before,.reel-frame::after{ display:none }
.gal.gal-reel{
display:grid;
grid-template-columns:1fr;
gap:clamp(10px,1.8vw,22px);
margin:0;
padding:8px 0;
height:clamp(420px,60vh,640px); /* geldt op smalle schermen; hierboven
wordt hij overschreven */
overflow-x:hidden;
overflow-y:auto;
scroll-snap-type:y proximity;
scrollbar-width:none;
/* zacht vervagen aan boven- en onderkant in plaats van hard afsnijden */
mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 30px),transparent 100%);
}
.gal.gal-reel::-webkit-scrollbar{ display:none }
/* --- 10c. De rondjes ----------------------------------------------------
Ze waren veel te groot: de kolom is een derde van het scherm breed, en
een rondje van 100% daarvan werd bijna zo hoog als een halve pagina.
Nu staan de maten in pixels in plaats van in procenten, zodat ze niet
meegroeien met de kolom maar gewoon klein blijven.
Ze overlappen elkaar een stukje en hebben een witte lijst met een dun
roze randje eromheen — als foto's die los op een plank staan.
Zelfde zwaarte als de regels in style-gallery.css, zodat er niets meer
tegenin gaat.
-------------------------------------------------------------------------- */
.gal.gal-reel{ gap:0 } /* de afstand komt nu uit de marges */
.gal-reel .gal-item:nth-child(n){
position:relative;
flex:none;
grid-column:auto;
aspect-ratio:1/1;
margin:0;
border-radius:50%;
overflow:hidden;
scroll-snap-align:center;
/* de lijst: witte rand, dun roze lijntje, zachte schaduw */
border:5px solid #fff;
box-shadow:
0 0 0 1px var(--paneel-rand),
0 10px 22px rgba(179,42,98,.16);
transition:transform .45s var(--ease),box-shadow .4s linear,border-color .3s linear;
}
/* vier maten die zich herhalen, en een plek per maat */
.gal-reel .gal-item:nth-child(4n+1){ width:clamp(92px,10vw,132px); justify-self:start }
.gal-reel .gal-item:nth-child(4n+2){ width:clamp(66px,7vw,96px); justify-self:end }
.gal-reel .gal-item:nth-child(4n+3){ width:clamp(80px,8.6vw,116px);justify-self:center }
.gal-reel .gal-item:nth-child(4n+4){ width:clamp(58px,6.2vw,84px); justify-self:start }
/* elk volgend rondje schuift een stuk over het vorige heen */
.gal-reel .gal-item:nth-child(n+2){
margin-block-start:calc(-1 * clamp(14px,1.8vw,26px));
}
/* de zijkanten iets naar binnen, anders raken ze de rand van de kolom */
.gal-reel .gal-item:nth-child(4n+1),
.gal-reel .gal-item:nth-child(4n+4){ margin-inline-start:clamp(4px,1.4vw,22px) }
.gal-reel .gal-item:nth-child(4n+2){ margin-inline-end:clamp(4px,1.4vw,22px) }
.gal-reel .gal-item img{
width:100%; height:100%;
object-fit:cover;
filter:saturate(1) contrast(1.02);
}
.gal-reel .gal-item:hover{
z-index:4;
transform:scale(1.07);
border-color:#fff;
box-shadow:
0 0 0 2px var(--red),
0 16px 32px rgba(179,42,98,.28);
}
/* de sluier over de foto zachter */
.gal-reel .gal-item::after{
background:linear-gradient(180deg,rgba(36,24,32,.08),transparent 40%,transparent 78%,rgba(36,24,32,.10));
}
/* framenummer, hoekjes en het loepje zaten in hoeken die er niet meer zijn */
.gal-reel .gal-item b,
.gal-reel .gal-item i,
.gal-reel .gal-item em{ display:none }
/* --- 10d. Kop en teller ------------------------------------------------- */
.gal-title{
margin:0 0 var(--s-3);
font:clamp(15px,1.4vw,19px)/1.1 "Rubik Mono One",sans-serif;
letter-spacing:-.03em;
color:var(--ink);
}
.gal-title em{ font-style:normal; color:var(--red-deep) }
.gal-head{ border-bottom-color:var(--line) }
.gal-count{ color:var(--red-deep) }
.gal-hint{ color:var(--muted) }
/* ==========================================================================
11. DE HARTJES — als accent, niet als vorm
Niet over de foto heen, maar eromheen: in de kop, bij de teller, en als
klein rood hartje dat opduikt zodra je een rondje aanwijst.
========================================================================== */
.gal-reel .gal-item::before{
content:"\2665";
position:absolute;
z-index:3;
left:50%; bottom:6%;
translate:-50% 6px;
width:22px; height:22px;
display:grid; place-items:center;
border-radius:50%;
background:var(--red);
color:#fff;
font-size:11px;
line-height:1;
opacity:0;
pointer-events:none;
transition:opacity .28s linear,translate .35s var(--ease);
}
.gal-reel .gal-item:hover::before{ opacity:1; translate:-50% 0 }
.gal-title::after{
content:"\2665";
margin-left:.5em;
color:var(--red);
font-family:"Manrope",sans-serif;
font-size:.9em;
}
.gal-count::before{
content:"\2665";
margin-right:.45em;
color:var(--red);
font-family:"Manrope",sans-serif;
}
.about-reel::after{
content:"\2665 \2665 \2665";
display:block;
margin-top:10px;
text-align:center;
letter-spacing:.7em;
font-size:10px;
color:var(--red-soft);
}
@media (prefers-reduced-motion:reduce){
.gal-reel .gal-item:nth-child(n){ transition:none }
.gal-reel .gal-item:hover{ transform:none }
}
@media (max-width:900px){
.gal.gal-reel{ height:clamp(380px,54vh,470px) }
.gal-reel .gal-item:nth-child(4n+1){ width:clamp(96px,26vw,140px) }
.gal-reel .gal-item:nth-child(4n+2){ width:clamp(72px,20vw,104px) }
.gal-reel .gal-item:nth-child(4n+3){ width:clamp(84px,23vw,120px) }
.gal-reel .gal-item:nth-child(4n+4){ width:clamp(64px,17vw,90px) }
}