.os-features { padding: 100px var(--os-pad); display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); color: #11110f; background: #f4f1e8; border-bottom: 1px solid #11110f; }
.os-features__intro { padding-right: 30px; }
.os-features__intro h2 { margin: 0; font-size: clamp(48px, 5.7vw, 88px); font-weight: 900; line-height: .84; letter-spacing: -.07em; }
.os-features__intro h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.os-feature { min-height: 340px; padding: 0 26px; display: flex; flex-direction: column; border-left: 1px solid rgba(17,17,15,.2); }
.os-feature > span { font-size: 12px; font-weight: 800; }
.os-feature h3 { margin: auto 0 10px; font-size: 16px; text-transform: uppercase; }
.os-feature p { margin: 0; color: #65635d; font-size: 14px; line-height: 1.55; }
.os-feature__icon { width: 106px; height: 106px; margin: 36px auto 0; position: relative; }
.os-feature__icon--spring { border: 12px solid #1647ff; border-radius: 50%; box-shadow: inset 0 0 0 11px #f4f1e8, inset 0 0 0 15px #11110f; }
.os-feature__icon--weave { border-radius: 50%; background: repeating-linear-gradient(45deg, #ff5c35 0 5px, transparent 5px 12px), repeating-linear-gradient(-45deg, #1647ff 0 5px, transparent 5px 12px); }
.os-feature__icon--tread { border: 3px solid #11110f; background: repeating-linear-gradient(0deg, #11110f 0 9px, transparent 9px 17px); transform: rotate(45deg); }
@media (max-width: 1100px) { .os-features { grid-template-columns: 1fr 1fr; gap: 58px 0; } }
@media (max-width: 600px) { .os-features { grid-template-columns: 1fr; gap: 48px; } .os-feature { min-height: 270px; padding: 28px 0 0; border-top: 1px solid rgba(17,17,15,.2); border-left: 0; } .os-feature__icon { margin-top: 18px; } }