[{"data":1,"prerenderedAt":2617},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries":3,"content-all-pages":2053,"live-demo:hero-container":2611},{"id":4,"title":5,"body":6,"description":2035,"extension":2036,"meta":2037,"navigation":366,"path":2049,"seo":2050,"stem":2051,"__hash__":2052},"content\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries\u002Findex.md","Responsive Hero Sections With Container Queries",{"type":7,"value":8,"toc":2024},"minimark",[9,13,28,33,36,44,165,169,181,185,1598,1622,1626,1629,1679,1682,1686,1689,1704,1724,1742,1746,1761,1779,1783,1786,1915,1921,1925,1938,1942,1948,1954,1968,1987,1991,2021],[10,11,5],"h1",{"id":12},"responsive-hero-sections-with-container-queries",[14,15,16,17,22,23,27],"p",{},"The hero banner is the most visible component on a landing page and one of the most reused: the same headline-image-button arrangement appears full width on the homepage, half width in a campaign column, and narrow in a promotional sidebar or an upgrade modal. A hero designed with viewport media queries looks right in exactly one of those places. The narrow problem this page solves is a hero that chooses its layout from its own width — stacked when narrow, split side by side when medium, text overlaid on a full-bleed image when wide — while keeping text readable over photography and its call to action visible on mobile. It belongs to ",[18,19,21],"a",{"href":20},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002F","Responsive Component Patterns"," in the ",[18,24,26],{"href":25},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[29,30,32],"h2",{"id":31},"why-the-hero-must-measure-itself","Why the hero must measure itself",[14,34,35],{},"A viewport breakpoint encodes an assumption: \"at 1024 pixels wide the hero has room for a split layout\". That is true when the hero spans the page and false when the same component sits in a 480-pixel column of that 1024-pixel page. The failure is visible and embarrassing — a headline squeezed to three words per line beside an image — and it happens on exactly the pages where marketing teams reuse the component in new contexts.",[14,37,38,39,43],{},"With the hero as a size container, the thresholds describe the hero itself: \"at 40rem of ",[40,41,42],"em",{},"hero"," width, go side by side\". Every placement then gets the layout that fits it.",[45,46,52,53,52,57,52,61,52,69,52,81,52,90,52,97,52,102,52,106,52,113,52,119,52,122,52,125,52,129,52,132,52,136,52,139,52,143,52,146,52,148,52,152,52,156,52,158,52,161],"svg",{"viewBox":47,"role":48,"ariaLabel":49,"xmlns":50,"style":51},"0 0 720 330","img","Three hero layouts by container width: stacked media then text, split media and text side by side, and text overlaid on a full-bleed image","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[54,55,56],"title",{},"Three layouts, chosen by the hero's own width",[58,59,60],"desc",{},"Narrow: the image sits above the headline, text and button. Medium: image and text sit side by side in two columns. Wide: the image fills the whole hero and the text sits over its left side on a gradient scrim.",[62,63,68],"text",{"textAnchor":64,"x":65,"y":66,"style":67},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","Stacked · split · overlay",[70,71],"rect",{"x":72,"y":73,"width":74,"height":75,"rx":76,"fill":77,"stroke":78,"strokeWidth":79,"opacity":80},"30","50","150","230","10","none","currentColor","1.5","0.6",[70,82],{"x":83,"y":84,"width":85,"height":86,"rx":87,"fill":88,"opacity":89},"40","60","130","90","6","#7aa2ff","0.4",[70,91],{"x":83,"y":92,"width":93,"height":94,"rx":95,"fill":78,"opacity":96},"162","110","14","3","0.35",[70,98],{"x":83,"y":99,"width":85,"height":100,"rx":95,"fill":78,"opacity":101},"184","8","0.2",[70,103],{"x":83,"y":104,"width":105,"height":100,"rx":95,"fill":78,"opacity":101},"198","100",[70,107],{"x":83,"y":108,"width":109,"height":110,"rx":111,"fill":88,"opacity":112},"220","70","22","5","0.7",[62,114,118],{"textAnchor":64,"x":115,"y":116,"style":117},"105","306","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","\u003C 40rem",[70,120],{"x":121,"y":73,"width":108,"height":75,"rx":76,"fill":77,"stroke":78,"strokeWidth":79,"opacity":80},"210",[70,123],{"x":108,"y":84,"width":124,"height":121,"rx":87,"fill":88,"opacity":89},"95",[70,126],{"x":127,"y":128,"width":124,"height":94,"rx":95,"fill":78,"opacity":96},"325","120",[70,130],{"x":127,"y":131,"width":124,"height":100,"rx":95,"fill":78,"opacity":101},"142",[70,133],{"x":127,"y":134,"width":135,"height":100,"rx":95,"fill":78,"opacity":101},"156","80",[70,137],{"x":127,"y":138,"width":109,"height":110,"rx":111,"fill":88,"opacity":112},"178",[62,140,142],{"textAnchor":64,"x":141,"y":116,"style":117},"320","40–64rem",[70,144],{"x":145,"y":73,"width":75,"height":75,"rx":76,"fill":88,"opacity":89},"460",[70,147],{"x":145,"y":73,"width":85,"height":75,"rx":76,"fill":78,"opacity":101},[70,149],{"x":150,"y":128,"width":105,"height":94,"rx":95,"fill":78,"opacity":151},"476","0.45",[70,153],{"x":150,"y":131,"width":154,"height":100,"rx":95,"fill":78,"opacity":155},"96","0.3",[70,157],{"x":150,"y":134,"width":135,"height":100,"rx":95,"fill":78,"opacity":155},[70,159],{"x":150,"y":138,"width":109,"height":110,"rx":111,"fill":88,"opacity":160},"0.8",[62,162,164],{"textAnchor":64,"x":163,"y":116,"style":117},"575",">= 64rem",[29,166,168],{"id":167},"the-complete-implementation","The complete implementation",[14,170,171,172,176,177,180],{},"Resize the demo through all three layouts. The image is an ",[173,174,175],"code",{},"\u003Cimg>"," with ",[173,178,179],{},"object-fit: cover",", so it crops cleanly at every aspect ratio.",[182,183],"live-demo",{"name":184},"hero-container",[186,187,192],"pre",{"className":188,"code":189,"language":190,"meta":191,"style":191},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!doctype html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>Container-driven hero\u003C\u002Ftitle>\n\u003Cstyle>\n  body { margin: 0; font: 16px\u002F1.5 system-ui, sans-serif; }\n\n  .hero-slot { container: hero \u002F inline-size; }\n\n  .hero {\n    display: grid;\n    gap: 1.25rem;\n    padding: clamp(1rem, 4cqi, 2.5rem);\n    background: #0f172a;\n    color: #f8fafc;\n  }\n\n  .hero__media img {\n    display: block;\n    width: 100%;\n    aspect-ratio: 16 \u002F 9;\n    object-fit: cover;\n    border-radius: 12px;\n  }\n\n  .hero__title {\n    margin: 0;\n    font-size: clamp(1.6rem, 1rem + 4cqi, 3.25rem);   \u002F* scales with the hero *\u002F\n    line-height: 1.1;\n    text-wrap: balance;\n  }\n  .hero__lede { margin: 0.75rem 0 1.25rem; max-width: 45ch; color: #cbd5e1; }\n  .hero__cta {\n    display: inline-block;\n    padding: 0.7rem 1.2rem;\n    border-radius: 8px;\n    background: #facc15;\n    color: #1c1917;\n    font-weight: 700;\n    text-decoration: none;\n  }\n  .hero__cta:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; }\n\n  \u002F* SPLIT: media and text side by side. *\u002F\n  @container hero (40rem \u003C= width \u003C 64rem) {\n    .hero { grid-template-columns: 1fr 1fr; align-items: center; }\n    .hero__media img { aspect-ratio: 4 \u002F 5; }\n  }\n\n  \u002F* OVERLAY: the image fills the hero, text sits on a scrim. *\u002F\n  @container hero (width >= 64rem) {\n    .hero {\n      grid-template-areas: \"stack\";\n      padding: 0;\n      min-height: min(36rem, 100svh);\n    }\n    .hero > * { grid-area: stack; }\n    .hero__media img { height: 100%; aspect-ratio: auto; border-radius: 0; }\n    .hero__text {\n      z-index: 1;\n      align-self: center;\n      max-width: 34rem;\n      padding: clamp(1.5rem, 4cqi, 3.5rem);\n    }\n    \u002F* Scrim: darkest behind the text, fading toward the image's right. *\u002F\n    .hero::after {\n      content: \"\";\n      grid-area: stack;\n      background: linear-gradient(90deg, rgb(15 23 42 \u002F 0.92) 0%, rgb(15 23 42 \u002F 0.6) 45%, transparent 75%);\n    }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"hero-slot\">\n    \u003Csection class=\"hero\" aria-labelledby=\"hero-title\">\n      \u003Cdiv class=\"hero__media\">\n        \u003Cimg src=\"\u002Fimg\u002Fridge.jpg\" alt=\"Hikers crossing a ridge at sunrise\" width=\"1600\" height=\"900\">\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"hero__text\">\n        \u003Ch1 class=\"hero__title\" id=\"hero-title\">Walk the ridge before the crowds arrive\u003C\u002Fh1>\n        \u003Cp class=\"hero__lede\">Guided dawn hikes with small groups and no rush.\u003C\u002Fp>\n        \u003Ca class=\"hero__cta\" href=\"\u002Fbook\u002F\">Book a dawn hike\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[173,193,194,214,234,244,262,287,301,311,361,368,382,387,396,410,426,463,476,489,495,500,511,523,538,556,569,584,589,594,602,614,660,673,686,691,741,749,761,779,792,804,816,829,841,846,882,887,893,902,937,960,965,970,976,984,991,1004,1016,1043,1049,1068,1106,1114,1126,1138,1153,1183,1188,1194,1202,1215,1224,1304,1309,1314,1324,1333,1343,1362,1388,1405,1447,1457,1473,1501,1522,1551,1560,1570,1580,1589],{"__ignoreMap":191},[195,196,199,203,207,211],"span",{"class":197,"line":198},"line",1,[195,200,202],{"class":201},"suds8","\u003C!",[195,204,206],{"class":205},"sne4z","doctype",[195,208,210],{"class":209},"s-5SL"," html",[195,212,213],{"class":201},">\n",[195,215,217,220,222,225,228,232],{"class":197,"line":216},2,[195,218,219],{"class":201},"\u003C",[195,221,190],{"class":205},[195,223,224],{"class":209}," lang",[195,226,227],{"class":201},"=",[195,229,231],{"class":230},"sT6z2","\"en\"",[195,233,213],{"class":201},[195,235,237,239,242],{"class":197,"line":236},3,[195,238,219],{"class":201},[195,240,241],{"class":205},"head",[195,243,213],{"class":201},[195,245,247,249,252,255,257,260],{"class":197,"line":246},4,[195,248,219],{"class":201},[195,250,251],{"class":205},"meta",[195,253,254],{"class":209}," charset",[195,256,227],{"class":201},[195,258,259],{"class":230},"\"utf-8\"",[195,261,213],{"class":201},[195,263,265,267,269,272,274,277,280,282,285],{"class":197,"line":264},5,[195,266,219],{"class":201},[195,268,251],{"class":205},[195,270,271],{"class":209}," name",[195,273,227],{"class":201},[195,275,276],{"class":230},"\"viewport\"",[195,278,279],{"class":209}," content",[195,281,227],{"class":201},[195,283,284],{"class":230},"\"width=device-width, initial-scale=1\"",[195,286,213],{"class":201},[195,288,290,292,294,297,299],{"class":197,"line":289},6,[195,291,219],{"class":201},[195,293,54],{"class":205},[195,295,296],{"class":201},">Container-driven hero\u003C\u002F",[195,298,54],{"class":205},[195,300,213],{"class":201},[195,302,304,306,309],{"class":197,"line":303},7,[195,305,219],{"class":201},[195,307,308],{"class":205},"style",[195,310,213],{"class":201},[195,312,314,317,320,323,326,329,332,335,337,340,344,347,349,352,355,358],{"class":197,"line":313},8,[195,315,316],{"class":205},"  body",[195,318,319],{"class":201}," { ",[195,321,322],{"class":209},"margin",[195,324,325],{"class":201},": ",[195,327,328],{"class":209},"0",[195,330,331],{"class":201},"; ",[195,333,334],{"class":209},"font",[195,336,325],{"class":201},[195,338,339],{"class":209},"16",[195,341,343],{"class":342},"sHUrx","px",[195,345,346],{"class":201},"\u002F",[195,348,79],{"class":209},[195,350,351],{"class":209}," system-ui",[195,353,354],{"class":201},", ",[195,356,357],{"class":209},"sans-serif",[195,359,360],{"class":201},"; }\n",[195,362,364],{"class":197,"line":363},9,[195,365,367],{"emptyLinePlaceholder":366},true,"\n",[195,369,371,374,376,379],{"class":197,"line":370},10,[195,372,373],{"class":209},"  .hero-slot",[195,375,319],{"class":201},[195,377,378],{"class":209},"container",[195,380,381],{"class":201},": hero \u002F inline-size; }\n",[195,383,385],{"class":197,"line":384},11,[195,386,367],{"emptyLinePlaceholder":366},[195,388,390,393],{"class":197,"line":389},12,[195,391,392],{"class":209},"  .hero",[195,394,395],{"class":201}," {\n",[195,397,399,402,404,407],{"class":197,"line":398},13,[195,400,401],{"class":209},"    display",[195,403,325],{"class":201},[195,405,406],{"class":209},"grid",[195,408,409],{"class":201},";\n",[195,411,413,416,418,421,424],{"class":197,"line":412},14,[195,414,415],{"class":209},"    gap",[195,417,325],{"class":201},[195,419,420],{"class":209},"1.25",[195,422,423],{"class":342},"rem",[195,425,409],{"class":201},[195,427,429,432,434,437,440,443,445,447,450,453,455,458,460],{"class":197,"line":428},15,[195,430,431],{"class":209},"    padding",[195,433,325],{"class":201},[195,435,436],{"class":209},"clamp",[195,438,439],{"class":201},"(",[195,441,442],{"class":209},"1",[195,444,423],{"class":342},[195,446,354],{"class":201},[195,448,449],{"class":209},"4",[195,451,452],{"class":342},"cqi",[195,454,354],{"class":201},[195,456,457],{"class":209},"2.5",[195,459,423],{"class":342},[195,461,462],{"class":201},");\n",[195,464,466,469,471,474],{"class":197,"line":465},16,[195,467,468],{"class":209},"    background",[195,470,325],{"class":201},[195,472,473],{"class":209},"#0f172a",[195,475,409],{"class":201},[195,477,479,482,484,487],{"class":197,"line":478},17,[195,480,481],{"class":209},"    color",[195,483,325],{"class":201},[195,485,486],{"class":209},"#f8fafc",[195,488,409],{"class":201},[195,490,492],{"class":197,"line":491},18,[195,493,494],{"class":201},"  }\n",[195,496,498],{"class":197,"line":497},19,[195,499,367],{"emptyLinePlaceholder":366},[195,501,503,506,509],{"class":197,"line":502},20,[195,504,505],{"class":209},"  .hero__media",[195,507,508],{"class":205}," img",[195,510,395],{"class":201},[195,512,514,516,518,521],{"class":197,"line":513},21,[195,515,401],{"class":209},[195,517,325],{"class":201},[195,519,520],{"class":209},"block",[195,522,409],{"class":201},[195,524,526,529,531,533,536],{"class":197,"line":525},22,[195,527,528],{"class":209},"    width",[195,530,325],{"class":201},[195,532,105],{"class":209},[195,534,535],{"class":342},"%",[195,537,409],{"class":201},[195,539,541,544,546,548,551,554],{"class":197,"line":540},23,[195,542,543],{"class":209},"    aspect-ratio",[195,545,325],{"class":201},[195,547,339],{"class":209},[195,549,550],{"class":201}," \u002F ",[195,552,553],{"class":209},"9",[195,555,409],{"class":201},[195,557,559,562,564,567],{"class":197,"line":558},24,[195,560,561],{"class":209},"    object-fit",[195,563,325],{"class":201},[195,565,566],{"class":209},"cover",[195,568,409],{"class":201},[195,570,572,575,577,580,582],{"class":197,"line":571},25,[195,573,574],{"class":209},"    border-radius",[195,576,325],{"class":201},[195,578,579],{"class":209},"12",[195,581,343],{"class":342},[195,583,409],{"class":201},[195,585,587],{"class":197,"line":586},26,[195,588,494],{"class":201},[195,590,592],{"class":197,"line":591},27,[195,593,367],{"emptyLinePlaceholder":366},[195,595,597,600],{"class":197,"line":596},28,[195,598,599],{"class":209},"  .hero__title",[195,601,395],{"class":201},[195,603,605,608,610,612],{"class":197,"line":604},29,[195,606,607],{"class":209},"    margin",[195,609,325],{"class":201},[195,611,328],{"class":209},[195,613,409],{"class":201},[195,615,617,620,622,624,626,629,631,633,635,637,641,644,646,648,651,653,656],{"class":197,"line":616},30,[195,618,619],{"class":209},"    font-size",[195,621,325],{"class":201},[195,623,436],{"class":209},[195,625,439],{"class":201},[195,627,628],{"class":209},"1.6",[195,630,423],{"class":342},[195,632,354],{"class":201},[195,634,442],{"class":209},[195,636,423],{"class":342},[195,638,640],{"class":639},"soyes"," +",[195,642,643],{"class":209}," 4",[195,645,452],{"class":342},[195,647,354],{"class":201},[195,649,650],{"class":209},"3.25",[195,652,423],{"class":342},[195,654,655],{"class":201},");   ",[195,657,659],{"class":658},"sLBg1","\u002F* scales with the hero *\u002F\n",[195,661,663,666,668,671],{"class":197,"line":662},31,[195,664,665],{"class":209},"    line-height",[195,667,325],{"class":201},[195,669,670],{"class":209},"1.1",[195,672,409],{"class":201},[195,674,676,679,681,684],{"class":197,"line":675},32,[195,677,678],{"class":209},"    text-wrap",[195,680,325],{"class":201},[195,682,683],{"class":209},"balance",[195,685,409],{"class":201},[195,687,689],{"class":197,"line":688},33,[195,690,494],{"class":201},[195,692,694,697,699,701,703,706,708,711,714,716,718,721,723,726,729,731,734,736,739],{"class":197,"line":693},34,[195,695,696],{"class":209},"  .hero__lede",[195,698,319],{"class":201},[195,700,322],{"class":209},[195,702,325],{"class":201},[195,704,705],{"class":209},"0.75",[195,707,423],{"class":342},[195,709,710],{"class":209}," 0",[195,712,713],{"class":209}," 1.25",[195,715,423],{"class":342},[195,717,331],{"class":201},[195,719,720],{"class":209},"max-width",[195,722,325],{"class":201},[195,724,725],{"class":209},"45",[195,727,728],{"class":342},"ch",[195,730,331],{"class":201},[195,732,733],{"class":209},"color",[195,735,325],{"class":201},[195,737,738],{"class":209},"#cbd5e1",[195,740,360],{"class":201},[195,742,744,747],{"class":197,"line":743},35,[195,745,746],{"class":209},"  .hero__cta",[195,748,395],{"class":201},[195,750,752,754,756,759],{"class":197,"line":751},36,[195,753,401],{"class":209},[195,755,325],{"class":201},[195,757,758],{"class":209},"inline-block",[195,760,409],{"class":201},[195,762,764,766,768,770,772,775,777],{"class":197,"line":763},37,[195,765,431],{"class":209},[195,767,325],{"class":201},[195,769,112],{"class":209},[195,771,423],{"class":342},[195,773,774],{"class":209}," 1.2",[195,776,423],{"class":342},[195,778,409],{"class":201},[195,780,782,784,786,788,790],{"class":197,"line":781},38,[195,783,574],{"class":209},[195,785,325],{"class":201},[195,787,100],{"class":209},[195,789,343],{"class":342},[195,791,409],{"class":201},[195,793,795,797,799,802],{"class":197,"line":794},39,[195,796,468],{"class":209},[195,798,325],{"class":201},[195,800,801],{"class":209},"#facc15",[195,803,409],{"class":201},[195,805,807,809,811,814],{"class":197,"line":806},40,[195,808,481],{"class":209},[195,810,325],{"class":201},[195,812,813],{"class":209},"#1c1917",[195,815,409],{"class":201},[195,817,819,822,824,827],{"class":197,"line":818},41,[195,820,821],{"class":209},"    font-weight",[195,823,325],{"class":201},[195,825,826],{"class":209},"700",[195,828,409],{"class":201},[195,830,832,835,837,839],{"class":197,"line":831},42,[195,833,834],{"class":209},"    text-decoration",[195,836,325],{"class":201},[195,838,77],{"class":209},[195,840,409],{"class":201},[195,842,844],{"class":197,"line":843},43,[195,845,494],{"class":201},[195,847,849,852,854,857,859,861,863,866,869,871,874,876,878,880],{"class":197,"line":848},44,[195,850,851],{"class":209},"  .hero__cta:focus-visible",[195,853,319],{"class":201},[195,855,856],{"class":209},"outline",[195,858,325],{"class":201},[195,860,95],{"class":209},[195,862,343],{"class":342},[195,864,865],{"class":209}," solid",[195,867,868],{"class":209}," #f8fafc",[195,870,331],{"class":201},[195,872,873],{"class":209},"outline-offset",[195,875,325],{"class":201},[195,877,95],{"class":209},[195,879,343],{"class":342},[195,881,360],{"class":201},[195,883,885],{"class":197,"line":884},45,[195,886,367],{"emptyLinePlaceholder":366},[195,888,890],{"class":197,"line":889},46,[195,891,892],{"class":658},"  \u002F* SPLIT: media and text side by side. *\u002F\n",[195,894,896,899],{"class":197,"line":895},47,[195,897,898],{"class":342},"  @container",[195,900,901],{"class":201}," hero (40rem \u003C= width \u003C 64rem) {\n",[195,903,905,908,910,913,915,917,920,923,925,927,930,932,935],{"class":197,"line":904},48,[195,906,907],{"class":209},"    .hero",[195,909,319],{"class":201},[195,911,912],{"class":209},"grid-template-columns",[195,914,325],{"class":201},[195,916,442],{"class":209},[195,918,919],{"class":342},"fr",[195,921,922],{"class":209}," 1",[195,924,919],{"class":342},[195,926,331],{"class":201},[195,928,929],{"class":209},"align-items",[195,931,325],{"class":201},[195,933,934],{"class":209},"center",[195,936,360],{"class":201},[195,938,940,943,945,947,950,952,954,956,958],{"class":197,"line":939},49,[195,941,942],{"class":209},"    .hero__media",[195,944,508],{"class":205},[195,946,319],{"class":201},[195,948,949],{"class":209},"aspect-ratio",[195,951,325],{"class":201},[195,953,449],{"class":209},[195,955,550],{"class":201},[195,957,111],{"class":209},[195,959,360],{"class":201},[195,961,963],{"class":197,"line":962},50,[195,964,494],{"class":201},[195,966,968],{"class":197,"line":967},51,[195,969,367],{"emptyLinePlaceholder":366},[195,971,973],{"class":197,"line":972},52,[195,974,975],{"class":658},"  \u002F* OVERLAY: the image fills the hero, text sits on a scrim. *\u002F\n",[195,977,979,981],{"class":197,"line":978},53,[195,980,898],{"class":342},[195,982,983],{"class":201}," hero (width >= 64rem) {\n",[195,985,987,989],{"class":197,"line":986},54,[195,988,907],{"class":209},[195,990,395],{"class":201},[195,992,994,997,999,1002],{"class":197,"line":993},55,[195,995,996],{"class":209},"      grid-template-areas",[195,998,325],{"class":201},[195,1000,1001],{"class":230},"\"stack\"",[195,1003,409],{"class":201},[195,1005,1007,1010,1012,1014],{"class":197,"line":1006},56,[195,1008,1009],{"class":209},"      padding",[195,1011,325],{"class":201},[195,1013,328],{"class":209},[195,1015,409],{"class":201},[195,1017,1019,1022,1024,1027,1029,1032,1034,1036,1038,1041],{"class":197,"line":1018},57,[195,1020,1021],{"class":209},"      min-height",[195,1023,325],{"class":201},[195,1025,1026],{"class":209},"min",[195,1028,439],{"class":201},[195,1030,1031],{"class":209},"36",[195,1033,423],{"class":342},[195,1035,354],{"class":201},[195,1037,105],{"class":209},[195,1039,1040],{"class":342},"svh",[195,1042,462],{"class":201},[195,1044,1046],{"class":197,"line":1045},58,[195,1047,1048],{"class":201},"    }\n",[195,1050,1052,1054,1057,1060,1062,1065],{"class":197,"line":1051},59,[195,1053,907],{"class":209},[195,1055,1056],{"class":342}," >",[195,1058,1059],{"class":205}," *",[195,1061,319],{"class":201},[195,1063,1064],{"class":209},"grid-area",[195,1066,1067],{"class":201},": stack; }\n",[195,1069,1071,1073,1075,1077,1080,1082,1084,1086,1088,1090,1092,1095,1097,1100,1102,1104],{"class":197,"line":1070},60,[195,1072,942],{"class":209},[195,1074,508],{"class":205},[195,1076,319],{"class":201},[195,1078,1079],{"class":209},"height",[195,1081,325],{"class":201},[195,1083,105],{"class":209},[195,1085,535],{"class":342},[195,1087,331],{"class":201},[195,1089,949],{"class":209},[195,1091,325],{"class":201},[195,1093,1094],{"class":209},"auto",[195,1096,331],{"class":201},[195,1098,1099],{"class":209},"border-radius",[195,1101,325],{"class":201},[195,1103,328],{"class":209},[195,1105,360],{"class":201},[195,1107,1109,1112],{"class":197,"line":1108},61,[195,1110,1111],{"class":209},"    .hero__text",[195,1113,395],{"class":201},[195,1115,1117,1120,1122,1124],{"class":197,"line":1116},62,[195,1118,1119],{"class":209},"      z-index",[195,1121,325],{"class":201},[195,1123,442],{"class":209},[195,1125,409],{"class":201},[195,1127,1129,1132,1134,1136],{"class":197,"line":1128},63,[195,1130,1131],{"class":209},"      align-self",[195,1133,325],{"class":201},[195,1135,934],{"class":209},[195,1137,409],{"class":201},[195,1139,1141,1144,1146,1149,1151],{"class":197,"line":1140},64,[195,1142,1143],{"class":209},"      max-width",[195,1145,325],{"class":201},[195,1147,1148],{"class":209},"34",[195,1150,423],{"class":342},[195,1152,409],{"class":201},[195,1154,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1179,1181],{"class":197,"line":1155},65,[195,1157,1009],{"class":209},[195,1159,325],{"class":201},[195,1161,436],{"class":209},[195,1163,439],{"class":201},[195,1165,79],{"class":209},[195,1167,423],{"class":342},[195,1169,354],{"class":201},[195,1171,449],{"class":209},[195,1173,452],{"class":342},[195,1175,354],{"class":201},[195,1177,1178],{"class":209},"3.5",[195,1180,423],{"class":342},[195,1182,462],{"class":201},[195,1184,1186],{"class":197,"line":1185},66,[195,1187,1048],{"class":201},[195,1189,1191],{"class":197,"line":1190},67,[195,1192,1193],{"class":658},"    \u002F* Scrim: darkest behind the text, fading toward the image's right. *\u002F\n",[195,1195,1197,1200],{"class":197,"line":1196},68,[195,1198,1199],{"class":209},"    .hero::after",[195,1201,395],{"class":201},[195,1203,1205,1208,1210,1213],{"class":197,"line":1204},69,[195,1206,1207],{"class":209},"      content",[195,1209,325],{"class":201},[195,1211,1212],{"class":230},"\"\"",[195,1214,409],{"class":201},[195,1216,1218,1221],{"class":197,"line":1217},70,[195,1219,1220],{"class":209},"      grid-area",[195,1222,1223],{"class":201},": stack;\n",[195,1225,1227,1230,1232,1235,1237,1239,1242,1244,1247,1249,1252,1255,1258,1260,1263,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1297,1300,1302],{"class":197,"line":1226},71,[195,1228,1229],{"class":209},"      background",[195,1231,325],{"class":201},[195,1233,1234],{"class":209},"linear-gradient",[195,1236,439],{"class":201},[195,1238,86],{"class":209},[195,1240,1241],{"class":342},"deg",[195,1243,354],{"class":201},[195,1245,1246],{"class":209},"rgb",[195,1248,439],{"class":201},[195,1250,1251],{"class":209},"15",[195,1253,1254],{"class":209}," 23",[195,1256,1257],{"class":209}," 42",[195,1259,550],{"class":201},[195,1261,1262],{"class":209},"0.92",[195,1264,1265],{"class":201},") ",[195,1267,328],{"class":209},[195,1269,535],{"class":342},[195,1271,354],{"class":201},[195,1273,1246],{"class":209},[195,1275,439],{"class":201},[195,1277,1251],{"class":209},[195,1279,1254],{"class":209},[195,1281,1257],{"class":209},[195,1283,550],{"class":201},[195,1285,80],{"class":209},[195,1287,1265],{"class":201},[195,1289,725],{"class":209},[195,1291,535],{"class":342},[195,1293,354],{"class":201},[195,1295,1296],{"class":209},"transparent",[195,1298,1299],{"class":209}," 75",[195,1301,535],{"class":342},[195,1303,462],{"class":201},[195,1305,1307],{"class":197,"line":1306},72,[195,1308,1048],{"class":201},[195,1310,1312],{"class":197,"line":1311},73,[195,1313,494],{"class":201},[195,1315,1317,1320,1322],{"class":197,"line":1316},74,[195,1318,1319],{"class":201},"\u003C\u002F",[195,1321,308],{"class":205},[195,1323,213],{"class":201},[195,1325,1327,1329,1331],{"class":197,"line":1326},75,[195,1328,1319],{"class":201},[195,1330,241],{"class":205},[195,1332,213],{"class":201},[195,1334,1336,1338,1341],{"class":197,"line":1335},76,[195,1337,219],{"class":201},[195,1339,1340],{"class":205},"body",[195,1342,213],{"class":201},[195,1344,1346,1349,1352,1355,1357,1360],{"class":197,"line":1345},77,[195,1347,1348],{"class":201},"  \u003C",[195,1350,1351],{"class":205},"div",[195,1353,1354],{"class":209}," class",[195,1356,227],{"class":201},[195,1358,1359],{"class":230},"\"hero-slot\"",[195,1361,213],{"class":201},[195,1363,1365,1368,1371,1373,1375,1378,1381,1383,1386],{"class":197,"line":1364},78,[195,1366,1367],{"class":201},"    \u003C",[195,1369,1370],{"class":205},"section",[195,1372,1354],{"class":209},[195,1374,227],{"class":201},[195,1376,1377],{"class":230},"\"hero\"",[195,1379,1380],{"class":209}," aria-labelledby",[195,1382,227],{"class":201},[195,1384,1385],{"class":230},"\"hero-title\"",[195,1387,213],{"class":201},[195,1389,1391,1394,1396,1398,1400,1403],{"class":197,"line":1390},79,[195,1392,1393],{"class":201},"      \u003C",[195,1395,1351],{"class":205},[195,1397,1354],{"class":209},[195,1399,227],{"class":201},[195,1401,1402],{"class":230},"\"hero__media\"",[195,1404,213],{"class":201},[195,1406,1408,1411,1413,1416,1418,1421,1424,1426,1429,1432,1434,1437,1440,1442,1445],{"class":197,"line":1407},80,[195,1409,1410],{"class":201},"        \u003C",[195,1412,48],{"class":205},[195,1414,1415],{"class":209}," src",[195,1417,227],{"class":201},[195,1419,1420],{"class":230},"\"\u002Fimg\u002Fridge.jpg\"",[195,1422,1423],{"class":209}," alt",[195,1425,227],{"class":201},[195,1427,1428],{"class":230},"\"Hikers crossing a ridge at sunrise\"",[195,1430,1431],{"class":209}," width",[195,1433,227],{"class":201},[195,1435,1436],{"class":230},"\"1600\"",[195,1438,1439],{"class":209}," height",[195,1441,227],{"class":201},[195,1443,1444],{"class":230},"\"900\"",[195,1446,213],{"class":201},[195,1448,1450,1453,1455],{"class":197,"line":1449},81,[195,1451,1452],{"class":201},"      \u003C\u002F",[195,1454,1351],{"class":205},[195,1456,213],{"class":201},[195,1458,1460,1462,1464,1466,1468,1471],{"class":197,"line":1459},82,[195,1461,1393],{"class":201},[195,1463,1351],{"class":205},[195,1465,1354],{"class":209},[195,1467,227],{"class":201},[195,1469,1470],{"class":230},"\"hero__text\"",[195,1472,213],{"class":201},[195,1474,1476,1478,1480,1482,1484,1487,1490,1492,1494,1497,1499],{"class":197,"line":1475},83,[195,1477,1410],{"class":201},[195,1479,10],{"class":205},[195,1481,1354],{"class":209},[195,1483,227],{"class":201},[195,1485,1486],{"class":230},"\"hero__title\"",[195,1488,1489],{"class":209}," id",[195,1491,227],{"class":201},[195,1493,1385],{"class":230},[195,1495,1496],{"class":201},">Walk the ridge before the crowds arrive\u003C\u002F",[195,1498,10],{"class":205},[195,1500,213],{"class":201},[195,1502,1504,1506,1508,1510,1512,1515,1518,1520],{"class":197,"line":1503},84,[195,1505,1410],{"class":201},[195,1507,14],{"class":205},[195,1509,1354],{"class":209},[195,1511,227],{"class":201},[195,1513,1514],{"class":230},"\"hero__lede\"",[195,1516,1517],{"class":201},">Guided dawn hikes with small groups and no rush.\u003C\u002F",[195,1519,14],{"class":205},[195,1521,213],{"class":201},[195,1523,1525,1527,1529,1531,1533,1536,1539,1541,1544,1547,1549],{"class":197,"line":1524},85,[195,1526,1410],{"class":201},[195,1528,18],{"class":205},[195,1530,1354],{"class":209},[195,1532,227],{"class":201},[195,1534,1535],{"class":230},"\"hero__cta\"",[195,1537,1538],{"class":209}," href",[195,1540,227],{"class":201},[195,1542,1543],{"class":230},"\"\u002Fbook\u002F\"",[195,1545,1546],{"class":201},">Book a dawn hike\u003C\u002F",[195,1548,18],{"class":205},[195,1550,213],{"class":201},[195,1552,1554,1556,1558],{"class":197,"line":1553},86,[195,1555,1452],{"class":201},[195,1557,1351],{"class":205},[195,1559,213],{"class":201},[195,1561,1563,1566,1568],{"class":197,"line":1562},87,[195,1564,1565],{"class":201},"    \u003C\u002F",[195,1567,1370],{"class":205},[195,1569,213],{"class":201},[195,1571,1573,1576,1578],{"class":197,"line":1572},88,[195,1574,1575],{"class":201},"  \u003C\u002F",[195,1577,1351],{"class":205},[195,1579,213],{"class":201},[195,1581,1583,1585,1587],{"class":197,"line":1582},89,[195,1584,1319],{"class":201},[195,1586,1340],{"class":205},[195,1588,213],{"class":201},[195,1590,1592,1594,1596],{"class":197,"line":1591},90,[195,1593,1319],{"class":201},[195,1595,190],{"class":205},[195,1597,213],{"class":201},[14,1599,1600,1601,1604,1605,1608,1609,1612,1613,1616,1617,1621],{},"In the overlay layout all three layers — image, scrim and text — occupy the same grid area, named ",[173,1602,1603],{},"stack",", and paint in order: the image first, the scrim (",[173,1606,1607],{},"::after",") above it, and the text on top via ",[173,1610,1611],{},"z-index",". Stacking with a single grid area avoids absolute positioning, so the hero's height is still determined by its content and ",[173,1614,1615],{},"min-height",", not by guesses. The technique is developed in ",[18,1618,1620],{"href":1619},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking\u002F","Overlapping Elements With Grid Stacking",".",[29,1623,1625],{"id":1624},"the-key-technique-contrast-against-the-worst-pixel","The key technique: contrast against the worst pixel",[14,1627,1628],{},"Text on photography fails contrast in the brightest part of the image, not on average. A white headline over a mostly dark photo with a bright sky behind the first line fails exactly where it matters. The scrim guarantees a minimum darkness behind the text regardless of the image.",[45,1630,52,1633,52,1636,52,1639,52,1642,52,1645,52,1647,52,1650,52,1657,52,1661,52,1667,52,1670,52,1674],{"viewBox":1631,"role":48,"ariaLabel":1632,"xmlns":50,"style":51},"0 0 720 280","Contrast along a hero line: without a scrim, contrast dips below 4.5 over a bright area; with a gradient scrim it stays above 4.5 across the text",[54,1634,1635],{},"Contrast measured along the headline",[58,1637,1638],{},"A plot of text contrast ratio across the width of the text block. Without a scrim, contrast falls below the 4.5 to 1 threshold over a bright patch of sky. With a scrim darkest on the left, the curve stays above 4.5 across the whole text width.",[62,1640,1641],{"textAnchor":64,"x":65,"y":66,"style":67},"White text contrast across the text block",[197,1643],{"x1":135,"y1":75,"x2":1644,"y2":75,"stroke":78,"strokeWidth":79,"opacity":80},"660",[197,1646],{"x1":135,"y1":73,"x2":135,"y2":75,"stroke":78,"strokeWidth":79,"opacity":80},[197,1648],{"x1":135,"y1":74,"x2":1644,"y2":74,"stroke":78,"strokeWidth":79,"strokeDashArray":1649,"opacity":112},[87,449],[62,1651,1656],{"textAnchor":1652,"x":1653,"y":1654,"style":1655},"end","72","154","text-anchor:end;fill:currentColor;font:12px ui-monospace,monospace","4.5",[1658,1659],"path",{"d":1660,"fill":77,"stroke":78,"strokeWidth":95,"opacity":80},"M80 110 C160 100 220 200 300 196 C380 190 440 110 660 100",[62,1662,1666],{"textAnchor":64,"x":1663,"y":1664,"style":1665},"300","218","text-anchor:middle;fill:currentColor;font:12px sans-serif","no scrim: fails over bright sky",[1658,1668],{"d":1669,"fill":77,"stroke":88,"strokeWidth":449},"M80 70 C200 70 300 100 420 120 C500 130 580 136 660 140",[62,1671,1673],{"textAnchor":64,"x":1672,"y":93,"style":1665},"500","with scrim: stays above 4.5",[62,1675,1678],{"textAnchor":64,"x":1676,"y":1677,"style":1665},"370","258","horizontal position across the text →",[14,1680,1681],{},"The gradient in the example is darkest at the left edge, where the text starts, and transparent by three-quarters of the way across, so most of the photograph stays visible. Check the result against the lightest image the hero will realistically use; for heroes whose images are chosen by editors, test with a deliberately bright image. The contrast requirement — 4.5:1 for normal text and 3:1 for large text, per WCAG 1.4.3 — applies to the call-to-action button's label too, which is why it uses dark text on a bright yellow fill rather than relying on the scrim.",[29,1683,1685],{"id":1684},"loading-performance","Loading performance",[14,1687,1688],{},"The hero image is usually the largest element in the first screen, which makes it the page's Largest Contentful Paint candidate — the Core Web Vitals metric for how quickly the main content appears. Three decisions in the markup affect it directly.",[14,1690,1691,1695,1696,1699,1700,1703],{},[1692,1693,1694],"strong",{},"Do not lazy-load it."," ",[173,1697,1698],{},"loading=\"lazy\""," on an above-the-fold image delays its request until layout has confirmed it is in view, which postpones the largest paint. Leave the hero image eager, and consider ",[173,1701,1702],{},"fetchpriority=\"high\""," so the browser requests it ahead of less important resources.",[14,1705,1706,1709,1710,1713,1714,1716,1717,1720,1721,1723],{},[1692,1707,1708],{},"Serve sizes that match the layouts."," The same hero is 100% wide stacked, 50% wide split and 100% wide overlaid. A ",[173,1711,1712],{},"sizes"," attribute describing those widths — expressed against the viewport, because ",[173,1715,1712],{}," cannot see container widths — lets the browser choose an appropriate file from ",[173,1718,1719],{},"srcset"," for each placement. Where a component appears in placements the ",[173,1722,1712],{}," value cannot predict, err toward slightly larger files rather than blurry ones.",[14,1725,1726,1695,1729,1732,1733,1735,1736,1738,1739,1741],{},[1692,1727,1728],{},"Reserve the space.",[173,1730,1731],{},"width"," and ",[173,1734,1079],{}," attributes plus ",[173,1737,949],{}," in CSS mean the hero's box is correct before the image arrives, so nothing below it shifts. In the overlay layout, where the image fills a ",[173,1740,1615],{}," box, the height is fixed by CSS and the attributes still provide the intrinsic ratio for the stacked and split layouts.",[29,1743,1745],{"id":1744},"motion-and-the-hero","Motion and the hero",[14,1747,1748,1749,1752,1753,1732,1757,1621],{},"Heroes attract entrance animations: the headline sliding in, the image slowly zooming. Keep them restrained. A large headline moving across the screen on load is precisely the kind of motion that affects people with vestibular disorders, and a slowly zooming background image is a looping animation that WCAG 2.2.2 asks you to make pausable if it lasts more than five seconds. A short fade of the text and a single, subtle scale of the image are enough, gated by ",[173,1750,1751],{},"prefers-reduced-motion","; the patterns are in ",[18,1754,1756],{"href":1755},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations\u002F","Scroll-Triggered Reveal Animations",[18,1758,1760],{"href":1759},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns\u002F","Vestibular-Safe Animation Patterns",[14,1762,1763,1764,1767,1768,1770,1771,1774,1775,1621],{},"The hero's height also interacts with mobile browsers. ",[173,1765,1766],{},"min-height: min(36rem, 100svh)"," caps the overlay hero at the small viewport height, so on a phone in landscape its call to action stays visible without scrolling. The reasoning behind ",[173,1769,1040],{}," over ",[173,1772,1773],{},"vh"," is covered in ",[18,1776,1778],{"href":1777},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units\u002F","dvh, svh and lvh",[29,1780,1782],{"id":1781},"variation-text-below-in-the-overlay-layout-on-short-containers","Variation: text below in the overlay layout on short containers",[14,1784,1785],{},"Very wide but short placements — a banner strip across a dashboard — have room for the overlay layout horizontally but not enough height for text over the image. A size container can query height as well as width to choose the split layout instead.",[186,1787,1791],{"className":1788,"code":1789,"language":1790,"meta":191,"style":191},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".hero-slot {\n  container: hero \u002F size;\n  block-size: var(--hero-height, auto);\n}\n\n@container hero (width >= 64rem) and (height \u003C 20rem) {\n  .hero { grid-template-areas: none; grid-template-columns: 2fr 3fr; }\n  .hero > * { grid-area: auto; }\n  .hero::after { content: none; }\n}\n","css",[173,1792,1793,1800,1808,1829,1834,1838,1846,1877,1895,1911],{"__ignoreMap":191},[195,1794,1795,1798],{"class":197,"line":198},[195,1796,1797],{"class":209},".hero-slot",[195,1799,395],{"class":201},[195,1801,1802,1805],{"class":197,"line":216},[195,1803,1804],{"class":209},"  container",[195,1806,1807],{"class":201},": hero \u002F size;\n",[195,1809,1810,1813,1815,1818,1820,1823,1825,1827],{"class":197,"line":236},[195,1811,1812],{"class":209},"  block-size",[195,1814,325],{"class":201},[195,1816,1817],{"class":209},"var",[195,1819,439],{"class":201},[195,1821,1822],{"class":639},"--hero-height",[195,1824,354],{"class":201},[195,1826,1094],{"class":209},[195,1828,462],{"class":201},[195,1830,1831],{"class":197,"line":246},[195,1832,1833],{"class":201},"}\n",[195,1835,1836],{"class":197,"line":264},[195,1837,367],{"emptyLinePlaceholder":366},[195,1839,1840,1843],{"class":197,"line":289},[195,1841,1842],{"class":342},"@container",[195,1844,1845],{"class":201}," hero (width >= 64rem) and (height \u003C 20rem) {\n",[195,1847,1848,1850,1852,1855,1857,1859,1861,1863,1865,1868,1870,1873,1875],{"class":197,"line":303},[195,1849,392],{"class":209},[195,1851,319],{"class":201},[195,1853,1854],{"class":209},"grid-template-areas",[195,1856,325],{"class":201},[195,1858,77],{"class":209},[195,1860,331],{"class":201},[195,1862,912],{"class":209},[195,1864,325],{"class":201},[195,1866,1867],{"class":209},"2",[195,1869,919],{"class":342},[195,1871,1872],{"class":209}," 3",[195,1874,919],{"class":342},[195,1876,360],{"class":201},[195,1878,1879,1881,1883,1885,1887,1889,1891,1893],{"class":197,"line":313},[195,1880,392],{"class":209},[195,1882,1056],{"class":342},[195,1884,1059],{"class":205},[195,1886,319],{"class":201},[195,1888,1064],{"class":209},[195,1890,325],{"class":201},[195,1892,1094],{"class":209},[195,1894,360],{"class":201},[195,1896,1897,1900,1902,1905,1907,1909],{"class":197,"line":363},[195,1898,1899],{"class":209},"  .hero::after",[195,1901,319],{"class":201},[195,1903,1904],{"class":209},"content",[195,1906,325],{"class":201},[195,1908,77],{"class":209},[195,1910,360],{"class":201},[195,1912,1913],{"class":197,"line":370},[195,1914,1833],{"class":201},[14,1916,1917,1918,1920],{},"Size containment requires the slot to have an explicit block size, which is why this variation reads it from a custom property that each placement sets. For most heroes, inline-size containment and a ",[173,1919,1615],{}," are simpler; reach for size containment only when placements genuinely vary in height.",[29,1922,1924],{"id":1923},"browser-support","Browser support",[14,1926,1927,1928,1930,1931,1933,1934,1937],{},"Container queries and container query units are supported in Chrome and Edge 105+, Firefox 110+ and Safari 16+. ",[173,1929,1040],{}," is supported in Chrome and Edge 108+, Firefox 101+ and Safari 15.4+. ",[173,1932,949],{}," is supported in Chrome and Edge 88+, Firefox 89+ and Safari 15+. ",[173,1935,1936],{},"text-wrap: balance"," is supported in Chrome and Edge 114+, Firefox 121+ and Safari 17.5+.",[29,1939,1941],{"id":1940},"faq","FAQ",[14,1943,1944,1947],{},[1692,1945,1946],{},"Should a hero use a container query or a media query?","\nA container query, if the hero is a reusable component. Landing pages place heroes full width, but the same component also appears in narrower contexts such as a campaign column, a modal or a CMS preview pane. A container query rearranges it for the space it actually has.",[14,1949,1950,1953],{},[1692,1951,1952],{},"How do I keep text readable over a hero image?","\nPlace a gradient scrim between the image and the text, darkest behind the text, so contrast meets 4.5:1 regardless of the photo. Check contrast against the lightest part of the image under the text, not the average.",[14,1955,1956,1959,1960,176,1962,1964,1965,1967],{},[1692,1957,1958],{},"What height should a hero be on mobile?","\nTall enough for its content, and at most the small viewport height so its call to action is visible on load. ",[173,1961,1615],{},[173,1963,1040],{}," achieves that; avoid fixed heights in ",[173,1966,1773],{},", which on mobile include the space behind the browser toolbar.",[14,1969,1970,1980,1981,1983,1984,1986],{},[1692,1971,1972,1973,1976,1977,1979],{},"Should the hero image be a ",[173,1974,1975],{},"background-image"," or an ",[173,1978,48],{}," element?","\nUse an ",[173,1982,48],{}," element with ",[173,1985,179],{}," when the image is content or needs responsive sources, alt text and lazy-loading control. Use a CSS background only for purely decorative images.",[29,1988,1990],{"id":1989},"related","Related",[1992,1993,1994,2000,2007,2014],"ul",{},[1995,1996,1997,1999],"li",{},[18,1998,21],{"href":20}," — the parent guide.",[1995,2001,2002,2006],{},[18,2003,2005],{"href":2004},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position\u002F","object-fit and object-position in Practice"," — cropping the hero image well.",[1995,2008,2009,2013],{},[18,2010,2012],{"href":2011},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts\u002F","Full-Bleed Sections in Constrained Layouts"," — heroes that break out of a reading column.",[1995,2015,2016,2020],{},[18,2017,2019],{"href":2018},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations\u002F","Clip-Path Reveal Animations"," — a restrained hero entrance.",[308,2022,2023],{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":191,"searchDepth":216,"depth":216,"links":2025},[2026,2027,2028,2029,2030,2031,2032,2033,2034],{"id":31,"depth":216,"text":32},{"id":167,"depth":216,"text":168},{"id":1624,"depth":216,"text":1625},{"id":1684,"depth":216,"text":1685},{"id":1744,"depth":216,"text":1745},{"id":1781,"depth":216,"text":1782},{"id":1923,"depth":216,"text":1924},{"id":1940,"depth":216,"text":1941},{"id":1989,"depth":216,"text":1990},"Hero banners that rearrange text and media by their own width: stacked, split and overlay layouts, readable text over images, and heights that suit mobile.","md",{"pageTitle":5,"datePublished":2038,"dateModified":2038,"faq":2039},"2026-09-18",[2040,2042,2044,2046],{"q":1946,"a":2041},"A container query, if the hero is a reusable component. Landing pages place heroes full width, but the same component also appears in narrower contexts such as a campaign column, a modal or a CMS preview pane. A container query rearranges it for the space it actually has.",{"q":1952,"a":2043},"Place a gradient scrim between the image and the text, darkest behind the text, so contrast meets 4.5:1 regardless of the photo. Check contrast against the lightest part of the image under the text, not the average.",{"q":1958,"a":2045},"Tall enough for its content, and at most the small viewport height so its call to action is visible on load. min-height with svh achieves that; avoid fixed heights in vh, which on mobile include the space behind the browser toolbar.",{"q":2047,"a":2048},"Should the hero image be a background-image or an img element?","Use an img element with object-fit: cover when the image is content or needs responsive sources, alt text and lazy-loading control. Use a CSS background only for purely decorative images.","\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries",{"title":5,"description":2035},"mastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries\u002Findex","8tJsoP-1pZ1GwlU9jTLbRMrBXTfm5nNkugwhBc7SEO4",[2054,2057,2060,2063,2066,2069,2072,2075,2078,2081,2084,2087,2090,2093,2096,2099,2102,2105,2108,2111,2114,2117,2120,2123,2126,2129,2132,2135,2138,2141,2144,2147,2150,2153,2156,2159,2162,2165,2168,2171,2174,2177,2180,2183,2186,2189,2192,2195,2198,2201,2204,2207,2210,2213,2216,2219,2222,2225,2228,2231,2234,2237,2240,2243,2246,2249,2252,2255,2258,2261,2264,2267,2270,2273,2276,2279,2282,2285,2288,2291,2294,2297,2300,2303,2306,2309,2312,2315,2318,2321,2324,2327,2330,2333,2335,2338,2341,2344,2347,2350,2353,2356,2359,2362,2365,2368,2371,2374,2377,2380,2383,2386,2389,2392,2395,2398,2401,2404,2407,2410,2413,2416,2419,2422,2425,2428,2431,2434,2437,2440,2443,2446,2449,2452,2455,2458,2461,2464,2467,2470,2473,2475,2478,2481,2484,2487,2490,2493,2496,2499,2502,2505,2508,2511,2514,2517,2520,2523,2526,2529,2532,2535,2538,2541,2544,2547,2550,2551,2554,2557,2560,2563,2566,2569,2572,2575,2578,2581,2584,2587,2590,2593,2596,2599,2602,2605,2608],{"path":2055,"title":2056},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":2058,"title":2059},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":2061,"title":2062},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":2064,"title":2065},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":2067,"title":2068},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fpause-controls-for-looping-animations","Pause Controls for Looping CSS Animations: Meeting WCAG 2.2.2",{"path":2070,"title":2071},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":2073,"title":2074},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":2076,"title":2077},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":2079,"title":2080},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":2082,"title":2083},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":2085,"title":2086},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fanimated-gradient-borders-with-property","Animated Gradient Borders With @property: A Spinning Highlight Without Extra Elements",{"path":2088,"title":2089},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"path":2091,"title":2092},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":2094,"title":2095},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges","Fading Edges With mask-image: Soft Boundaries That Work on Any Background",{"path":2097,"title":2098},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon","Morphing Shapes With clip-path: polygon(): Point-Matched Transitions",{"path":2100,"title":2101},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":2103,"title":2104},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fcolor-mix-hover-states","Hover and Active States With color-mix(): One Token, Every Shade",{"path":2106,"title":2107},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":2109,"title":2110},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Flight-dark-function-for-themes","Light and Dark Themes With light-dark(): One Declaration per Colour",{"path":2112,"title":2113},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":2115,"title":2116},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":2118,"title":2119},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":2121,"title":2122},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":2124,"title":2125},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":2127,"title":2128},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":2130,"title":2131},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":2133,"title":2134},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":2136,"title":2137},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":2139,"title":2140},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":2142,"title":2143},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":2145,"title":2146},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":2148,"title":2149},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":2151,"title":2152},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":2154,"title":2155},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":2157,"title":2158},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":2160,"title":2161},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":2163,"title":2164},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":2166,"title":2167},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":2169,"title":2170},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":2172,"title":2173},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":2175,"title":2176},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":2178,"title":2179},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":2181,"title":2182},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":2184,"title":2185},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":2187,"title":2188},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":2190,"title":2191},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":2193,"title":2194},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Finterpolate-size-for-height-auto-animation","Animating to height: auto With interpolate-size and calc-size()",{"path":2196,"title":2197},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":2199,"title":2200},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":2202,"title":2203},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":2205,"title":2206},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":2208,"title":2209},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":2211,"title":2212},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs","Spring and Bounce Easing With linear(): Physical Motion Without JavaScript",{"path":2214,"title":2215},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fsteps-easing-for-sprite-animations","steps() Easing: Sprite Sheets, Typewriters and Other Frame-by-Frame Effects",{"path":2217,"title":2218},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":2220,"title":2221},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":2223,"title":2224},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":2226,"title":2227},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":2229,"title":2230},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"path":2232,"title":2233},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":2235,"title":2236},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":2238,"title":2239},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":2241,"title":2242},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2244,"title":2245},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":2247,"title":2248},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-fill-mode-explained","animation-fill-mode: What an Animation Applies Before and After It Runs",{"path":2250,"title":2251},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2253,"title":2254},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2256,"title":2257},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":2259,"title":2260},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":2262,"title":2263},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2265,"title":2266},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":2268,"title":2269},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2271,"title":2272},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":2274,"title":2275},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":2277,"title":2278},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":2280,"title":2281},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2283,"title":2284},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2286,"title":2287},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":2289,"title":2290},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":2292,"title":2293},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2295,"title":2296},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2298,"title":2299},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":2301,"title":2302},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2304,"title":2305},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2307,"title":2308},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":2310,"title":2311},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":2313,"title":2314},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":2316,"title":2317},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2319,"title":2320},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":2322,"title":2323},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":2325,"title":2326},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":2328,"title":2329},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":2331,"title":2332},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":346,"title":2334},"Modern CSS Layouts & Micro-Interactions",{"path":2336,"title":2337},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2339,"title":2340},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2342,"title":2343},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":2345,"title":2346},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2348,"title":2349},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2351,"title":2352},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":2354,"title":2355},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":2357,"title":2358},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":2360,"title":2361},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2363,"title":2364},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2366,"title":2367},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2369,"title":2370},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":2372,"title":2373},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":2375,"title":2376},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-queries-inside-css-nesting","Container Queries Inside CSS Nesting: Keeping Responses Next to the Styles They Change",{"path":2378,"title":2379},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":2381,"title":2382},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":2384,"title":2385},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2387,"title":2388},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2390,"title":2391},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"path":2393,"title":2394},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":2396,"title":2397},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2399,"title":2400},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2402,"title":2403},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2405,"title":2406},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":2408,"title":2409},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":2411,"title":2412},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"path":2414,"title":2415},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":2417,"title":2418},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2420,"title":2421},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fmasonry-style-layouts-with-grid","Masonry-Style Layouts With the CSS That Ships Today",{"path":2423,"title":2424},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking","Overlapping Elements With Grid Stacking: Layers Without position: absolute",{"path":2426,"title":2427},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2429,"title":2430},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method","Centering in CSS: Every Modern Method and When Each One Breaks",{"path":2432,"title":2433},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width","flex-basis vs width: Which Size a Flex Item Actually Starts From",{"path":2435,"title":2436},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2438,"title":2439},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2441,"title":2442},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2444,"title":2445},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2447,"title":2448},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid","Sticky Footer With Flexbox or Grid: Pinning the Footer on Short Pages",{"path":2450,"title":2451},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":2453,"title":2454},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2456,"title":2457},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-line-height-and-measure","Fluid Line Height and Measure: Keeping Text Readable as It Scales",{"path":2459,"title":2460},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":2462,"title":2463},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2465,"title":2466},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2468,"title":2469},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2471,"title":2472},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ftext-wrap-balance-and-pretty","text-wrap: balance and pretty: Better Line Breaks Without Manual Breaks",{"path":2474,"title":26},"\u002Fmastering-container-queries-responsive-layouts",{"path":2476,"title":2477},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2479,"title":2480},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fcontent-visibility-and-contain-intrinsic-size","content-visibility and contain-intrinsic-size: Rendering Only What Is Near the Screen",{"path":2482,"title":2483},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2485,"title":2486},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Flayout-widths-with-min-max-clamp","Layout Widths With min(), max() and clamp(): Sizing Without Breakpoints",{"path":2488,"title":2489},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2491,"title":2492},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2494,"title":2495},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2497,"title":2498},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2500,"title":2501},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2503,"title":2504},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2506,"title":2507},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2509,"title":2510},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Frevert-layer-and-revert-keywords","initial, inherit, unset, revert and revert-layer: Undoing Styles Correctly",{"path":2512,"title":2513},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2515,"title":2516},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has","Content-Aware Card Layouts With :has(): One Component, Many Shapes",{"path":2518,"title":2519},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2521,"title":2522},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fform-validation-layouts-with-has","Form Validation Layouts With :has(): Styling Groups From Field State",{"path":2524,"title":2525},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-selector-performance",":has() Selector Performance: What Is Cheap, What Is Not, and How to Measure",{"path":2527,"title":2528},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-vs-container-style-queries",":has() vs Container Style Queries: Discovered State and Published State",{"path":2530,"title":2531},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2533,"title":2534},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fquantity-queries-with-has","Quantity Queries With :has(): Layouts That Respond to How Many Items There Are",{"path":2536,"title":2537},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":2539,"title":2540},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2542,"title":2543},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2545,"title":2546},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2548,"title":2549},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2049,"title":5},{"path":2552,"title":2553},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2555,"title":2556},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2558,"title":2559},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2561,"title":2562},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2564,"title":2565},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fhorizontal-scrolling-card-rows","Horizontal Scrolling Card Rows: Swipeable Lists That Stay in Their Lane",{"path":2567,"title":2568},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2570,"title":2571},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Foverscroll-behavior-for-nested-scrolling","overscroll-behavior: Taming Nested Scrolling, Pull-to-Refresh and Back-Swipe",{"path":2573,"title":2574},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fscroll-margin-and-scroll-padding-for-sticky-headers","scroll-margin and scroll-padding: Keeping Targets Clear of Sticky Headers",{"path":2576,"title":2577},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2579,"title":2580},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":2582,"title":2583},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2585,"title":2586},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":2588,"title":2589},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2591,"title":2592},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",{"path":2594,"title":2595},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units","dvh, svh and lvh: Choosing the Right Mobile Viewport Unit",{"path":2597,"title":2598},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"path":2600,"title":2601},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2603,"title":2604},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens","Safe Area Insets: Designing Around Notches, Corners and Home Indicators",{"path":2606,"title":2607},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units","Viewport Units vs Container Units: Choosing the Right Reference Box",{"path":2609,"title":2610},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2612,"caption":2613,"height":2614,"resizable":366,"html":2615,"css":2616},"Hero that stacks, splits or overlays by its own width","Drag the frame: below 40rem the image stacks above the text, between 40 and 64rem they split, and above 64rem the text overlays the image on a scrim.",460,"\n\u003Cdiv class=\"hero-slot\">\n  \u003Csection class=\"hero\" aria-labelledby=\"hero-title\">\n    \u003Cdiv class=\"hero__media\">\u003Cimg src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 160 90'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'\u002F%3E%3Cstop offset='1' stop-color='%23f97316'\u002F%3E%3C\u002FlinearGradient%3E%3C\u002Fdefs%3E%3Crect width='160' height='90' fill='url(%23s)'\u002F%3E%3Cpath d='M0 70 L40 40 L70 60 L110 25 L160 65 V90 H0 Z' fill='%23334155'\u002F%3E%3C\u002Fsvg%3E\" alt=\"Stylised ridge at sunrise\" width=\"1600\" height=\"900\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"hero__text\">\n      \u003Ch1 class=\"hero__title\" id=\"hero-title\">Walk the ridge before the crowds arrive\u003C\u002Fh1>\n      \u003Cp class=\"hero__lede\">Guided dawn hikes with small groups and no rush.\u003C\u002Fp>\n      \u003Ca class=\"hero__cta\" href=\"#\">Book a dawn hike\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Fdiv>","\nbody { display: block; padding: 0; }\n.hero-slot { container: hero \u002F inline-size; }\n.hero { display: grid; gap: 1.25rem; padding: clamp(1rem, 4cqi, 2.5rem); background: #0f172a; color: #f8fafc; }\n.hero__media img { display: block; width: 100%; aspect-ratio: 16 \u002F 9; object-fit: cover; border-radius: 12px; }\n.hero__title { margin: 0; font-size: clamp(1.4rem, 0.8rem + 3.5cqi, 2.6rem); line-height: 1.1; text-wrap: balance; }\n.hero__lede { margin: 0.75rem 0 1.25rem; max-width: 45ch; color: #cbd5e1; }\n.hero__cta { display: inline-block; padding: 0.7rem 1.2rem; border-radius: 8px; background: #facc15; color: #1c1917; font-weight: 700; text-decoration: none; }\n.hero__cta:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; }\n@container hero (40rem \u003C= width \u003C 64rem) {\n  .hero { grid-template-columns: 1fr 1fr; align-items: center; }\n  .hero__media img { aspect-ratio: 4 \u002F 5; max-height: 20rem; }\n}\n@container hero (width >= 64rem) {\n  .hero { grid-template-areas: \"stack\"; padding: 0; min-height: 22rem; }\n  .hero > * { grid-area: stack; }\n  .hero__media img { height: 100%; aspect-ratio: auto; border-radius: 0; }\n  .hero__text { z-index: 1; align-self: center; max-width: 30rem; padding: clamp(1.5rem, 4cqi, 3rem); }\n  .hero::after { content: \"\"; grid-area: stack; background: linear-gradient(90deg, rgb(15 23 42 \u002F 0.92) 0%, rgb(15 23 42 \u002F 0.6) 45%, transparent 75%); }\n}",1789717749752]