/* ============================================================ PACIFIC CHILL — Collection / Editorial system Light "gallery" luxury. Loaded on waves / wellness / wines and on the home gateway. Inherits tokens from style.css. Theme accent is set per page via . ============================================================ */ :root{ --paper-2:#faf8f3; /* brightest gallery white */ --paper-3:#efeae0; /* soft sand panel */ --ink-soft:#2a2c2b; /* body ink on light */ --ink-mute:#7c786e; /* muted captions */ --hair:rgba(20,22,24,.14);/* hairline on light */ --accent:#4a6b78; /* default (waves) */ --accent-tint:rgba(74,107,120,.10); } /* per-theme accent ------------------------------------------------ */ body[data-theme="waves"] { --accent:#436a78; --accent-tint:rgba(67,106,120,.10); } body[data-theme="wellness"]{ --accent:#6c7a58; --accent-tint:rgba(108,122,88,.12); } body[data-theme="wines"] { --accent:#823f3a; --accent-tint:rgba(130,63,58,.10); } /* ---------------- page shell ---------------- */ body.coll{ background:var(--paper-2); color:var(--ink-soft); font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip; /* clip (not hidden) so stays the scroller */ } .coll main{ display:block; } .coll ::selection{ background:var(--accent); color:#fff; } .wrap{ width:min(1280px,92vw); margin-inline:auto; } /* ---------- ambient sound toggle (all pages) ---------- */ .sound{ position:fixed; right:clamp(1rem,4vw,2.4rem); bottom:clamp(1rem,4vw,2.2rem); z-index:120; cursor:pointer; display:flex; align-items:center; gap:.55rem; background:rgba(250,248,243,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(20,22,24,.22); border-radius:999px; padding:.72rem 1.2rem; color:#1c1e1d; box-shadow:0 8px 28px -8px rgba(0,0,0,.45); font-family:var(--sans); font-weight:500; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; transition:background .3s, transform .3s, box-shadow .3s; } .sound:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(0,0,0,.5); } .sound__eq{ display:flex; align-items:flex-end; gap:2px; height:14px; } .sound__eq i{ width:2px; height:4px; background:#6c7a58; border-radius:1px; transition:height .2s; } .sound.is-on .sound__eq i{ animation:eq 900ms ease-in-out infinite; } .sound.is-on .sound__eq i:nth-child(2){ animation-delay:.15s } .sound.is-on .sound__eq i:nth-child(3){ animation-delay:.3s } .sound.is-on .sound__eq i:nth-child(4){ animation-delay:.45s } @keyframes eq{ 0%,100%{ height:3px } 50%{ height:13px } } .sound .sound__label::after{ content:"Sound on"; } .sound.is-on .sound__label::after{ content:"Sound off"; } .kicker{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.34em; font-size:.7rem; color:var(--accent); } .serif{ font-family:var(--serif); font-weight:300; } .rule{ height:1px; background:var(--hair); border:0; } /* shared reveal */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); } .reveal.in{ opacity:1; transform:none; } .reveal-2{ transition-delay:.12s; } .reveal-3{ transition-delay:.24s; } .reveal-4{ transition-delay:.36s; } /* ========================================================= NAV (light editorial variant) ========================================================= */ .cnav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:1.5rem clamp(1.1rem,4vw,2.6rem); color:var(--paper); transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease); } .cnav--solid{ background:rgba(250,248,243,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--ink-soft); padding-block:1.05rem; box-shadow:0 1px 0 var(--hair); } .cnav__brand{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.34em; text-indent:.34em; font-size:.82rem; color:inherit; text-decoration:none; white-space:nowrap; } .cnav__links{ display:flex; gap:clamp(1rem,2.6vw,2.4rem); } .cnav__links a{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:inherit; text-decoration:none; opacity:.82; position:relative; padding-block:.2rem; transition:opacity .3s; } .cnav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .cnav__links a:hover{ opacity:1; } .cnav__links a:hover::after{ transform:scaleX(1); } .cnav__links a[aria-current="page"]{ opacity:1; } .cnav__links a[aria-current="page"]::after{ transform:scaleX(1); background:var(--accent); } .cnav__cta{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; color:inherit; border:1px solid currentColor; border-radius:999px; padding:.6rem 1.25rem; transition:background .35s var(--ease), color .35s var(--ease); } .cnav--solid .cnav__cta:hover{ background:var(--accent); border-color:var(--accent); color:#fff; } .cnav__cta:hover{ background:var(--paper); color:var(--ink); } @media(max-width:720px){ .cnav{ flex-wrap:wrap; padding:1rem 1.1rem; gap:.5rem .9rem; } .cnav__brand{ font-size:.72rem; } .cnav__links{ order:3; width:100%; justify-content:center; gap:1.4rem; } .cnav__links a{ font-size:.64rem; letter-spacing:.16em; } .cnav__cta{ padding:.5rem 1rem; font-size:.62rem; } } /* ========================================================= COLLECTION HERO ========================================================= */ .chero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--paper); } .chero__bg{ position:absolute; inset:0; } .chero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.06); animation:cheroZoom 18s var(--ease) forwards; } @keyframes cheroZoom{ to{ transform:scale(1); } } @media(max-width:720px){ body[data-theme="waves"] .chero__bg img{ object-position:66% center; } } .chero__veil{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,14,18,.30) 0%, rgba(10,14,18,0) 28%), linear-gradient(0deg, rgba(8,11,15,.72) 0%, rgba(8,11,15,.12) 46%, rgba(8,11,15,0) 70%); } .chero__inner{ position:relative; width:min(1280px,92vw); margin:0 auto; padding-bottom:clamp(3rem,8vh,6rem); } .chero__index{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; } .chero__index .kicker{ color:var(--paper); } .chero__num{ font-family:var(--serif); font-size:1rem; letter-spacing:.1em; opacity:.7; } .chero__title{ font-family:var(--serif); font-weight:300; line-height:.92; font-size:clamp(4rem,17vw,15rem); margin:0; letter-spacing:-.01em; } .chero__title em{ font-style:italic; } .chero__lede{ max-width:34ch; margin-top:1.4rem; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.15rem,2.4vw,1.7rem); line-height:1.45; color:rgba(244,241,234,.92); } .chero__scroll{ position:absolute; right:0; bottom:clamp(3rem,8vh,6rem); display:flex; align-items:center; gap:.7rem; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; opacity:.8; } .chero__scroll i{ display:block; width:46px; height:1px; background:var(--paper); transform-origin:left; animation:scrollLine 2.4s var(--ease-io) infinite; } @keyframes scrollLine{ 0%,100%{ transform:scaleX(.3);} 50%{ transform:scaleX(1);} } @media(max-width:720px){ .chero__scroll{ display:none; } } /* ========================================================= ETHOS strip ========================================================= */ .ethos{ padding:clamp(4.5rem,11vw,9rem) 0; background:var(--paper-2); } .ethos__grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(2rem,6vw,6rem); align-items:start; } .ethos__lead{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.18; letter-spacing:-.01em; } .ethos__lead em{ font-style:italic; color:var(--accent); } .ethos__body p{ font-size:1.02rem; line-height:1.85; color:var(--ink-mute); margin:0 0 1.1rem; max-width:54ch; } .ethos__meta{ margin-top:1.8rem; display:flex; gap:2.4rem; flex-wrap:wrap; } .ethos__meta div{ } .ethos__meta dt{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; } .ethos__meta dd{ margin:0; font-family:var(--serif); font-size:1.15rem; } @media(max-width:820px){ .ethos__grid{ grid-template-columns:1fr; gap:2rem; } } /* ========================================================= STORY — full-bleed model editorial (alternating) ========================================================= */ .story{ display:grid; grid-template-columns:1.1fr .9fr; min-height:clamp(560px,92vh,920px); } .story--reverse{ grid-template-columns:.9fr 1.1fr; } .story--reverse .story__media{ order:2; } .story--reverse .story__copy{ order:1; } .story__media{ position:relative; overflow:hidden; } .story__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); } .story:hover .story__media img{ transform:scale(1.04); } .story__tag{ position:absolute; left:1.4rem; bottom:1.4rem; color:var(--paper); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; mix-blend-mode:difference; } .story__copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(2.4rem,7vw,7rem); background:var(--paper); } .story__copy .kicker{ margin-bottom:1.4rem; } .story__h{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.08; margin:0 0 1.4rem; } .story__h em{ font-style:italic; color:var(--accent); } .story__p{ font-size:1.02rem; line-height:1.85; color:var(--ink-mute); max-width:46ch; margin:0 0 1.8rem; } @media(max-width:860px){ .story,.story--reverse{ grid-template-columns:1fr; } .story--reverse .story__media{ order:1; } .story--reverse .story__copy{ order:2; } .story__media{ min-height:64vh; } } /* ========================================================= THE SELECTION — product grid ========================================================= */ .selection{ padding:clamp(4.5rem,11vw,9rem) 0; background:var(--paper-2); } .selection__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.4rem,5vw,4rem); } .selection__head h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5vw,4rem); line-height:1; margin:.6rem 0 0; } .selection__head p{ max-width:30ch; color:var(--ink-mute); font-size:.96rem; line-height:1.7; margin:0; } .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.7rem); } .grid--3{ grid-template-columns:repeat(3,1fr); } @media(max-width:1000px){ .grid,.grid--3{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .grid,.grid--3{ grid-template-columns:1fr; } } .card{ text-decoration:none; color:inherit; display:block; } .card__frame{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px; background:var(--paper-3); border:1px solid var(--hair); } .card__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); } .card:hover .card__frame img{ transform:scale(1.045); } .card__tag{ position:absolute; top:.85rem; left:.85rem; z-index:2; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; background:rgba(250,248,243,.9); color:var(--accent); padding:.4rem .7rem; border-radius:999px; } .card__fav{ position:absolute; bottom:.85rem; right:.85rem; z-index:2; opacity:0; transform:translateY(6px); background:var(--paper); color:var(--ink); border-radius:999px; padding:.55rem .95rem; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; transition:opacity .4s var(--ease), transform .4s var(--ease); } .card:hover .card__fav{ opacity:1; transform:none; } .card__body{ padding:1.1rem .2rem 0; } .card__name{ font-family:var(--serif); font-size:1.32rem; font-weight:400; line-height:1.1; } .card__desc{ color:var(--ink-mute); font-size:.84rem; margin-top:.35rem; line-height:1.5; } .card__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:.7rem; } .card__price{ font-size:.9rem; letter-spacing:.02em; } .card__cta{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.4rem; } .card__cta i{ width:14px; height:1px; background:currentColor; display:inline-block; transition:width .35s var(--ease); } .card:hover .card__cta i{ width:24px; } /* ========================================================= EDITORIAL BREAK — full-bleed quote over scene ========================================================= */ .break{ position:relative; min-height:clamp(520px,78vh,820px); display:grid; place-items:center; overflow:hidden; color:var(--paper); text-align:center; } .break__bg{ position:absolute; inset:0; } .break__bg img{ width:100%; height:100%; object-fit:cover; } .break__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,11,15,.34),rgba(8,11,15,.5)); } .break__inner{ position:relative; width:min(900px,90vw); padding:2rem; } .break__mark{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.34em; text-indent:.34em; font-size:.7rem; opacity:.85; } .break__q{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(1.6rem,4vw,3rem); line-height:1.32; margin:1.4rem 0 0; } .break__by{ margin-top:1.6rem; font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; opacity:.8; } .break__inner{ z-index:3; } /* full-bleed single scene */ .fullshot{ position:relative; width:100%; overflow:hidden; } .fullshot img{ width:100%; height:clamp(520px,88vh,1040px); object-fit:cover; display:block; } .fullshot::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(8,11,7,.42), rgba(8,11,7,0) 38%); } .fullshot__cap{ position:absolute; left:clamp(1.2rem,4vw,2.8rem); bottom:clamp(1.1rem,3vw,2.2rem); z-index:3; color:var(--paper); font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.26em; font-size:.66rem; } /* combined: golden-hour quote overlaid on the full-bleed street scene */ .fullshot--quote{ color:var(--paper); text-align:center; } .fullshot--quote .fullshot__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(21,14,34,.56) 0%, rgba(79,36,59,.40) 50%, rgba(120,55,58,.34) 100%); } .fullshot--quote .fullshot__inner{ position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center; gap:.2rem; padding:2rem; } .fullshot--quote .fullshot__inner > *{ max-width:min(900px,90vw); } .fullshot--quote .break__q{ text-shadow:0 2px 34px rgba(20,10,16,.6); } .fullshot--quote .break__by{ color:#fbe8d2; opacity:.94; text-shadow:0 1px 18px rgba(30,12,14,.6); } /* Malibu-modern atmospheric break (golden-hour dusk gradient + setting sun) */ .break--malibu{ background: linear-gradient(180deg, #150e22 0%, #271633 28%, #4f243b 50%, #8a3f44 72%, #c2703f 90%, #5a2a2d 100%); } .break--malibu .break__sun{ position:absolute; left:50%; top:86%; width:min(58vw,620px); height:min(58vw,620px); transform:translate(-50%,-50%); border-radius:50%; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(255,230,182,.92) 0%, rgba(255,186,126,.55) 28%, rgba(255,150,110,.14) 52%, transparent 70%); animation:malibuSun 9s var(--ease) infinite; } @keyframes malibuSun{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.92 } 50%{ transform:translate(-50%,-50%) scale(1.04); opacity:1 } } .break--malibu .break__grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.4; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } .break--malibu .break__q{ text-shadow:0 2px 30px rgba(40,14,24,.45); } .break--malibu .break__by{ color:#fbe8d2; opacity:.92; text-shadow:0 1px 16px rgba(50,18,20,.55); } /* ========================================================= LOOKBOOK strip — three frames ========================================================= */ .lookbook{ padding:clamp(4rem,9vw,7rem) 0; background:var(--paper-2); } .lookbook__head{ text-align:center; margin-bottom:clamp(2rem,5vw,3.5rem); } .lookbook__head h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.6vw,3.4rem); margin:.7rem 0 0; } .lookbook__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.4rem); } .lookbook__row figure{ margin:0; overflow:hidden; border-radius:3px; aspect-ratio:3/4; } .lookbook__row figure:nth-child(2){ aspect-ratio:3/4; transform:translateY(0); } .lookbook__row img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); } .lookbook__row figure:hover img{ transform:scale(1.05); } @media(max-width:760px){ .lookbook__row{ grid-template-columns:1fr 1fr; } .lookbook__row figure:last-child{ grid-column:1/-1; aspect-ratio:16/10; } } /* ========================================================= CTA band ========================================================= */ .cta{ position:relative; padding:clamp(5rem,12vw,9rem) 0; background:var(--ink); color:var(--paper); text-align:center; overflow:hidden; } .cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0%, var(--accent-tint), transparent 60%); opacity:.9; } .cta__inner{ position:relative; width:min(720px,90vw); margin:0 auto; } .cta .kicker{ color:var(--accent); } .cta h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.04; margin:1.2rem 0 1.6rem; } .cta p{ color:rgba(244,241,234,.72); font-size:1.02rem; line-height:1.8; max-width:46ch; margin:0 auto 2.4rem; } .btn{ display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); background:var(--paper); padding:1.05rem 2.2rem; border-radius:999px; transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); } .btn:hover{ transform:translateY(-2px); background:var(--accent); color:#fff; } .btn i{ width:18px; height:1px; background:currentColor; transition:width .35s var(--ease); } .btn:hover i{ width:30px; } .btn--ghost{ background:transparent; color:var(--paper); border:1px solid rgba(244,241,234,.4); } .btn--ghost:hover{ background:var(--paper); color:var(--ink); } /* ========================================================= FOOT (light variant reuse) — keep simple here ========================================================= */ .cfoot{ background:var(--ink); color:var(--paper); padding:clamp(3.5rem,7vw,6rem) clamp(1.1rem,4vw,2.6rem) 2.5rem; } .cfoot__about, .foot__about{ width:min(820px,92vw); margin:0 auto clamp(2.2rem,4vw,3.2rem); text-align:center; color:rgba(244,241,234,.58); font-size:.9rem; line-height:1.85; } .cfoot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line); } .cfoot__brand{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.34em; text-indent:.34em; font-size:1rem; } .cfoot__tag{ color:rgba(244,241,234,.6); font-family:var(--serif); font-style:italic; font-size:1.15rem; margin-top:1rem; max-width:26ch; } .cfoot h4{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--sand); margin:0 0 1.2rem; font-weight:500; } .cfoot nav{ display:flex; flex-direction:column; gap:.7rem; } .cfoot nav a{ color:rgba(244,241,234,.78); text-decoration:none; font-size:.9rem; transition:color .3s; } .cfoot nav a:hover{ color:var(--paper); } .cfoot__sub input{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--paper); padding:.7rem 0; font-size:.9rem; letter-spacing:.04em; } .cfoot__sub input::placeholder{ color:rgba(244,241,234,.5); } .cfoot__sub button{ margin-top:1.1rem; background:var(--paper); color:var(--ink); border:0; border-radius:999px; padding:.8rem 1.6rem; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; cursor:pointer; transition:background .3s,color .3s; } .cfoot__sub button:hover{ background:var(--sand); } .cfoot__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; color:rgba(244,241,234,.5); font-size:.74rem; letter-spacing:.06em; } @media(max-width:820px){ .cfoot__top{ grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .cfoot__top{ grid-template-columns:1fr; } } /* ========================================================= HOME GATEWAY — "Three Worlds" (used on index.html) ========================================================= */ .worlds{ background:var(--paper-2); padding:clamp(4.5rem,11vw,9rem) 0; } .worlds__head{ text-align:center; margin-bottom:clamp(2.6rem,6vw,4.5rem); } .worlds__head .kicker{ color:var(--sand); } .worlds__head h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.3rem,5.4vw,4.4rem); margin:.8rem 0 0; color:var(--ink); } .worlds__head p{ max-width:52ch; margin:1.2rem auto 0; color:var(--ink-mute); line-height:1.8; } .worlds__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,1.8vw,1.6rem); } .world{ position:relative; display:block; overflow:hidden; aspect-ratio:3/4.2; border-radius:4px; text-decoration:none; color:var(--paper); } .world img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease); } .world:hover img{ transform:scale(1.06); } .world__veil{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,11,15,.78) 0%,rgba(8,11,15,.12) 52%,rgba(8,11,15,.18) 100%); } .world__c{ position:absolute; inset:auto 0 0 0; padding:clamp(1.4rem,2.5vw,2.2rem); } .world__num{ font-family:var(--serif); font-size:.9rem; opacity:.7; letter-spacing:.1em; } .world__name{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,3.6vw,3rem); line-height:1; margin:.3rem 0 .5rem; } .world__line{ font-size:.86rem; color:rgba(244,241,234,.82); line-height:1.5; max-width:30ch; } .world__enter{ margin-top:1.1rem; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; } .world__enter i{ width:16px; height:1px; background:currentColor; transition:width .4s var(--ease); } .world:hover .world__enter i{ width:30px; } @media(max-width:820px){ .worlds__row{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } .world{ aspect-ratio:3/3.4; } }