@layer pages {
    .other-projects-intro { background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 52%); }
    .other-projects-shell { width: min(100%, var(--content-width)); margin-inline: auto; padding: clamp(50px, 6vw, 90px) var(--page-gutter) clamp(90px, 9vw, 140px); }
    .other-projects-heading { margin-bottom: 30px; }
    .other-projects-heading h2 { margin-top: 12px; font-size: clamp(1.75rem, 2.6vw, 2.7rem); line-height: 1.1; }
    .other-projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .other-project-card { min-width: 0; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); border: 1px solid var(--line); background: var(--surface); }
    .other-project-card__visual { min-height: 310px; padding: 24px; display: grid; place-items: center; overflow: hidden; background: #e7e4db; }
    .other-project-card__visual img { display: block; width: min(100%, 265px); height: auto; max-height: 265px; object-fit: contain; }
    .other-project-card__content { min-width: 0; padding: clamp(25px, 3vw, 42px); display: flex; flex-direction: column; align-items: flex-start; }
    .other-project-card__content > span { color: var(--accent-ink); font-size: .62rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
    .other-project-card h3 { margin-top: 17px; font-size: clamp(1.45rem, 2.1vw, 2.1rem); line-height: 1.1; }
    .other-project-card p { margin-top: 18px; max-width: 410px; color: var(--muted); line-height: 1.65; }
    .other-project-card a { margin-top: auto; padding-top: 27px; color: var(--accent-ink); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .other-project-card a:hover, .other-project-card a:focus-visible { color: var(--text-strong); }
    .other-project-card a span { margin-left: 8px; }
    @media (max-width: 1100px) { .other-projects-grid { grid-template-columns: 1fr; }.other-project-card { max-width: 850px; } }
    @media (max-width: 640px) { .other-projects-shell { padding-top: 48px; padding-bottom: 80px; }.other-project-card { grid-template-columns: 1fr; }.other-project-card__visual { min-height: 210px; padding: 20px; }.other-project-card__visual img { max-height: 190px; }.other-project-card__content { padding: 26px; }.other-project-card a { margin-top: 0; } }
}