.letter-card{background:var(--color-card);width:280px;height:430px;color:var(--color-ink-700);transform-style:preserve-3d;transition:transform 1s var(--ease-out-soft), box-shadow 1s var(--ease-out-soft);border-radius:6px 14px 14px 6px;position:relative;transform:perspective(2000px);box-shadow:inset 280px 0 50px #0e172647,20px 0 60px #0e172638}.letter-card:before,.letter-card:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}.letter-card:after{background:var(--color-hairline);border:1px solid var(--color-hairline-strong);transform:translate3d(3px,-3px,-1px)}.letter-card:before{background:var(--color-hairline-strong);transform:translate3d(6px,-6px,-2px)}.letter-card[data-open]{transform:perspective(2000px)rotate(6deg)scale(1.02);box-shadow:inset 20px 0 50px #0e17262e,0 10px 80px #0e172638}@media (min-width:1024px){.letter-card{width:320px;height:430px}:lang(mn) .letter-card{height:480px}.letter-card[data-open]{transform:perspective(2000px)rotate(12deg)scale(1.12)}}.letter-details{padding:24px 20px 20px 30px;font-size:13px;line-height:1.45;position:absolute;inset:0}@media (min-width:1024px){.letter-details{padding:30px 26px 26px 40px;font-size:14.5px}}.letter-cover{z-index:2;transform-origin:0;transition:transform .7s var(--ease-out-soft);border-radius:inherit;transform-style:preserve-3d;position:absolute;inset:0}.letter-card[data-open] .letter-cover{transform:rotateY(-135deg)}.letter-face{text-align:center;color:#fff;background:var(--color-brand-500);border:2px solid var(--color-brand-600);border-radius:inherit;place-content:center;justify-items:center;gap:16px;padding:24px;display:grid;position:absolute;inset:0}.letter-bark{border-radius:inherit;background:var(--color-card);opacity:0;transition:opacity .7s var(--ease-out-soft), box-shadow .6s;position:absolute;inset:0}.letter-card[data-open] .letter-bark{opacity:1;box-shadow:inset 300px 200px 100px #0e172640}.letter-card[data-still],.letter-card[data-still] .letter-cover,.letter-card[data-still] .letter-bark{transition:none}@media (prefers-reduced-motion:reduce){.letter-card,.letter-cover,.letter-bark{transition:none}}@media (max-width:639px){.letter-card:before,.letter-card:after{display:none}.letter-card[data-open]{transform:perspective(2000px)translate(48px)rotate(2deg)scale(.88)}.letter-card[data-open] .letter-cover{transform:rotateY(-110deg)}}