@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Instrument+Sans:wght@400..700&family=DM+Mono:wght@400&display=swap");

:root {
  --ink: #141414;
  --paper: #f3f0e8;
  --marker: #ffe14a;
  --blue: #2b3bff;
  --coral: #ff6a4d;
  --mint: #9fe3c6;
  --coral-deep: #b4351a;
  --green-deep: #0e6544;
  --muted: #5e5b55;
  --paper-2: #e9e5da;
  --footer: #202020;
  --header-h: 50px;
  --sv: 7vh;
  --fs-h1: calc(1.5rem + 2.02546vw - 6.48148px);
  --fs-h2-5: calc(1.2rem + 1.15741vw - 3.7037px);
  --fs-h4: calc(1rem + 0.28935vw - 0.92593px);
  --fs-smallest: calc(0.75rem + 0.21701vw - 0.69444px);
  --display: "Archivo", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --side: max(20px, min(5.5vw, 120px));
  --col-gap: clamp(16px, 1.7vw, 32px);
  --section-pad: 7vh;
  --fs-hero: calc(3.5rem + 13.02083vw - 41.66667px);
  --fs-brand-xl: calc(2.7rem + 5.49769vw - 17.59259px);
  --fs-brand-l: calc(2.25rem + 3.21181vw - 10.27778px);
  --fs-h2: calc(1.3rem + 1.5625vw - 5px);
  --fs-h3: calc(1.2rem + 0.81019vw - 2.59259px);
  --fs-nav: calc(1rem + 0.28935vw - 0.92593px);
  --fs-body: calc(1rem + 0.43403vw - 1.38889px);
  --fs-small: calc(0.875rem + 0.36169vw - 1.15741px);
  --fs-label: calc(0.8125rem + 0.10851vw - 0.34722px);
}

@media (min-width: 1024px) { :root { --header-h: 60px; --sv: 12vh; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { background: var(--paper); font-size: var(--fs-body); line-height: 1.3; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
b, strong { font-weight: 600; }
html[data-lang="en"] [lang="es"], html[data-lang="es"] [lang="en"] { display: none !important; }

/* Header: 50px tall, 60px from 1024px; transparent over a dark hero, solid after one viewport */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--fg, var(--ink)); --nav: #555; --nav-hover: #000; transition: background 0.3s ease-in-out; }
.header-inner { position: relative; display: flex; align-items: center; height: var(--header-h); padding: 0 var(--side); }
:where(body[data-hero="dark"]) .site-header { --fg: var(--paper); --nav: var(--paper); --nav-hover: rgba(243, 240, 232, 0.7); }
:where(body[data-hero="dark"]) .site-header::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0)); z-index: -1; transition: opacity 0.3s ease-out; }
.site-header.solid, .site-header.menu-open { --fg: var(--ink); --nav: #555; --nav-hover: #000; background: var(--paper); }
.site-header.solid::before, .site-header.menu-open::before { opacity: 0; }
.wordmark { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: 28px; letter-spacing: -0.04em; text-decoration: none; line-height: 1; }
@media (min-width: 1024px) { .wordmark { font-size: 31px; } }
.wordmark .i { position: relative; display: inline-block; }
.wordmark .tittle { position: absolute; left: 50%; top: 0.04em; width: 0.21em; height: 0.21em; background: var(--marker); transform: translateX(-50%) rotate(14deg); border-radius: 2px; }
.header-end { position: relative; z-index: 2; order: 2; display: flex; align-items: center; gap: 14px; }
.lang { all: unset; cursor: pointer; font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; }
.burger { all: unset; display: none; box-sizing: content-box; cursor: pointer; flex-direction: column; justify-content: space-around; width: 21px; height: 21px; padding: 6px; }
.burger span { display: block; width: 21px; height: 3px; background: currentColor; transform-origin: 1px; transition: all 0.3s linear; }
.menu-open .burger span:nth-child(1) { transform: rotate(45deg) translate(3px, -3px); }
.menu-open .burger span:nth-child(2) { opacity: 0; transform: translateX(6px); width: 0; }
.menu-open .burger span:nth-child(3) { transform: rotate(-45deg) translate(3px, 3px); }
.nav ul { list-style: none; font-size: var(--fs-smallest); letter-spacing: 0.2px; line-height: 1.4; }
.nav-link { color: var(--nav); text-decoration: none; transition: color 0.2s ease-in-out; }
.nav-link:hover { color: var(--nav-hover); }
@media (min-width: 1024px) {
  .header-inner { justify-content: space-between; }
  .nav-wrapper { flex: 1; order: 1; }
  .nav ul { display: flex; align-items: center; justify-content: flex-end; }
  .nav .only-mobile { display: none; }
  .nav-link { display: block; margin: 0 10px; padding: 7px 0; }
  .header-end { margin-left: 15px; }
}
@media (min-width: 1250px) { .nav-link { margin: 0; padding: 7px 15px; } }
@media (max-width: 1023px) {
  .header-inner { justify-content: space-between; }
  .burger { display: flex; }
  .nav-wrapper { position: fixed; inset: 0 0 auto; z-index: 1; height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 40px) 0; background: var(--paper); opacity: 0; visibility: hidden; transition: visibility 0s linear 0.2s, opacity 0.2s ease-in-out; }
  .menu-open .nav-wrapper { opacity: 1; visibility: visible; transition: visibility 0s linear 0s, opacity 0.1s ease-in-out; }
  .nav { width: 100%; opacity: 0; }
  .menu-open .nav { opacity: 1; transition: opacity 0.3s ease-out; }
  .nav li { margin-bottom: 1em; text-align: center; }
}
html.no-scroll { overflow: hidden; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 130px var(--side) 34px; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(rgba(20, 20, 20, 0), rgba(20, 20, 20, 0.9)); pointer-events: none; }
.hero h1 { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: var(--fs-hero); line-height: 0.8; letter-spacing: -0.015em; }
mark { color: var(--ink); background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 39% / 0% 72%; animation: swipe 0.9s 0.4s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
@keyframes swipe { to { background-size: 100% 72%; } }
.after-hero { height: 216px; }

/* Grid and sections */
.section { padding: var(--section-pad) var(--side); }
.section + .section { padding-top: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-12 { grid-column: span 12; }
.start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
@media (max-width: 1023px) { .span-3, .span-4 { grid-column: span 6; } .span-5, .span-7 { grid-column: span 12; } .start-7, .start-8 { grid-column-start: auto; } }
@media (max-width: 767px) { .span-3, .span-4, .span-6 { grid-column: span 12; } }

.c-blue { color: var(--blue); } .c-coral { color: var(--coral-deep); } .c-green { color: var(--green-deep); } .c-ink { color: var(--ink); }
.eyebrow { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; line-height: 1.2; margin-bottom: 16px; }
.statement { font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; grid-column: 1 / span 7; }
@media (max-width: 1023px) { .statement { grid-column: 1 / -1; } }
.h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; }
.body { font-size: var(--fs-body); line-height: 1.3; }
.small { font-size: var(--fs-small); line-height: 1.35; }
.feature-list .h3 { margin-bottom: 0.7em; }
.brand-l, .brand-xl { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; line-height: 0.85; letter-spacing: -0.015em; }
.brand-l { font-size: var(--fs-brand-l); }
.brand-xl { font-size: var(--fs-brand-xl); }
.block-gap { margin-top: 12vh; }
.head-gap { margin-bottom: 4.5vh; }

/* Tiles: square corners, natural image ratio, label and title below */
[hidden] { display: none !important; }
.tile { text-decoration: none; display: block; }
.tile .media { overflow: hidden; }
.tile img { width: 100%; height: auto; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover img { transform: scale(1.03); }
.tile .label { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; color: var(--ink); margin: 16px 0 10px; }
.tile .title { font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); }
.tile .media + .title { margin-top: 14px; }
.ph { aspect-ratio: var(--ar, 1.5); background: var(--ph-bg, #e4e0d6); display: grid; place-items: center; position: relative; overflow: hidden; }
.ph span { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; color: var(--ph-fg, var(--muted)); position: relative; z-index: 1; }
.ph::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(20, 20, 20, 0.14) 1px, transparent 0); background-size: 18px 18px; }

/* Principles */
.rows { border-top: 1px solid currentColor; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; border-bottom: 1px solid currentColor; padding: 14px 0; }
.row .icon { grid-column: 1; width: clamp(28px, 2.6vw, 40px); }
.row .word { grid-column: 2 / span 6; }
.row p { grid-column: 8 / span 5; font-size: var(--fs-small); line-height: 1.35; }
@media (max-width: 767px) { .row .icon { grid-column: 1 / span 2; } .row .word { grid-column: 3 / -1; } .row p { grid-column: 1 / -1; margin-top: 10px; } }

/* Feature */
.feature .text h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; margin-bottom: 20px; }
.feature .text p { font-size: var(--fs-small); color: var(--muted); max-width: 30em; }

/* Bullet columns */
.bullets li { font-size: var(--fs-small); line-height: 1.35; padding-left: 1em; position: relative; margin-bottom: 0.45em; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.32em; height: 0.32em; background: currentColor; border-radius: 50%; }

/* Footer: links | social and legal | seals and copyright, then two static rows of greetings with the @ button */
.site-footer { position: relative; z-index: 10; background: var(--footer); color: var(--paper); padding: 5vh 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); padding: 0 var(--side); }
.footer-links { grid-column: 1; list-style: none; font-size: var(--fs-small); line-height: 1.5; }
.footer-links a { color: #fff; text-decoration: none; padding: 3px 0; }
.footer-links a:hover { text-decoration: underline; }
.footer-middle { grid-column: 2; font-size: var(--fs-small); line-height: 1.3; }
.footer-middle p { margin-bottom: 0.8em; }
.site-footer p a { color: var(--paper); text-decoration: underline; }
.site-footer p a:hover { text-decoration: none; }
.social { display: flex; align-items: center; line-height: 36px; }
.social ul { display: flex; align-items: center; list-style: none; }
.social li { margin-left: 15px; }
.social a { display: flex; color: #fff; }
.social svg { width: 20px; height: 20px; }
.newsletter { margin-top: 10px; }
.footer-right { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.small-print { font-size: var(--fs-small); line-height: 1.3; }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-links { grid-column: 1 / span 2; }
  .footer-middle { grid-column: 4 / span 4; }
  .footer-right { grid-column: 9 / span 4; align-items: flex-end; justify-content: space-between; }
  .small-print { text-align: right; }
}
.hello { position: relative; overflow-y: clip; padding: calc(10vh + 50px) 4px 0; transform: translateX(-2px); }
.hello-words { position: relative; display: flex; flex-direction: column; gap: 15px; width: 100%; font-size: 13.63vw; line-height: 0.8; text-align: center; white-space: nowrap; transform: translateY(-35px); }
.hello-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.hello-word { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; color: #fff; opacity: 0.9; transition: opacity 0.2s ease; }
.hello-word:hover { opacity: 1; }
.round-btn { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, calc(-50% - 5px)); display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 4rem; border: 1px solid #fff; background: #2b2b2b; color: #fff; font-family: var(--body); font-size: calc(1.125rem + 0.50637vw - 1.62037px); line-height: 1.3; white-space: nowrap; text-decoration: none; overflow: hidden; transition: all 0.3s ease-in-out; }
.round-btn .symbol { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.15s ease-in-out 0.15s; }
.round-btn .content { opacity: 0; transition: opacity 0.15s ease-in-out 0s; }
@media (hover: hover) {
  .round-btn:hover { width: 12rem; padding: 0 1.5rem; background: var(--marker); border-color: var(--ink); color: var(--ink); }
  .round-btn:hover .symbol { opacity: 0; transition-delay: 0s; }
  .round-btn:hover .content { opacity: 1; transition-delay: 0.15s; }
}
@media (min-width: 768px) {
  .round-btn { width: 5rem; height: 5rem; border-radius: 5rem; }
  .round-btn:hover { padding: 0 2rem; }
}
@media (min-width: 1250px) { .round-btn { transform: translate(-50%, calc(-50% - 10px)); } }

/* Page sections measured from ustwo: --sv is 7vh, 12vh from 1024px */
.s { padding: var(--sv) var(--side) 0; }
.s.both { padding-bottom: var(--sv); }
.s-head { padding: calc(var(--sv) * 2) var(--side) calc(var(--sv) * 0.75); }
@media (min-width: 1024px) { .s-head { padding-top: calc(var(--sv) * 1.5); } }
.h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; grid-column: 1 / span 8; }
.h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
@media (max-width: 1023px) { .h1 { grid-column: 1 / -1; } }
.img-75 { height: 30vh; overflow: hidden; }
.img-75 img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .img-75 { height: 75vh; } }
.grey { color: var(--muted); }
.sep { margin: 0 0.75em; }

/* Service package */
.pkg-head { grid-column: 1 / span 4; }
.pkg-body { grid-column: 6 / span 6; }
.pkg-body p { letter-spacing: -0.03em; margin-bottom: 0.8em; }
.logo-board { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 1.6em; }
.logo-word { font-weight: 700; font-size: 22px; letter-spacing: -0.04em; color: #3a3a3a; text-decoration: none; }
.pkg-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 1.6em; }
.pkg-lists h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 0.8em; }
.pkg-lists ul { list-style: disc; padding-left: 1em; font-size: var(--fs-small); line-height: 1.3; letter-spacing: -0.03em; }
.pkg-lists li { margin-bottom: 0.4em; }
@media (max-width: 1023px) {
  .pkg-head, .pkg-body { grid-column: 1 / -1; }
  .pkg-lists { grid-template-columns: 1fr; row-gap: 1.6em; }
}

/* Feature quote: Georgia mark, italic grey text */
.quote { grid-column: 1 / -1; display: flex; align-items: flex-start; column-gap: var(--side); padding: var(--side) 0; }
.quote .mark { flex-shrink: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 100px; font-weight: 700; line-height: 0.8; color: var(--coral); }
.quote blockquote { font-size: var(--fs-h2-5); font-style: italic; line-height: 1.3; letter-spacing: -0.03em; color: var(--muted); }
.quote .author { margin-top: 1.4em; font-size: var(--fs-small); line-height: 1.3; }
.quote .author b { font-weight: 600; display: block; }
@media (min-width: 768px) {
  .quote { display: grid; grid-template-columns: subgrid; column-gap: var(--col-gap); }
  .quote .mark { grid-column: 2; }
  .quote .q-content { grid-column: 3 / span 8; min-width: 0; }
}
@media (min-width: 1024px) { .quote .mark { font-size: 200px; } }

/* Contact banner: brand background, centered label, title and button */
.contact-banner { position: relative; overflow: hidden; padding: var(--sv) var(--side); background: var(--ink); color: var(--paper); text-align: center; }
.contact-banner canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.contact-banner .grid { position: relative; z-index: 1; }
.contact-banner .inner { grid-column: 4 / span 6; }
.contact-banner .h2 { margin-bottom: 0.8em; }
@media (max-width: 1023px) { .contact-banner .inner { grid-column: 1 / -1; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.6em 1.5em; border: 1px solid transparent; border-radius: 10px; background: var(--marker); color: var(--ink); font-size: var(--fs-small); line-height: 1.3; text-decoration: none; white-space: nowrap; transition: all 0.3s ease-out; }
.btn:hover { background: #f2d22c; }

/* Work page, measured from ustwo /work: industry rows of 3 tiles, then a grey "All case studies" grid of 4 with filters */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.work-row { padding: 5vh var(--side) 0; }
.work-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 33px; }
.work-row-tiles { display: grid; grid-template-columns: 1fr; gap: 56px var(--col-gap); }
.work-all { margin-top: var(--sv); padding: 5vh var(--side) var(--sv); background: var(--paper-2); }
.work-all h2 { margin-bottom: 0.8em; }
.work-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 80px; }
.select { appearance: none; width: 100%; padding: 12px 48px 12px 16px; border: 1px solid #5e5e5e; border-radius: 10px; font: 16px/1.3 var(--body); color: var(--ink); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23141414' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.work-grid { display: grid; grid-template-columns: 1fr; gap: 52px var(--col-gap); }
.work-empty { font-size: var(--fs-body); }
.case-media { overflow: hidden; aspect-ratio: 1.4; background: #e2ded3; }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-out; }
a.case-tile { text-decoration: none; display: block; }
a.case-tile:hover .case-media img { transform: scale(1.05); }
.case-text { padding-top: 16px; }
.case-client { font-family: var(--mono); font-size: var(--fs-label); line-height: 1.4; text-transform: uppercase; margin-bottom: 16px; }
.case-title { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
.case-tile.compact .case-title { font-size: var(--fs-body); line-height: 1.3; }
@media (min-width: 768px) {
  .work-filters { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
  .filter-group { flex: 0 0 auto; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 63px; }
}
@media (min-width: 1024px) {
  .work-row { padding-top: 10vh; }
  .work-all { padding-top: 10vh; }
  .work-row-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 56px; }
}

/* Home, measured from ustwo's home: intro statement + side note, featured tiles 2 then 3, approach band with 4 columns */
.intro-title { grid-column: 1 / -1; font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
.intro-side { grid-column: 1 / -1; font-size: var(--fs-body); line-height: 1.3; letter-spacing: -0.03em; }
.home-work { padding: 0 var(--side) var(--sv); }
.home-tiles { row-gap: 47px; }
.home-tiles .case-tile { grid-column: 1 / -1; }
.approach { padding: var(--sv) var(--side); background: var(--blue); color: var(--paper); }
.approach-title { grid-column: 1 / -1; font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; }
.approach-items { margin-top: 5vh; row-gap: 40px; }
.approach-item { grid-column: 1 / -1; }
.approach-item h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 0.8em; }
.approach-item p { font-size: var(--fs-body); line-height: 1.3; letter-spacing: -0.03em; margin-bottom: 0.8em; }
.learn-more { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--marker); text-decoration: none; }
.learn-more svg { transition: transform 0.3s ease-out; }
.learn-more:hover svg { transform: translateX(4px); }
@media (min-width: 768px) {
  .home-tiles .case-tile.big { grid-column: span 6; }
  .home-tiles .case-tile.small { grid-column: span 4; }
  .approach-item { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .intro-title { grid-column: 1 / span 6; }
  .intro-side { grid-column: 7 / span 4; align-self: end; }
  .home-tiles { row-gap: 86px; }
  .approach-title { grid-column: 1 / span 6; }
  .approach-items { margin-top: 10vh; }
  .approach-item { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (min-width: 1024px) { .statement.w-4 { grid-column: 1 / span 4; } .statement.w-6 { grid-column: 1 / span 6; } }