.mods__hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.mods__hero h1 { max-width: 19ch; }
.mods__drawing { min-width: 0; }
.mods__drawing .apfig { margin: 0; padding: 14px; border-radius: 8px; background: #fff; color: #343c42; }
.mods__drawing .apfig img { display: block; width: 100%; height: auto; }
.mods__drawing .apfig figcaption { color: #343c42; }
.mods__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.mods__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mods__ways article { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--s300); border-radius: 8px; }
.mods__step { color: var(--muted); font-family: var(--mono); }
.mods__cards { margin-top: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mods__spec { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(24px, 5vw, 72px); }
.mods__spec li { margin-bottom: 16px; }
.mods__spec aside { align-self: start; padding: 24px; border-left: 3px solid var(--accent); background: var(--s100); }
.mods__table { overflow-x: auto; }
.mods__table table { width: 100%; border-collapse: collapse; text-align: left; }
.mods__table th, .mods__table td { padding: 16px; vertical-align: top; border-bottom: 1px solid var(--s300); }
.mods__table thead { background: var(--s100); }
.mods__end { padding: 56px 0; }
.mods__end p { max-width: 68ch; }
@media (max-width: 1000px) { .mods__hero, .mods__spec { grid-template-columns: minmax(0, 1fr); } .mods__drawing { max-width: 680px; } .mods__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mods__ways, .mods__cards { grid-template-columns: minmax(0, 1fr); } .mods__table th, .mods__table td { padding: 10px; font-size: .88rem; } .mods__hero .btn { width: 100%; } }