.cba-wrap {
margin: 34px 0;
padding: 18px;
border: 1px solid #e3e7ee;
border-radius: 8px;
background: #fff;
color: #15181d;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.cba-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.cba-head h2 {
margin: 0;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.25;
letter-spacing: 0;
}
.cba-kicker {
margin: 0 0 4px;
color: #5b6472;
font-size: 13px;
line-height: 1.5;
}
.cba-pill {
flex: 0 0 auto;
border: 1px solid #f0b5b6;
border-radius: 999px;
padding: 5px 9px;
color: #b51d24;
background: #fff6f6;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.cba-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 12px;
}
.cba-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 188px;
overflow: hidden;
border: 1px solid #e5e8ef;
border-radius: 8px;
background: #f9fafb;
color: inherit;
text-decoration: none;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.cba-card:hover,
.cba-card:focus {
transform: translateY(-2px);
border-color: #b8c0cc;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
color: inherit;
text-decoration: none;
}
.cba-card--hero {
grid-column: span 3;
grid-row: span 2;
min-height: 310px;
}
.cba-card--tall {
grid-column: span 2;
grid-row: span 2;
min-height: 310px;
}
.cba-card--banner {
grid-column: span 3;
min-height: 148px;
}
.cba-card--strip {
grid-column: span 3;
min-height: 128px;
}
.cba-card--medium {
grid-column: span 2;
}
.cba-card--mini,
.cba-card--compact {
grid-column: span 1;
}
.cba-media {
display: block;
flex: 1 1 auto;
min-height: 108px;
background: #eef2f6;
}
.cba-card--hero .cba-media,
.cba-card--tall .cba-media {
min-height: 210px;
}
.cba-card--banner .cba-media,
.cba-card--strip .cba-media {
min-height: 84px;
}
.cba-media img {
width: 100%;
height: 100%;
min-height: inherit;
display: block;
object-fit: cover;
}
.cba-image-fallback {
display: grid;
min-height: inherit;
place-items: center;
color: #7b8492;
font-weight: 800;
letter-spacing: 0;
}
.cba-badge {
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
max-width: calc(100% - 20px);
border-radius: 999px;
padding: 5px 8px;
background: rgba(16, 24, 39, 0.86);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.cba-body {
display: block;
padding: 10px 11px 12px;
background: #fff;
}
.cba-body strong {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 2.8em;
color: #15181d;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
}
.cba-body span {
display: block;
margin-top: 6px;
color: #d72d2f;
font-size: 13px;
font-weight: 800;
line-height: 1.3;
}
.cba-disclosure {
margin: 12px 0 0;
color: #687282;
font-size: 12px;
line-height: 1.5;
}
.cba-more {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
margin-top: 12px;
border-radius: 8px;
background: #111827;
color: #fff;
font-weight: 800;
text-decoration: none;
letter-spacing: 0;
}
.cba-more:hover,
.cba-more:focus {
background: #d72d2f;
color: #fff;
text-decoration: none;
}
@media (max-width: 700px) {
.cba-wrap {
margin: 26px 0;
padding: 12px;
border-radius: 8px;
}
.cba-head {
align-items: center;
margin-bottom: 12px;
}
.cba-head h2 {
font-size: 20px;
}
.cba-kicker {
font-size: 12px;
}
.cba-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.cba-card {
min-height: 154px;
}
.cba-card--hero,
.cba-card--banner,
.cba-card--strip {
grid-column: 1 / -1;
}
.cba-card--hero {
min-height: 218px;
}
.cba-card--tall {
grid-column: span 1;
grid-row: span 2;
min-height: 286px;
}
.cba-card--mini,
.cba-card--medium,
.cba-card--compact {
grid-column: span 1;
}
.cba-card--banner {
min-height: 136px;
}
.cba-card--strip {
min-height: 112px;
}
.cba-card--hero .cba-media {
min-height: 145px;
}
.cba-card--tall .cba-media {
min-height: 200px;
}
.cba-media {
min-height: 92px;
}
.cba-body {
padding: 9px;
}
.cba-body strong {
font-size: 13px;
}
.cba-body span {
font-size: 12px;
}
.cba-mobile-hidden {
display: none;
}
}
@media (max-width: 360px) {
.cba-grid {
gap: 8px;
}
.cba-card--tall {
min-height: 260px;
}
.cba-body strong {
font-size: 12px;
}
}