.collection-ribbon { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); gap:36px; align-items:end; padding:31px 9vw; color:var(--white); background:#0c2b43; }.collection-ribbon-title .eyebrow { margin-bottom:8px; color:#a3cad9; }.collection-ribbon-title h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2rem,3.1vw,3.35rem); font-weight:400; line-height:.98; letter-spacing:-.04em; }.collection-ribbon-title > p:last-child { max-width:320px; margin:11px 0 0; color:#c3dce6; font-size:.9rem; }.collection-ribbon-projects { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(184,216,226,.32); border-left:1px solid rgba(184,216,226,.24); }.collection-ribbon-projects a { display:grid; align-content:start; min-height:128px; padding:16px 14px; border-right:1px solid rgba(184,216,226,.24); border-bottom:1px solid rgba(184,216,226,.24); transition:background .2s ease; }.collection-ribbon-projects a:hover { background:rgba(255,255,255,.07); }.collection-ribbon-projects span { color:#9fcadb; font-size:.68rem; font-weight:800; letter-spacing:.12em; }.collection-ribbon-projects strong { margin:19px 0 8px; font-family:Georgia,'Times New Roman',serif; font-size:1.08rem; font-weight:400; line-height:1.07; }.collection-ribbon-projects em { color:#bdd8e2; font-size:.72rem; font-style:normal; }
@media (max-width:900px) { .collection-ribbon { grid-template-columns:1fr; gap:25px; padding:42px 7vw; }.collection-ribbon-projects { grid-template-columns:repeat(2,1fr); }.collection-ribbon-projects a { min-height:108px; } }
@media (max-width:600px) { .collection-ribbon { padding-top:34px; padding-bottom:34px; }.collection-ribbon-projects { grid-template-columns:1fr; }.collection-ribbon-projects a { min-height:auto; }.collection-ribbon-projects strong { margin:10px 0 5px; } }