.mt-auto – Zet margin-top: auto om een element naar de onderkant van een flex-container te duwen.
.margin-column-right / .margin-column-left – Voegt een negatieve horizontale marge toe (ongeveer 1/6 van de containerbreedte), handig om kolommen buiten de container uit te lijnen. Wordt op tablets en kleinere schermen teruggezet naar 0.
.responsive-height – Verwijdert een vaste minimale hoogte op tablets en kleinere apparaten.
Randen & Schaduwen
.has-border-bottom – Voegt een onderrand (1px solid #c1c1c1) en 4rem padding toe aan elk direct <div>-element binnen .o2lab__container.
.border-white – Voegt een 1px witte rand toe.
.shadow – Voegt een meerlaagse schaduw toe voor extra diepte.
Tekstuitlijning
.align-left – Lijnt tekst links uit.
.align-center – Lijnt tekst gecentreerd uit.
.align-right – Lijnt tekst rechts uit.
Achtergronden
.bg-70 – Creëert een gepositioneerd achtergrondvlak dat 70% van de containerbreedte bedekt (standaard rechts uitgelijnd). Gebruik .has-left-bg om het links uit te lijnen.
.half-bg – Maakt een horizontaal gesplitste achtergrond: grijs over de linkerkant (65,2%), transparant over de rechterkant. Op laptops en kleinere schermen wordt het volledig grijs.
.wycor-gradient – Past de wycor achtergrondgradient toe.
Carousel & Swiper Aanpassingen
.swiper-left – Plaatst carousel-bedieningselementen links en keert de richting om. Past padding/marges responsief aan voor verschillende schermbreedtes.
.carousel-swiper-pagination(binnen .swiper-left) – Positioneert de paginering linksonder.
.carousel-controls-right – Verschuift de bedieningselementen naar de rechterkant (right: 3rem) en zet left op inherit voor fotogalerijblokken.