*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#f5f5f5;color:#222;line-height:1.7}main{width:min(900px,calc(100% - 32px));margin:40px auto}section{background:#fff;border:1px solid #ddd;border-radius:10px;padding:20px;margin:18px 0}.relative-css{border:2px solid;padding:12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid img{width:100%;max-width:300px;display:block;border:1px solid #ccc}pre{background:#eee;padding:12px;overflow:auto}@media(max-width:640px){.grid{grid-template-columns:1fr}}