/* Theme Name: Pokemonkort Child V2 Theme URI: https://pokemonkort.nu/ Description: Child-tema för pokemonkort.nu — komplett designsystem inline. Version utan subfolder för att undvika filsystem-konflikter på servern. Author: pokemonkort.nu Template: astra Version: 2.0.0 */ /* ========================================================================== ASTRA OVERRIDES — full-width-content för våra sidor. Scope:ade till .site-content så header/footer inte påverkas. ========================================================================== */ /* Dölj eventuell tom sidebar bara på sidor som har vår wrap-klass */ .site-content #secondary:has(~ .content-area .pkmn-wrap), .site-content .content-area:has(.pkmn-wrap) ~ #secondary { display: none !important; } /* Tvinga content-area till full bredd när den innehåller vår wrap */ .site-content .content-area:has(.pkmn-wrap), .site-content .content-area.primary:has(.pkmn-wrap) { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; padding-right: 0 !important; margin-right: 0 !important; } /* Astra container — bara i site-content (inte header) */ .site-content > .ast-container { max-width: 1200px !important; padding-inline: 16px !important; } @media (max-width: 480px) { .site-content > .ast-container { padding-inline: 8px !important; } } /* Entry-content i våra sidor — ingen extra padding */ .entry-content:has(.pkmn-wrap), .entry-content:has(.pk-home) { padding: 0 !important; margin: 0 !important; } /* Article wrapper i våra sidor */ .ast-article-single:has(.pkmn-wrap), .ast-article-single:has(.pk-home) { padding: 0 !important; } /* Göm submenu-explosionen — WP/Astra fallback visar alla child-pages */ .main-header-menu .sub-menu, .main-header-menu .children, .ast-nav-menu .sub-menu, .ast-nav-menu .children, nav.main-navigation ul ul, nav.site-navigation ul ul, #primary-site-navigation-desktop ul ul, .ast-builder-menu-mobile ul ul { display: none !important; } /* Göm också caret-indikatorer för submenuer som inte längre finns */ .main-header-menu .menu-item-has-children > a::after, .ast-nav-menu .menu-item-has-children > a::after, .menu-item-has-children > .ast-menu-toggle { display: none !important; } /* POKÉDEX custom-button som inte längre passar — göm */ .ast-builder-button-wrap .ast-custom-button { display: none !important; } /* ========================================================================== pokemonkort.nu — site.css Mobile-first design för pokedex/kort/homepage. Eftersom upload_to_wordpress.py strippar ligger all CSS här och enqueueas via child-temats functions.php. ========================================================================== */ :root { /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Typography */ --fs-base: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-lg: 18px; --fs-xl: 20px; --fs-h1: clamp(1.75rem, 4vw + 0.5rem, 2.5rem); --fs-h2: clamp(1.25rem, 2.5vw + 0.4rem, 1.6rem); --fs-h3: clamp(1.05rem, 1.5vw + 0.4rem, 1.2rem); --lh-tight: 1.25; --lh-normal: 1.55; /* Layout */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --maxw: 1100px; --maxw-wide: 1280px; /* Colors */ --pk-red: #e95552; --pk-red-dark: #cf403d; --pk-blue: #2563eb; --pk-blue-dark: #1d4ed8; --pk-yellow: #ffd54a; --ink: #111827; --ink-2: #1f2937; --muted: #4b5563; --muted-2: #6b7280; --line: rgba(15, 23, 42, 0.08); --bg: #f7f8fb; --bg-2: #f3f5fa; --card-bg: #ffffff; --shadow: 0 4px 18px rgba(15, 23, 42, 0.06); --shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.10); } /* ----- Type & base ----- */ .pkmn-wrap, .pk-home { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink); -webkit-font-smoothing: antialiased; } .pkmn-wrap *, .pk-home * { box-sizing: border-box; } .pkmn-wrap img, .pk-home img { max-width: 100%; height: auto; display: block; } .pkmn-wrap h1, .pk-home h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--space-3); letter-spacing: -0.01em; } .pkmn-wrap h2, .pk-home h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0 0 var(--space-3); letter-spacing: -0.005em; } .pkmn-wrap h3, .pk-home h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); margin: 0 0 var(--space-2); } .pkmn-wrap p, .pk-home p { margin: 0 0 var(--space-3); } .pkmn-wrap a, .pk-home a { color: var(--pk-blue); text-decoration: none; } .pkmn-wrap a:hover, .pk-home a:hover { text-decoration: underline; } /* ----- Layout containers ----- */ .pkmn-wrap { max-width: var(--maxw); margin-inline: auto; padding: var(--space-3); } @media (max-width: 480px) { .pkmn-wrap { padding: var(--space-2); } } .pkmn-page, .pkmn-card-page, .pkmn-index { display: flex; flex-direction: column; gap: var(--space-6); } .section { display: flex; flex-direction: column; gap: var(--space-3); } .section-intro { color: var(--muted); margin: 0 0 var(--space-3); } /* ----- Hero ----- */ .pkmn-hero { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center; background: var(--card-bg); padding: var(--space-5); border-radius: var(--radius); box-shadow: var(--shadow); } /* Text-only hero (hub-sidor utan kort-bild) — fyll hela bredden */ .pkmn-hero.pkmn-hero-text-only, .pkmn-hero:has(> .hero-copy:only-child) { grid-template-columns: 1fr !important; } .pkmn-hero.pkmn-hero-text-only .hero-copy, .pkmn-hero:has(> .hero-copy:only-child) .hero-copy { max-width: 100%; } .pkmn-hero > div:first-child { display: flex; justify-content: center; align-items: center; } .pkmn-hero img { width: 100%; max-width: 240px; height: auto; object-fit: contain; } .pkmn-card-page .pkmn-hero img { aspect-ratio: 5 / 7; max-width: 220px; border-radius: var(--radius-sm); box-shadow: var(--shadow); } .hero-copy { min-width: 0; } .hero-intro { color: var(--muted); } /* ----- Badges ----- */ .badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); } .badge { display: inline-flex; align-items: center; padding: 4px var(--space-3); background: var(--bg-2); color: var(--ink-2); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line); } .mini-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); background: var(--bg-2); color: var(--ink-2); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line); } /* ----- Meta grid ----- */ .meta-grid, .hero-meta { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .meta-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; } .meta-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); font-weight: 600; } .meta-value { font-size: var(--fs-base); color: var(--ink); font-weight: 600; word-break: break-word; } .meta-note { font-size: var(--fs-sm); color: var(--muted); } /* ----- TCG card grid (kort på pokedex-sida) ----- */ .section-cards { background: var(--card-bg); padding: var(--space-5); border-radius: var(--radius); box-shadow: var(--shadow); } .tcg-card-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .tcg-card-item { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } .tcg-card-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .tcg-card-link { display: block; color: inherit; text-decoration: none; } .tcg-card-link:hover { text-decoration: none; } .tcg-card-thumb { aspect-ratio: 5 / 7; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tcg-card-thumb img { width: 100%; height: 100%; object-fit: contain; } .tcg-card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .tcg-card-body h3 { font-size: var(--fs-base); margin: 0; } .tcg-card-set { font-size: var(--fs-sm); color: var(--muted); margin: 0; } .tcg-card-meta { font-size: var(--fs-xs); color: var(--muted-2); margin: 0; } .tcg-card-badges { display: flex; flex-wrap: wrap; gap: 4px; } /* ----- Stats bars ----- */ .stats-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; } .stat-card { display: flex; flex-direction: column; gap: 4px; } .stat-header { display: flex; justify-content: space-between; align-items: baseline; } .stat-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; } .stat-value { font-size: var(--fs-base); font-weight: 700; color: var(--ink); } .stat-bar-bg { width: 100%; height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; } .stat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pk-blue), var(--pk-red)); border-radius: 999px; } /* ----- Related Pokémon links ----- */ .related-links { display: flex; flex-wrap: wrap; gap: var(--space-2); } .related-link { display: inline-flex; align-items: center; padding: 6px var(--space-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; } .related-link:hover { background: var(--pk-blue); color: #fff; text-decoration: none; } /* ----- Products section (PriceRunner) ----- */ .product-block { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); } .product-top { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); } .category-badge { display: inline-block; align-self: flex-start; font-size: var(--fs-xs); color: var(--muted); background: var(--bg-2); padding: 2px var(--space-2); border-radius: var(--radius-sm); } /* ----- Affiliate / PriceRunner widget wrapper (fixar mobil-clipping) ----- */ .pkmn-affiliate { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-3) 0; padding-block: var(--space-2); } .pkmn-affiliate iframe, .pkmn-affiliate > div { max-width: 100%; min-width: 0; } .pkmn-affiliate [data-pr-widget], .pkmn-affiliate .pr-widget, [data-pr-widget], .pr-widget { max-width: 100% !important; width: 100% !important; } .pkmn-affiliate-credit { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted-2); font-style: italic; } .pkmn-affiliate-credit a { color: var(--muted-2); } /* ----- Homepage (pk-home) ----- */ .pk-home { max-width: var(--maxw-wide); margin-inline: auto; padding: var(--space-4); background: var(--bg); } .pk-section { margin: 0 0 var(--space-8); } .pk-section-head { margin-bottom: var(--space-4); } .pk-section-head h2 { margin: 0 0 var(--space-2); } .pk-section-head p { margin: 0; color: var(--muted); } .pk-card { background: var(--card-bg); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); } .pk-hero { background: linear-gradient(135deg, #fff 0%, var(--bg-2) 100%); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-5); box-shadow: var(--shadow); } .pk-hero-copy { max-width: 720px; margin-inline: auto; text-align: center; } .pk-kicker { font-size: var(--fs-sm); color: var(--pk-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); } .pk-hero h1 { font-size: clamp(1.6rem, 5vw + 0.5rem, 3rem); margin-bottom: var(--space-4); } .pk-lead { font-size: var(--fs-lg); color: var(--muted); } .pk-search-wrap { position: relative; margin: var(--space-5) 0; } .pk-search-input { width: 100%; padding: var(--space-4); font-size: var(--fs-lg); border: 2px solid var(--line); border-radius: var(--radius); background: #fff; outline: none; } .pk-search-input:focus { border-color: var(--pk-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); } .pk-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-hover); max-height: 400px; overflow-y: auto; display: none; z-index: 50; margin-top: 4px; } .pk-search-results.is-active { display: block; } .pk-search-result { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink); } .pk-search-result:hover { background: var(--bg-2); text-decoration: none; } .pk-search-type { display: inline-block; font-size: var(--fs-xs); color: var(--pk-red); font-weight: 700; text-transform: uppercase; margin-right: var(--space-2); } .pk-search-title { font-weight: 600; } .pk-search-desc { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; } .pk-hero-points { list-style: none; padding: 0; margin: var(--space-5) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .pk-hero-points li { font-size: var(--fs-sm); color: var(--ink-2); background: #fff; padding: var(--space-2) var(--space-3); border-radius: 999px; border: 1px solid var(--line); } .pk-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .pk-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-weight: 700; font-size: var(--fs-base); text-decoration: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .pk-btn-primary { background: var(--pk-red); color: #fff; } .pk-btn-primary:hover { background: var(--pk-red-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .pk-btn-secondary { background: #fff; color: var(--ink-2); border: 2px solid var(--line); } .pk-btn-secondary:hover { border-color: var(--pk-blue); color: var(--pk-blue); } .pk-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .pk-side-card { background: var(--card-bg); padding: var(--space-5); border-radius: var(--radius); box-shadow: var(--shadow); } .pk-side-card strong { display: block; font-size: var(--fs-lg); color: var(--pk-red); margin-bottom: var(--space-2); } .pk-side-card p { margin: 0; color: var(--muted); } .pk-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .pk-chip { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); background: var(--bg-2); border-radius: 999px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line); text-decoration: none; } .pk-chip:hover { background: var(--pk-blue); color: #fff; text-decoration: none; } .pk-mini-link-list { display: flex; flex-direction: column; gap: var(--space-2); } .pk-mini-link { color: var(--ink-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-2); } .pk-info-list { list-style: disc; padding-left: var(--space-5); color: var(--muted); } .pk-info-list li { margin-bottom: var(--space-2); } .pk-bottom-cta { text-align: center; background: var(--card-bg); padding: var(--space-8) var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin: var(--space-8) 0; } .pk-bottom-cta h2 { margin-bottom: var(--space-3); } .pk-bottom-cta p { margin-bottom: var(--space-4); color: var(--muted); max-width: 600px; margin-inline: auto; } /* ----- Pokédex index (lista över alla Pokémon) ----- */ .pkmn-controls { background: var(--card-bg); padding: var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-5); box-shadow: var(--shadow); } .pkmn-controls-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .pkmn-search, .pkmn-select { width: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: var(--fs-base); color: var(--ink); } .pkmn-search:focus, .pkmn-select:focus { outline: none; border-color: var(--pk-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .pkmn-results-count { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--muted); } .pkmn-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); } .pokemon-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .pokemon-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; } .pokemon-card-image { aspect-ratio: 1 / 1; background: var(--bg-2); display: flex; align-items: center; justify-content: center; } .pokemon-card-image img { width: 80%; height: 80%; object-fit: contain; } .pokemon-card-content { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .pokemon-card-content h2 { font-size: var(--fs-base); margin: 0; } .pokemon-card-badges { display: flex; flex-wrap: wrap; gap: 4px; } .pokemon-card .generation { margin: 0; font-size: var(--fs-xs); color: var(--muted-2); } .pkmn-index-hero { padding: var(--space-6) var(--space-4); text-align: center; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--space-5); } /* ----- Price history graph ----- */ .price-history { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); } .price-history-heading { margin: 0 0 var(--space-3); font-size: var(--fs-lg); color: var(--ink); } .price-history-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } .price-history-meta > div { display: flex; flex-direction: column; } .price-history-meta strong { font-size: var(--fs-lg); } .price-history-svg { width: 100%; height: auto; max-width: 100%; } .price-history-note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted-2); } /* ----- Format legality badges ----- */ .legality-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3); background: var(--bg-2); border-radius: var(--radius-sm); } /* ----- Bulbapedia / illustrator trivia ----- */ .illustrator-trivia { background: var(--card-bg); padding: var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow); } /* ----- Trending block (Google Trends) ----- */ .pk-trending { background: var(--card-bg); padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .trending-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); grid-template-columns: 1fr; } .trending-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-2); border-radius: var(--radius-sm); } .trending-rank { font-weight: 700; color: var(--pk-red); min-width: 24px; } @media (min-width: 720px) { .trending-list { grid-template-columns: repeat(2, 1fr); } } /* ----- eBay sold / Reddit blocks ----- */ .ebay-sold-list, .reddit-discussion ul { list-style: none; padding: 0; margin: 0; } .ebay-sold-list li, .reddit-discussion li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); } /* ----- YouTube embed grid ----- */ .youtube-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } .youtube-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-sm); } @media (min-width: 720px) { .youtube-grid { grid-template-columns: repeat(3, 1fr); } } /* ----- Merch / affiliate block ----- */ .merch-block { background: var(--card-bg); padding: var(--space-5); border-radius: var(--radius); box-shadow: var(--shadow); } .merch-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); } .merch-item { background: var(--bg-2); border-radius: var(--radius-sm); padding: var(--space-3); } .merch-label { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--ink); } .merch-query { margin: 0 0 var(--space-2); } .merch-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .merch-cta { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; } .merch-cta:hover { background: var(--pk-blue); color: #fff; border-color: var(--pk-blue); text-decoration: none; } .merch-cta-pricerunner:hover { background: var(--pk-red); border-color: var(--pk-red); } @media (min-width: 720px) { .merch-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .merch-grid { grid-template-columns: repeat(3, 1fr); } } /* ----- E-postpopup ----- */ .pkmn-popup-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); display: none; align-items: center; justify-content: center; z-index: 9999; padding: var(--space-4); } .pkmn-popup-backdrop.is-open { display: flex; } .pkmn-popup { background: #fff; border-radius: var(--radius-lg); padding: var(--space-6); max-width: 480px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .pkmn-popup h2 { margin: 0 0 var(--space-3); } .pkmn-popup p { color: var(--muted); margin: 0 0 var(--space-3); } .pkmn-popup-form { display: flex; flex-direction: column; gap: var(--space-3); } .pkmn-popup-form input[type="email"] { padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-base); } .pkmn-popup-form input[type="email"]:focus { border-color: var(--pk-blue); outline: none; } .pkmn-popup-form button { padding: var(--space-3); background: var(--pk-red); color: #fff; border: none; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 700; cursor: pointer; } .pkmn-popup-form button:hover { background: var(--pk-red-dark); } .pkmn-popup-close { position: absolute; top: var(--space-3); right: var(--space-3); background: none; border: none; font-size: 24px; color: var(--muted-2); cursor: pointer; line-height: 1; } .pkmn-popup-skip { background: none; border: none; color: var(--muted-2); font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; padding: 0; } /* ----- Evolution chain ----- */ .evolution-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .evolution-step { display: inline-flex; align-items: center; gap: 4px; } .evolution-step a { color: var(--pk-blue); font-weight: 600; } .evolution-arrow { color: var(--muted-2); } /* ========================================================================== Breakpoints (additiv mobile-first) ========================================================================== */ @media (min-width: 600px) { .pkmn-controls-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .pkmn-hero { grid-template-columns: 280px 1fr; align-items: start; padding: var(--space-6); } .pkmn-hero.pkmn-hero-text-only, .pkmn-hero:has(> .hero-copy:only-child) { grid-template-columns: 1fr; } .pkmn-hero img { max-width: 260px; } .pkmn-card-page .pkmn-hero img { max-width: 240px; } .pk-grid-3 { grid-template-columns: repeat(3, 1fr); } .pkmn-card-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } } @media (min-width: 1024px) { .pkmn-wrap { padding: var(--space-6); } .pk-home { padding: var(--space-6); } .tcg-card-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .pkmn-card-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .stats-grid { grid-template-columns: repeat(3, 1fr); } }