.wedding-site #reels { background: #1f1f1e !important; color: #f5f4f1 !important; padding-block: clamp(4.5rem, 8vw, 7.5rem); position: relative; isolation: isolate; overflow: hidden; } .wedding-site #reels::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.075), transparent 58%); } .wedding-site #reels .section-head { align-items: end; } .wedding-site #reels .section-head .eyebrow { color: #c7c5bf !important; } .wedding-site #reels .section-head h2 { color: #f6f5f2 !important; } .wedding-site #reels .section-head > p { color: #c1bfba !important; } .wedding-site #reels .reel-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.3vw, 2rem); width: min(100%, 940px); margin: 2.6rem auto 0; align-items: start; } .wedding-site #reels .reel-card { min-width: 0; padding: 13px 13px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 19px; background: linear-gradient(155deg, #30302e 0%, #292927 72%); box-shadow: 0 20px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .wedding-site #reels .reel-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.3); box-shadow: 0 26px 56px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); } .wedding-site #reels .reel-card-top { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 0 3px 10px; color: #c4c2bc; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .wedding-site #reels .reel-mark { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #f0efec; font-size: .65rem; } .wedding-site #reels .reel-screen { position: relative; overflow: hidden; width: 100%; aspect-ratio: 9 / 16; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #171716; box-shadow: 0 10px 28px rgba(0,0,0,.24); } .wedding-site #reels .reel-screen video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; background: #171716; } .wedding-site #reels .reel-card h3 { margin: 1rem 3px .35rem; color: #f5f4f1; font-size: 1.08rem; } .wedding-site #reels .reel-instagram-link { display: inline-flex; min-height: 42px; align-items: center; margin: 0 3px; color: #cbc9c3; font-size: .82rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); } .wedding-site #reels .reel-instagram-link:hover, .wedding-site #reels .instagram-cta:hover { color: #fff; } .wedding-site #reels .instagram-cta { display: flex; width: fit-content; max-width: 100%; min-height: 54px; align-items: center; gap: 12px; margin: 2.2rem auto 0; padding: 10px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #f5f4f1; background: rgba(255,255,255,.055); text-decoration: none; transition: background .2s ease, border-color .2s ease; } .wedding-site #reels .instagram-cta:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.48); } .wedding-site #reels .instagram-cta svg, .wedding-site .instagram-nav svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; } .wedding-site #reels .instagram-arrow { margin-left: 5px; } .wedding-site .instagram-nav { display: inline-flex; align-items: center; gap: 7px; } .wedding-site .instagram-nav svg { width: 18px; height: 18px; } .wedding-site .wedding-gallery { gap: clamp(1.25rem, 2.6vw, 2.25rem); } .wedding-site .wedding-video { padding: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: linear-gradient(145deg, #1d1d1d, #161616); box-shadow: 0 18px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .wedding-site .wedding-video:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); box-shadow: 0 25px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045); } .wedding-site .wedding-video .work-video { border: 1px solid rgba(255,255,255,.18); border-radius: 11px; outline: 0; background: #101010; } .wedding-site .wedding-video:first-child { padding: clamp(12px, 1.5vw, 18px); border-radius: 19px; } .wedding-site #trabajos .portfolio-footnote { border-top-color: rgba(255,255,255,.2); } @media (max-width: 760px) { .wedding-site #reels .reel-preview-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 380px); gap: 1.25rem; margin-top: 1.7rem; } .wedding-site #reels .reel-card { padding: 10px 10px 16px; border-radius: 17px; } .wedding-site #reels .instagram-cta { width: min(100%, 380px); min-height: 52px; justify-content: center; margin-top: 1.6rem; } .wedding-site .instagram-nav { min-height: 48px; } } @media (prefers-reduced-motion: reduce) { .wedding-site #reels .instagram-cta, .wedding-site #reels .reel-card, .wedding-site .wedding-video { transition: none; } }