/* ============================================================
   100 HERO MOSAIC STYLES — CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --bg: #0a0a0f;
    --bg2: #12121a;
    --bg3: #1a1a28;
    --card: rgba(255, 255, 255, 0.04);
    --card-h: rgba(255, 255, 255, 0.08);
    --text: #f0f0f5;
    --text2: #a0a0b8;
    --text3: #6b6b80;
    --accent: #7c5cfc;
    --accent2: #00d4ff;
    --gradient: linear-gradient(135deg, #7c5cfc, #00d4ff);
    --border: rgba(255, 255, 255, 0.08);
    --border2: rgba(255, 255, 255, 0.12);
    --red: #ef4444;
    --green: #22c55e;
    --blue: #3b82f6;
    --orange: #f97316;
    --pink: #ec4899;
    --purple: #a78bfa;
    --cyan: #06b6d4;
    --amber: #f59e0b;
    --tr: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px
}

a {
    color: inherit;
    text-decoration: none
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: .75rem 0;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border)
}

.navbar .ct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem
}

.nav-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem
}

.nav-logo span {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.nav-back {
    padding: .5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text2);
    font-size: .82rem;
    font-weight: 500;
    transition: var(--tr)
}

.nav-back:hover {
    background: var(--card-h);
    color: var(--text)
}

/* Page Hero */
.page-hero {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 2rem 2rem;
    position: relative;
    overflow: hidden
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 92, 252, 0.15), transparent 70%);
    pointer-events: none
}

.page-hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: .75rem;
    letter-spacing: -0.03em;
    position: relative
}

.page-hero .gt {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.page-hero p {
    font-size: 1rem;
    color: var(--text2);
    max-width: 500px;
    margin: 0 auto;
    position: relative
}

.ct {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem
}

/* Section Label */
.slbl {
    padding: 3rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem
}

.slbl-num {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.slbl-info h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700
}

.slbl-info p {
    font-size: .75rem;
    color: var(--text3)
}

/* Demo Wrapper */
.dw {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg2);
    margin-bottom: 1rem
}

/* Shared elements */
.img {
    position: relative;
    overflow: hidden
}

.img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7))
}

.badge {
    display: inline-block;
    padding: .2rem .6rem;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    z-index: 1;
    width: fit-content
}

.htitle {
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    position: relative;
    z-index: 1
}

.hmeta {
    font-size: .68rem;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
    margin-top: .35rem
}

.hexcerpt {
    font-size: .78rem;
    color: rgba(255, 255, 255, 0.65);
    position: relative;
    z-index: 1;
    margin-top: .3rem
}

/* BG Colors */
.bg1 {
    background: linear-gradient(135deg, #1e293b, #334155)
}

.bg2 {
    background: linear-gradient(135deg, #4c1d95, #7c3aed)
}

.bg3 {
    background: linear-gradient(135deg, #0c4a6e, #0ea5e9)
}

.bg4 {
    background: linear-gradient(135deg, #78350f, #b45309)
}

.bg5 {
    background: linear-gradient(135deg, #831843, #ec4899)
}

.bg6 {
    background: linear-gradient(135deg, #14532d, #15803d)
}

.bg7 {
    background: linear-gradient(135deg, #0f172a, #1e3a8a)
}

.bg8 {
    background: linear-gradient(135deg, #7c2d12, #dc2626)
}

.bg9 {
    background: linear-gradient(135deg, #1e1b4b, #4338ca)
}

.bg10 {
    background: linear-gradient(135deg, #134e4a, #0d9488)
}

/* ===== 30 LAYOUT STYLES ===== */

/* 1: Classic (1L + 2R) */
.hm-1 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-1 .side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 3px
}

/* 2: Reverse (2L + 1R) */
.hm-2 {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3px;
    min-height: 420px
}

.hm-2 .side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 3px
}

/* 3: Triple Equal */
.hm-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    min-height: 380px
}

/* 4: Featured Top + 3 Below */
.hm-4 {
    display: grid;
    grid-template-rows: 1.5fr 1fr;
    gap: 3px;
    min-height: 450px
}

.hm-4 .bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px
}

/* 5: Newspaper (1L + 4R grid) */
.hm-5 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-5 .grid4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px
}

/* 6: Full-Width Single */
.hm-6 {
    min-height: 400px;
    position: relative
}

/* 7: Split Screen (text + image 50/50) */
.hm-7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 380px
}

.hm-7 .txt {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: var(--bg3)
}

/* 8: L-Shape */
.hm-8 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-8 .main {
    grid-row: 1/3
}

/* 9: T-Shape Wide Top */
.hm-9 {
    display: grid;
    grid-template-rows: 1.2fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-9 .bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px
}

/* 10: Bento Mixed */
.hm-10 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 400px
}

.hm-10 .span2c {
    grid-column: span 2
}

.hm-10 .span2r {
    grid-row: span 2
}

/* 11: Sidebar Featured */
.hm-11 {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3px;
    min-height: 420px
}

.hm-11 .list {
    display: flex;
    flex-direction: column;
    gap: 3px
}

/* 12: Horizontal Cards */
.hm-12 {
    display: flex;
    gap: 3px;
    min-height: 300px;
    overflow-x: auto
}

.hm-12 .hcard {
    min-width: 300px;
    flex: 1
}

/* 13: Magazine Cover */
.hm-13 {
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 3rem
}

.hm-13::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85))
}

/* 14: Two Large + 2 Small */
.hm-14 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.5fr 1fr;
    gap: 3px;
    min-height: 450px
}

/* 15: Diagonal / Offset */
.hm-15 {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr;
    gap: 3px;
    min-height: 380px
}

/* 16: Stacked Cards */
.hm-16 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    min-height: auto
}

.hm-16 .hitem {
    min-height: 120px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem
}

.hm-16 .hitem .thumb {
    width: 200px;
    min-height: 100%;
    flex-shrink: 0
}

.hm-16 .hitem .info {
    padding: 1rem 0
}

/* 17: 5-Column Thin */
.hm-17 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    min-height: 320px
}

/* 18: Overlay Cards */
.hm-18 {
    position: relative;
    min-height: 420px;
    padding: 2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-end
}

.hm-18 .ocard {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    z-index: 1
}

/* 19: Zigzag */
.hm-19 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    min-height: auto
}

/* 20: Center Feature + Wings */
.hm-20 {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 3px;
    min-height: 400px
}

/* 21: Masonry */
.hm-21 {
    columns: 3;
    gap: 3px;
    padding: 3px
}

.hm-21 .mitem {
    break-inside: avoid;
    margin-bottom: 3px;
    border-radius: 8px;
    overflow: hidden
}

/* 22: Ticker + Hero */
.hm-22 {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 380px
}

.hm-22 .ticker {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    background: var(--red);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    overflow: hidden
}

.hm-22 .ticker .dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1.2s infinite;
    flex-shrink: 0
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

/* 23: Video Hero */
.hm-23 {
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.hm-23 .play {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
    cursor: pointer
}

.hm-23 .vinfo {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2
}

/* 24: Breaking + Grid */
.hm-24 {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 380px
}

.hm-24 .breaking {
    padding: .6rem 1.25rem;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .75rem
}

.hm-24 .grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3px
}

/* 25: Photo Grid (2x3) */
.hm-25 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 380px
}

/* 26: Minimal Text Hero */
.hm-26 {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg3);
    text-align: center;
    padding: 3rem
}

/* 27: Fashion Editorial */
.hm-27 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 450px
}

.hm-27 .txt {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: #000
}

.hm-27 .txt h2 {
    font-family: 'Playfair Display', serif
}

/* 28: Sports Style */
.hm-28 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px;
    min-height: 350px;
    position: relative
}

.hm-28::before {
    content: 'LIVE';
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    padding: .3rem .75rem;
    background: var(--red);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    border-radius: 4px;
    animation: blink 1.2s infinite
}

/* 29: Dark Cinematic */
.hm-29 {
    min-height: 450px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 5%
}

.hm-29::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 40%, transparent)
}

.hm-29 .content {
    position: relative;
    z-index: 1;
    max-width: 500px
}

/* 30: Gradient Accent Bar */
.hm-30 {
    display: grid;
    grid-template-rows: 6px 1fr;
    min-height: 400px
}

.hm-30 .accent-bar {
    background: var(--gradient)
}

.hm-30 .inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3px
}

.hm-30 .inner .side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 3px
}

/* 31: Inverted L (right main spanning 2 rows) */
.hm-31 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-31 .main {
    grid-row: 1/3
}

/* 32: Quad Equal */
.hm-32 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 400px
}

/* 33: 1 Top Wide + 4 Bottom */
.hm-33 {
    display: grid;
    grid-template-rows: 1.2fr 1fr;
    gap: 3px;
    min-height: 450px
}

.hm-33 .bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px
}

/* 34: Vertical Stack 4 */
.hm-34 {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 3px;
    min-height: 500px
}

/* 35: Asymmetric 70/30 */
.hm-35 {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 3px;
    min-height: 400px
}

/* 36: Panoramic Strip */
.hm-36 {
    display: grid;
    grid-template-rows: 3fr 1fr;
    gap: 3px;
    min-height: 380px
}

.hm-36 .strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px
}

/* 37: Diamond Grid */
.hm-37 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 400px
}

.hm-37 .center {
    grid-row: 1/3
}

/* 38: Sidebar Right List */
.hm-38 {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-38 .list {
    display: flex;
    flex-direction: column;
    gap: 3px
}

/* 39: Six-Pack Grid */
.hm-39 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 400px
}

/* 40: Feature Center Overlay */
.hm-40 {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem
}

.hm-40::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3), rgba(0, 0, 0, .85))
}

.hm-40 .inner-card {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 600px;
    text-align: center
}

/* 41: U-Shape */
.hm-41 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-41 .wide {
    grid-column: 1/4
}

/* 42: Cross/Plus Layout */
.hm-42 {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 3px;
    min-height: 480px
}

.hm-42 .hmid {
    grid-row: 1/4
}

/* 43: Filmstrip */
.hm-43 {
    display: flex;
    gap: 3px;
    min-height: 280px;
    padding: 1.5rem 0
}

.hm-43 .frame {
    flex: 0 0 220px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .1)
}

/* 44: Hero + 2 Side Cards + Bottom Bar */
.hm-44 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 3fr 1fr;
    gap: 3px;
    min-height: 450px
}

.hm-44 .bar {
    grid-column: 1/4
}

/* 45: Asymmetric Masonry 2-col */
.hm-45 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    min-height: 500px
}

.hm-45 .col {
    display: flex;
    flex-direction: column;
    gap: 3px
}

/* 46: 3 Bottom + 2 Top */
.hm-46 {
    display: grid;
    grid-template-rows: 1fr 1.2fr;
    gap: 3px;
    min-height: 450px
}

.hm-46 .top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px
}

.hm-46 .bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px
}

/* 47: Quote Hero (centered big text) */
.hm-47 {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    text-align: center
}

/* 48: Cards on Dark Shelf */
.hm-48 {
    min-height: 420px;
    padding: 2rem;
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    background: var(--bg3)
}

.hm-48 .shelf-card {
    flex: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border)
}

/* 49: Picture-in-Picture */
.hm-49 {
    position: relative;
    min-height: 420px
}

.hm-49 .pip {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 280px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .2);
    z-index: 3;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
}

/* 50: 4-Column Equal Tall */
.hm-50 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    min-height: 450px
}

/* 51: Staircase / Step */
.hm-51 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    min-height: 400px
}

.hm-51 .s1 {
    grid-column: 1/3;
    grid-row: 1/2
}

.hm-51 .s2 {
    grid-column: 2/4;
    grid-row: 2/3
}

.hm-51 .s3 {
    grid-column: 3/5;
    grid-row: 3/4
}

/* 52: Hero Card Stack */
.hm-52 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 450px
}

.hm-52 .main-h {
    flex: 2
}

.hm-52 .sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3px;
    flex: 1
}

/* 53: Window Panes (8 equal) */
.hm-53 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 380px
}

/* 54: T-Shape Inverted (2 top + 1 wide bottom) */
.hm-54 {
    display: grid;
    grid-template-rows: 1fr 1.2fr;
    gap: 3px;
    min-height: 400px
}

.hm-54 .top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px
}

/* 55: Floating Cards Diagonal */
.hm-55 {
    position: relative;
    min-height: 450px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.hm-55 .fcard {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 1.5rem;
    z-index: 2;
    width: 280px
}

.hm-55 .fcard:nth-child(1) {
    top: 2rem;
    left: 5%
}

.hm-55 .fcard:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.hm-55 .fcard:nth-child(3) {
    bottom: 2rem;
    right: 5%
}

/* 56: Newspaper 3-col with Header */
.hm-56 {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: 420px
}

.hm-56 .header {
    padding: 1rem 1.5rem;
    background: var(--bg3);
    border-bottom: 3px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.hm-56 .cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px
}

/* 57: Spotlight (big center + faded sides) */
.hm-57 {
    display: grid;
    grid-template-columns: .7fr 1.6fr .7fr;
    gap: 3px;
    min-height: 420px
}

.hm-57>:first-child,
.hm-57>:last-child {
    opacity: .6
}

/* 58: Carousel Preview (center focus) */
.hm-58 {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-height: 380px;
    padding: 0 2rem;
    overflow: hidden
}

.hm-58 .slide {
    flex: 0 0 60%;
    min-height: 350px;
    border-radius: 16px;
    overflow: hidden
}

.hm-58 .slide-sm {
    flex: 0 0 18%;
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    opacity: .5;
    transform: scale(.9)
}

/* 59: Grid 3 + Ticker Bottom */
.hm-59 {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 400px
}

.hm-59 .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px
}

.hm-59 .bottom-ticker {
    padding: .6rem 1.25rem;
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 600
}

/* 60: Hero + Tabs */
.hm-60 {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 420px
}

.hm-60 .tabs {
    display: flex;
    background: var(--bg3)
}

.hm-60 .tabs span {
    flex: 1;
    padding: .75rem 1rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    border-bottom: 2px solid transparent
}

.hm-60 .tabs span.active {
    color: var(--accent);
    border-bottom-color: var(--accent)
}

/* 61: Metro Tiles */
.hm-61 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 130px);
    gap: 3px
}

.hm-61 .t1 {
    grid-column: 1/4;
    grid-row: 1/3
}

.hm-61 .t2 {
    grid-column: 4/6;
    grid-row: 1/2
}

.hm-61 .t3 {
    grid-column: 6/7;
    grid-row: 1/3
}

.hm-61 .t4 {
    grid-column: 4/5;
    grid-row: 2/3
}

.hm-61 .t5 {
    grid-column: 5/6;
    grid-row: 2/3
}

.hm-61 .t6 {
    grid-column: 1/3;
    grid-row: 3/4
}

.hm-61 .t7 {
    grid-column: 3/7;
    grid-row: 3/4
}

/* 62: Z-Pattern */
.hm-62 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 400px
}

.hm-62 :nth-child(3) {
    grid-column: 1;
    grid-row: 2
}

.hm-62 :nth-child(4) {
    grid-column: 2;
    grid-row: 2
}

/* 63: Side-by-Side Tall */
.hm-63 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    min-height: 500px
}

/* 64: Triple Stacked + Side */
.hm-64 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3px;
    min-height: 450px
}

.hm-64 .stack {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 3px
}

/* 65: Full Bleed + Bottom Drawer */
.hm-65 {
    display: grid;
    grid-template-rows: 2fr auto;
    min-height: 400px
}

.hm-65 .drawer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    background: var(--bg3)
}

.hm-65 .drawer .ditem {
    padding: 1rem 1.25rem
}

/* 66: Hero with Numbered List */
.hm-66 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3px;
    min-height: 380px
}

.hm-66 .nlist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg3)
}

.hm-66 .nlist .ni {
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid var(--border)
}

.hm-66 .nlist .ni .num {
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

/* 67: Polaroid Scatter */
.hm-67 {
    position: relative;
    min-height: 450px;
    background: var(--bg3);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.hm-67 .polaroid {
    position: absolute;
    background: #fff;
    padding: .5rem .5rem 2.5rem;
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    z-index: 2
}

.hm-67 .polaroid:nth-child(1) {
    top: 10%;
    left: 10%;
    transform: rotate(-8deg);
    width: 200px;
    height: 230px
}

.hm-67 .polaroid:nth-child(2) {
    top: 15%;
    right: 15%;
    transform: rotate(5deg);
    width: 220px;
    height: 250px
}

.hm-67 .polaroid:nth-child(3) {
    bottom: 10%;
    left: 35%;
    transform: rotate(-3deg);
    width: 240px;
    height: 260px
}

/* 68: 1 Left + 3 Right Stacked */
.hm-68 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3px;
    min-height: 450px
}

.hm-68 .rstack {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 3px
}

/* 69: Hero Carousel Dots */
.hm-69 {
    position: relative;
    min-height: 420px
}

.hm-69 .dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    z-index: 3
}

.hm-69 .dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3)
}

.hm-69 .dots span.active {
    background: #fff;
    width: 24px;
    border-radius: 4px
}

/* 70: Grid 2+1+2 */
.hm-70 {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
    gap: 3px;
    min-height: 380px
}

/* 71: Kanban Style */
.hm-71 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-height: 420px;
    padding: 1rem
}

.hm-71 .lane {
    background: var(--bg3);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.hm-71 .lane-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text3);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border)
}

/* 72: Newspaper Front Page */
.hm-72 {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-height: 480px
}

.hm-72 .masthead {
    text-align: center;
    padding: 1rem;
    border-bottom: 3px double var(--text3);
    font-family: 'Playfair Display', serif
}

.hm-72 .subhead {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--border)
}

.hm-72 .subhead>div {
    padding: .5rem 1rem;
    border-right: 1px solid var(--border);
    font-size: .7rem;
    color: var(--text3)
}

/* 73: Diagonal Split */
.hm-73 {
    position: relative;
    min-height: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden
}

.hm-73::after {
    content: '';
    position: absolute;
    top: 0;
    left: 45%;
    width: 120%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    transform: skewX(-10deg);
    z-index: 1
}

/* 74: Hexagonal Style */
.hm-74 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-height: 380px;
    padding: 1rem
}

.hm-74 .hex {
    border-radius: 20px;
    overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}

/* 75: Card Deck */
.hm-75 {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem
}

.hm-75 .deck-card {
    position: absolute;
    width: 320px;
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4)
}

.hm-75 .deck-card:nth-child(1) {
    transform: rotate(-6deg) translateX(-60px);
    z-index: 1
}

.hm-75 .deck-card:nth-child(2) {
    transform: rotate(0deg);
    z-index: 2
}

.hm-75 .deck-card:nth-child(3) {
    transform: rotate(6deg) translateX(60px);
    z-index: 1
}

/* 76: 2 Rows of 3 Landscape */
.hm-76 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 180px 180px;
    gap: 3px
}

/* 77: Sidebar + Main + Sidebar */
.hm-77 {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: 3px;
    min-height: 420px
}

.hm-77 .aside {
    display: flex;
    flex-direction: column;
    gap: 3px
}

/* 78: Stats Banner + Hero */
.hm-78 {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 420px
}

.hm-78 .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg3)
}

.hm-78 .stats .stat {
    padding: .75rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
    font-size: .75rem
}

.hm-78 .stats .stat strong {
    display: block;
    font-size: 1.1rem;
    color: var(--accent)
}

/* 79: Mosaic 7-item */
.hm-79 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 140px);
    gap: 3px
}

.hm-79 .m1 {
    grid-column: 1/3;
    grid-row: 1/3
}

.hm-79 .m2 {
    grid-column: 3/4;
    grid-row: 1/2
}

.hm-79 .m3 {
    grid-column: 4/5;
    grid-row: 1/2
}

.hm-79 .m4 {
    grid-column: 3/5;
    grid-row: 2/3
}

.hm-79 .m5 {
    grid-column: 1/2;
    grid-row: 3/4
}

.hm-79 .m6 {
    grid-column: 2/3;
    grid-row: 3/4
}

.hm-79 .m7 {
    grid-column: 3/5;
    grid-row: 3/4
}

/* 80: Hero + CTA Banner */
.hm-80 {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 400px
}

.hm-80 .cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--gradient)
}

.hm-80 .cta-btn {
    padding: .5rem 1.5rem;
    background: #fff;
    color: #000;
    font-weight: 700;
    border-radius: 8px;
    font-size: .8rem;
    cursor: pointer
}

/* 81: Accordion Preview */
.hm-81 {
    display: flex;
    min-height: 400px;
    gap: 3px
}

.hm-81 .acc-item {
    flex: 0 0 60px;
    overflow: hidden;
    transition: flex .4s ease;
    cursor: pointer
}

.hm-81 .acc-item.active,
.hm-81 .acc-item:first-child {
    flex: 1
}

.hm-81 .acc-item:hover {
    flex: .5
}

/* 82: Letter Grid (like magazine initials) */
.hm-82 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    min-height: 380px
}

.hm-82 .letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding: 2rem;
    color: var(--accent);
    background: var(--bg3);
    width: 200px
}

/* 83: Hero + Category Tags Bar */
.hm-83 {
    display: grid;
    grid-template-rows: 1fr auto auto;
    min-height: 420px
}

.hm-83 .tags {
    display: flex;
    gap: .5rem;
    padding: 1rem 1.5rem;
    background: var(--bg3);
    flex-wrap: wrap
}

.hm-83 .tags .tag {
    padding: .35rem .8rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: .7rem;
    color: var(--text2);
    cursor: pointer
}

.hm-83 .tags .tag:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

/* 84: Widescreen Letterbox */
.hm-84 {
    min-height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 5%
}

.hm-84::before,
.hm-84::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--bg);
    z-index: 2
}

.hm-84::before {
    top: 0
}

.hm-84::after {
    bottom: 0
}

/* 85: Board / Kanban Cards */
.hm-85 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    min-height: 380px;
    padding: 1rem;
    background: var(--bg3);
    border-radius: 0
}

.hm-85 .bcard {
    background: var(--bg2);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border)
}

/* 86: Focus + Blurred Sides */
.hm-86 {
    display: grid;
    grid-template-columns: .5fr 1fr .5fr;
    gap: 0;
    min-height: 400px;
    overflow: hidden
}

.hm-86>:first-child,
.hm-86>:last-child {
    filter: blur(3px);
    opacity: .5
}

/* 87: Story/Reel Circular */
.hm-87 {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    min-height: 200px;
    padding: 1.5rem 2rem;
    overflow-x: auto
}

.hm-87 .story {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem
}

.hm-87 .story .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    padding: 2px;
    overflow: hidden
}

.hm-87 .story .sname {
    font-size: .7rem;
    color: var(--text2)
}

/* 88: Hero Map Style */
.hm-88 {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem
}

.hm-88 .info-box {
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 350px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .1)
}

/* 89: Three Rows Alternating Width */
.hm-89 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 420px
}

.hm-89 .row {
    display: grid;
    gap: 3px;
    flex: 1
}

.hm-89 .row:nth-child(1) {
    grid-template-columns: 2fr 1fr
}

.hm-89 .row:nth-child(2) {
    grid-template-columns: 1fr 2fr
}

.hm-89 .row:nth-child(3) {
    grid-template-columns: 1fr 1fr 1fr
}

/* 90: Timeline Vertical */
.hm-90 {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 400px;
    position: relative;
    padding-left: 3rem
}

.hm-90::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent)
}

.hm-90 .tl-item {
    position: relative;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border)
}

.hm-90 .tl-item::before {
    content: '';
    position: absolute;
    left: -2.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg)
}

/* 91: Showcase Grid (2 big + 3 small bottom) */
.hm-91 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    gap: 3px;
    min-height: 450px
}

.hm-91 .b-row {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px
}

/* 92: Sidebar Widgets */
.hm-92 {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1rem;
    min-height: 420px;
    padding: 1rem
}

.hm-92 .widgets {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.hm-92 .widget {
    background: var(--bg3);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border)
}

/* 93: Cover + Inline Gallery */
.hm-93 {
    display: grid;
    grid-template-rows: 2fr 1fr;
    gap: 3px;
    min-height: 450px
}

.hm-93 .gallery {
    display: flex;
    gap: 3px;
    overflow-x: auto
}

.hm-93 .gallery .gitem {
    flex: 0 0 200px;
    border-radius: 8px;
    overflow: hidden
}

/* 94: Tabbed Multi-Panel */
.hm-94 {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 420px
}

.hm-94 .side-tabs {
    display: flex;
    flex-direction: column;
    background: var(--bg3)
}

.hm-94 .side-tabs .stab {
    padding: 1rem;
    font-size: .8rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    color: var(--text3)
}

.hm-94 .side-tabs .stab.active {
    border-left-color: var(--accent);
    color: var(--text);
    background: var(--bg2)
}

/* 95: Fullscreen with Top Bar Info */
.hm-95 {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 420px
}

.hm-95 .info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1.5rem;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    font-size: .78rem;
    color: var(--text2);
    z-index: 2
}

/* 96: Diagonal Thirds */
.hm-96 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 420px;
    gap: 3px
}

.hm-96>:nth-child(1) {
    margin-top: 0
}

.hm-96>:nth-child(2) {
    margin-top: 2rem
}

.hm-96>:nth-child(3) {
    margin-top: 4rem
}

/* 97: Golden Ratio */
.hm-97 {
    display: grid;
    grid-template-columns: 1.618fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    min-height: 420px
}

.hm-97 .gold-main {
    grid-row: 1/3
}

/* 98: Vertical Ticker + Grid */
.hm-98 {
    display: grid;
    grid-template-columns: 60px 1fr;
    min-height: 400px
}

.hm-98 .vticker {
    writing-mode: vertical-rl;
    background: var(--red);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem
}

.hm-98 .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px
}

/* 99: Poster + Reviews */
.hm-99 {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1rem;
    min-height: 420px;
    padding: 1rem;
    background: var(--bg3)
}

.hm-99 .poster {
    border-radius: 12px;
    overflow: hidden
}

.hm-99 .reviews {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: center;
    padding: 1rem
}

/* 100: Collage Overlap */
.hm-100 {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hm-100 .col-item {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4)
}

.hm-100 .col-item:nth-child(1) {
    width: 45%;
    height: 70%;
    top: 10%;
    left: 5%;
    z-index: 1
}

.hm-100 .col-item:nth-child(2) {
    width: 40%;
    height: 60%;
    top: 20%;
    right: 10%;
    z-index: 2
}

.hm-100 .col-item:nth-child(3) {
    width: 30%;
    height: 40%;
    bottom: 5%;
    left: 30%;
    z-index: 3
}

.hm-100 .col-item:nth-child(4) {
    width: 25%;
    height: 35%;
    top: 5%;
    right: 5%;
    z-index: 1
}

/* Shared item styling */
.hitem {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.25rem;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease
}

.hitem:hover {
    transform: scale(1.015);
    z-index: 2;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5)
}

.hitem::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.8));
    pointer-events: none;
    transition: background 0.4s ease
}

.hitem:hover::after {
    background: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.9))
}

.hitem::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(124, 92, 252, 0);
    transition: background 0.4s ease;
    z-index: 0;
    pointer-events: none
}

.hitem:hover::before {
    background: rgba(124, 92, 252, 0.08)
}

.hitem>* {
    position: relative;
    z-index: 1
}

/* Responsive */
@media(max-width:768px) {

    .hm-1,
    .hm-2,
    .hm-5,
    .hm-7,
    .hm-8,
    .hm-11,
    .hm-14,
    .hm-15,
    .hm-19,
    .hm-20,
    .hm-27,
    .hm-31,
    .hm-35,
    .hm-37,
    .hm-38,
    .hm-42,
    .hm-44,
    .hm-45,
    .hm-57,
    .hm-62,
    .hm-63,
    .hm-64,
    .hm-66,
    .hm-68,
    .hm-73,
    .hm-77,
    .hm-82,
    .hm-86,
    .hm-92,
    .hm-94,
    .hm-97,
    .hm-98,
    .hm-99 {
        grid-template-columns: 1fr
    }

    .hm-3,
    .hm-17,
    .hm-25,
    .hm-28,
    .hm-32,
    .hm-39,
    .hm-46 .top,
    .hm-46 .bottom,
    .hm-50,
    .hm-53,
    .hm-54 .top,
    .hm-56 .cols,
    .hm-59 .grid,
    .hm-70,
    .hm-71,
    .hm-74,
    .hm-76,
    .hm-85,
    .hm-89 .row,
    .hm-96 {
        grid-template-columns: 1fr 1fr
    }

    .hm-4 .bottom,
    .hm-9 .bottom,
    .hm-24 .grid,
    .hm-33 .bottom,
    .hm-36 .strip,
    .hm-65 .drawer,
    .hm-78 .stats,
    .hm-91 .b-row {
        grid-template-columns: 1fr
    }

    .hm-5 .grid4 {
        grid-template-columns: 1fr
    }

    .hm-10,
    .hm-61,
    .hm-79 {
        grid-template-columns: 1fr 1fr
    }

    .hm-21 {
        columns: 1
    }

    .hm-8 .main,
    .hm-31 .main,
    .hm-97 .gold-main {
        grid-row: auto
    }

    .hm-30 .inner,
    .hm-72 .subhead {
        grid-template-columns: 1fr
    }

    .hm-77 {
        grid-template-columns: 1fr
    }

    .hm-96>:nth-child(2),
    .hm-96>:nth-child(3) {
        margin-top: 0
    }

    .hm-98 .content {
        grid-template-columns: 1fr
    }

    .hm-100 .col-item {
        position: relative;
        width: 100% !important;
        height: 200px !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important
    }

    .hm-100 {
        flex-direction: column;
        gap: 3px
    }
}