:root {
    --gr-cyan: #28dcff;
    --gr-violet: #ab62ff;
    --gr-ink: #030713;
    --gr-panel: rgba(5, 11, 29, .86);
    --gr-line: rgba(61, 208, 255, .28);
}

.gr-media-area {
    position: relative;
    overflow: hidden;
    background: #030713;
    padding: 110px 0 120px;
}

.gr-media-area::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(38, 184, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38, 184, 255, .10) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.gr-media-area .container { position: relative; z-index: 1; }

.gr-media-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 42px;
}

.gr-media-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--gr-cyan);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.6px;
}

.gr-media-header h2,
.gr-media-title h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1;
}

.gr-media-header h2 span,
.gr-media-title h1 span { color: var(--gr-cyan); }

.gr-media-copy {
    max-width: 570px;
    margin: 14px 0 0;
    color: #aab7cc;
    font-size: 16px;
}

.gr-media-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gr-media-actions .btn { margin: 0; white-space: nowrap; }

.gr-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 14px;
}

.gr-gallery-item {
    position: relative;
    grid-column: span 4;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--gr-line);
    background: #061022;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.gr-gallery-item:nth-child(1),
.gr-gallery-item:nth-child(8) { grid-column: span 8; grid-row: span 2; }

.gr-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.gr-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s;
}

.gr-gallery-item:hover img { transform: scale(1.055); filter: saturate(1.08); }
.gr-gallery-item:hover::after {
    border-color: rgba(54, 220, 255, .72);
    box-shadow: inset 0 0 28px rgba(29, 187, 255, .16);
}

.gr-gallery-index,
.gr-gallery-open {
    position: absolute;
    z-index: 2;
    color: #eafcff;
    background: rgba(2, 7, 19, .76);
    border: 1px solid rgba(72, 221, 255, .30);
    backdrop-filter: blur(8px);
}

.gr-gallery-index { left: 12px; bottom: 12px; padding: 5px 9px; font-size: 10px; letter-spacing: 1.5px; }
.gr-gallery-open { right: 12px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; }

.gr-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 40px;
}

.gr-video-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--gr-line);
    background: #050b18;
}

.gr-video-card:first-child { grid-column: 1 / -1; }
.gr-video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .76; transition: transform .5s, opacity .35s; }
.gr-video-card:hover img { transform: scale(1.035); opacity: .92; }
.gr-video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(1,4,12,.92)); pointer-events: none; }
.gr-video-meta { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 16px; }
.gr-video-play { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; color: #07101b; background: var(--gr-cyan); clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 82%, 88% 100%, 12% 100%, 0 82%, 0 18%); }
.gr-video-label small { display: block; color: var(--gr-cyan); font-size: 10px; letter-spacing: 2px; }
.gr-video-label strong { color: #fff; font-size: 20px; }

.gr-media-hero {
    position: relative;
    overflow: hidden;
    min-height: 58vh;
    display: flex;
    align-items: end;
    padding: 180px 0 80px;
    background: #030713 url('../img/geometry_screenshots/geometryrift_massive11.png') center/cover no-repeat;
}
.gr-media-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,5,14,.3), #030713 96%); }
.gr-media-hero .container { position: relative; z-index: 1; }
.gr-media-title p { max-width: 620px; color: #c4ccdb; font-size: 17px; }

.pswp { --pswp-bg: rgba(1, 4, 12, .97); }
.pswp__counter { color: #d9f9ff; letter-spacing: 1px; }
.pswp__button--gr-download { display: grid !important; place-items: center; color: #fff; font-size: 18px; text-decoration: none; }
.pswp__button--gr-download:hover { color: var(--gr-cyan); }

@media (max-width: 991px) {
    .gr-media-header { align-items: flex-start; flex-direction: column; }
    .gr-gallery-item { grid-column: span 6; }
    .gr-gallery-item:nth-child(1), .gr-gallery-item:nth-child(8) { grid-column: span 12; }
}

@media (max-width: 767px) {
    .gr-media-area { padding: 80px 0; }
    .gr-gallery { gap: 8px; }
    .gr-gallery-item, .gr-gallery-item:nth-child(1), .gr-gallery-item:nth-child(8) { grid-column: span 12; grid-row: auto; }
    .gr-video-grid { grid-template-columns: 1fr; gap: 12px; }
    .gr-video-card:first-child { grid-column: auto; }
    .gr-video-meta { left: 16px; bottom: 14px; }
    .gr-video-label strong { font-size: 16px; }
}