/* Text and mascot have separate grid tracks: neither can overlap the other. */
.sub-card{
 display:grid;
 grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 grid-template-rows:auto auto auto 1fr auto;
 column-gap:12px;
 row-gap:8px;
 min-height:280px;
 padding:22px;
 align-items:start;
}
.sub-card .sub-art{
 position:static;
 grid-column:2;
 grid-row:1 / 5;
 width:100%;
 height:180px;
 align-self:center;
 opacity:1;
 display:flex;
 align-items:center;
 justify-content:center;
}
.sub-card .sub-art img{
 display:block;
 width:100%;
 height:100%;
 max-width:100%;
 max-height:100%;
 object-fit:contain;
}
.sub-card h3,.sub-card .sub-topic,.sub-card .sub-meta{
 grid-column:1;
 max-width:none;
 min-width:0;
 margin:0;
 overflow-wrap:anywhere;
}
.sub-card h3{font-size:1.3rem;line-height:1.35}
.sub-card .sub-topic{font-size:.94rem;line-height:1.5}
.sub-card .sub-meta{font-size:.88rem;line-height:1.5}
.sub-card .sub-status{grid-column:1 / -1;margin:0}
.sub-card .sub-btn{grid-column:1 / -1;width:100%;min-height:52px;margin-top:8px;align-self:end}
@media(min-width:1180px){
 .sub-card{min-height:285px;padding:20px;column-gap:10px}
 .sub-card .sub-art{height:175px}
 .sub-card h3{font-size:1.2rem}
}
@media(max-width:639px){
 .sub-card{min-height:265px;padding:20px;column-gap:10px}
 .sub-card .sub-art{height:170px}
 .sub-card h3{font-size:1.22rem}
}
@media(max-width:360px){
 .sub-card{padding:16px;column-gap:8px;min-height:250px}
 .sub-card .sub-art{height:150px}
 .sub-card h3{font-size:1.12rem}
}