.er { padding-block: 10px 60px; }
.er-frame { border: 14px solid #cfd4da; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #e9ecef, 0 12px 30px rgb(46 42 43 / .12); padding: 34px clamp(18px, 4vw, 44px) 40px; position: relative; margin-block-start: 10px; }
.er-frame::after { content: ""; position: absolute; inset-block-end: -30px; inset-inline-start: 50%; translate: -50% 0; inline-size: 60%; block-size: 14px; background: #b9c0c8; border-radius: 0 0 10px 10px; }
.er-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.er-head h1 { font-family: var(--f-hand); font-size: clamp(54px, 7vw, 90px); line-height: .9; color: var(--sky); }
.er-head h1 s { color: var(--coral); text-decoration-thickness: 4px; }
.er-head p { font-size: 18px; color: var(--ink-soft); max-inline-size: 560px; margin-block-start: 8px; }
.er-eraser { inline-size: 130px; block-size: 64px; border-radius: 12px; background: linear-gradient(#222 0 30%, var(--coral) 30%); box-shadow: 0 6px 0 #a53c39; rotate: -12deg; }
.er-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 16px; margin-block-start: 30px; }
.er-route { border: 3px solid var(--mk); border-radius: 18px 4px 18px 4px; padding: 18px; }
.er-route h2 { font-family: var(--f-hand); font-size: 32px; color: var(--mk); line-height: 1; margin-block-end: 8px; }
.er-route p { font-size: 15px; }
.er-fix { margin-block-start: 60px; }
.er-fix h2 { font-size: 26px; text-align: center; margin-block-end: 18px; }
.er-fix ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.er-card { perspective: 900px; min-block-size: 190px; }
.er-card div { position: relative; block-size: 100%; min-block-size: 190px; transition: transform .5s; transform-style: preserve-3d; }
.er-card:hover div, .er-card:focus-within div { transform: rotateY(180deg); }
.er-card b, .er-card span { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; padding: 18px; display: grid; place-items: center; text-align: center; }
.er-card b { background: var(--ink); color: #fff; font-family: var(--f-head); font-size: 18px; }
.er-card span { background: var(--sun); transform: rotateY(180deg); font-size: 15px; }
.er-card button { all: unset; position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.er-card button:focus-visible { outline: 3px solid var(--sky); border-radius: 16px; }
.er-note { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; margin-block-start: 34px; background: var(--paper); border-radius: 16px; padding: 16px 20px; }
.er-note img { inline-size: 70px; }
@media (max-width: 900px) { .er-fix ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .er-fix ul { grid-template-columns: 1fr; } .er-head { grid-template-columns: 1fr; } .er-eraser { display: none; } .er-frame { border-width: 8px; } }