*{box-sizing:border-box}
body{margin:0;background:#fff;color:#111;font-family:’Courier New’,monospace}
nav{background:#262626;display:flex;justify-content:flex-end;padding:0 4%;gap:0}

nav a{color:white;
font:28px Georgia,serif;
text-decoration:none;
padding:9px 22px}

nav a:hover,
nav a.active{color:#c62828}

main{padding:22px 2%;
max-width:1178px;
margin:auto}

h1{font-size:22px;
margin:0 0 4px}

p{margin:2px 0;font-size:14px}

.hero,.step-image{background:#dbdbdb;border:1px solid #000}
.hero{height:600px;margin:20px 0 18px}

.button{display:inline-block;
background:#c62828;
color:#000;
text-decoration:none;
padding:12px 16px;
border:1px solid #000;
font-size:17px;
font-weight:bold}

.button.secondary{background:#dbdbdb}

.supply-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:8px 18px;
margin-top:32px}

.supply-grid div{background:#dbdbdb;
padding:20px 12%;
min-height:60px}

.step-list{display:grid;
gap:6px;margin-top:30px}

.step-list
a{display:block;
background:#dbdbdb;
color:#000;text-decoration:none;
padding:14px 4%;
font-size:16px}

.step-list
a:hover{background:#cccccc}

.step-image{height:200px;
margin:14px 0}

.instructions{margin-top:12px;
font-size:14px}

.instructions
ol{padding-left:24px;
line-height:1.6;
color:#000}

.actions{display:flex;
justify-content:space-between;
margin:35px 4% 0}
{nav{justify-content:center;padding:0}nav
a{font-size:18px;padding:12px 9px}

.supply-grid{grid-template-columns:1fr}
.hero{height:220px}}