/* Original document illustrations and card styling from the dalter.ru home page. */
.guide .guide-documents{--sunken:#eeefec;--line-2:rgba(0,0,0,.14);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;list-style:none;margin:28px 0;padding:0}
.guide-documents .doc{position:relative;min-width:0;min-height:250px;padding:14px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line-2);border-radius:14px;background:#fff;overflow:hidden;transition:transform .2s,box-shadow .2s}
.guide-documents .doc:hover{transform:translateY(-4px);box-shadow:0 20px 36px -26px rgba(20,22,20,.3)}
.guide-documents .doc::after{content:"";position:absolute;top:0;right:0;width:28px;height:28px;background:linear-gradient(225deg,var(--sunken) 50%,var(--line-2) 50%,var(--line-2) calc(50% + 1px),transparent calc(50% + 1px));border-bottom-left-radius:8px}
.guide-documents .doc-code{font-size:15px;font-weight:750;line-height:20px;color:var(--accent);align-self:flex-start;padding:4px 0}
.guide-documents .doc h3{font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-top:6px;min-height:2.5em}
.guide-documents .doc-visual{display:grid;place-items:center;flex:1;min-height:76px;padding-block:10px;color:var(--accent)}
.guide-documents .doc-visual svg{display:block;width:56px;height:56px;max-width:100%}
.guide-documents .doc-lines{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.guide-documents .doc-lines i{height:6px;border-radius:3px;background:var(--sunken);display:block}
.guide-documents .doc-lines i:nth-child(2){width:84%}
.guide-documents .doc-lines i:nth-child(3){width:66%}
.guide-documents .doc-lines i:nth-child(4){width:90%}
@media(max-width:1000px){.guide .guide-documents{left:auto;transform:none;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.guide .guide-documents{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.guide-documents .doc{padding:16px;min-height:250px}.guide-documents .doc h3{font-size:17px}.guide-documents .doc-visual svg{width:60px;height:60px}}
@media(max-width:350px){.guide .guide-documents{grid-template-columns:minmax(0,1fr)}.guide-documents .doc{min-height:250px;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.guide-documents .doc{transition:none}.guide-documents .doc:hover{transform:none}}
@media print{.guide .guide-documents{left:auto;transform:none;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.guide-documents .doc{min-height:220px;padding:12px;break-inside:avoid}.guide-documents .doc h3{font-size:14px}}