.mxsb-blog-rail{
container-type: inline-size;
--mxsb-blog-cols-max: 3;
--mxsb-blog-gap: 24px;
--mxsb-blog-radius: var(--mxsb-radius, 20px);
--mxsb-blog-border: rgba(120,150,185,.24);
--mxsb-blog-surface: #fff;
--mxsb-blog-ink: var(--mxsb-navy, #0b1739);
--mxsb-blog-muted: var(--mxsb-muted, #5c6f88);
--mxsb-blog-accent: var(--mxsb-primary, #0073e6);
--mxsb-blog-shadow: 0 18px 44px rgba(11,23,57,.08);
}

.mxsb-blog-grid{

--mxsb-blog-cols: var(--mxsb-blog-cols-max, 3);
--mxsb-blog-col: max(240px, calc((100% - (var(--mxsb-blog-cols) - 1) * var(--mxsb-blog-gap)) / var(--mxsb-blog-cols)));
display: flex;
flex-wrap: wrap;
gap: var(--mxsb-blog-gap);
margin: 0;
padding: 0;
list-style: none;
}

@container (max-width: 940px){
.mxsb-blog-grid{
--mxsb-blog-cols: min(2, var(--mxsb-blog-cols-max, 3));
}
}

@container (max-width: 640px){
.mxsb-blog-grid{
--mxsb-blog-cols: 1;
}
}

.mxsb-blog-card{
display: flex;
flex-direction: column;
flex: 1 1 var(--mxsb-blog-col);
max-width: var(--mxsb-blog-col);
min-width: 0;
overflow: hidden;
border: 1px solid var(--mxsb-blog-border);
border-radius: var(--mxsb-blog-radius);
background: var(--mxsb-blog-surface);
box-shadow: var(--mxsb-blog-shadow);
}

.mxsb-blog-card__media{
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #eef4fb;
}

.mxsb-blog-card__image{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

.mxsb-blog-card__placeholder{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0b1739, #0073e6);
color: rgba(255,255,255,.7);
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}

.mxsb-blog-card__body{
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 12px;
padding: 22px 22px 24px;
}

.mxsb-blog-card__meta{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
color: var(--mxsb-blog-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
}

.mxsb-blog-card__tag{
display: inline-flex;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,115,230,.1);
color: var(--mxsb-blog-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
text-decoration: none;
}

.mxsb-blog-card__sep{
color: rgba(120,150,185,.7);
}

.mxsb-blog-card__title{
margin: 0;
color: var(--mxsb-blog-ink);
font-size: 20px;
font-weight: 750;
line-height: 1.3;
letter-spacing: -.02em;
}

.mxsb-blog-card__title a{
color: inherit;
text-decoration: none;
}

.mxsb-blog-card__title a:hover{
color: var(--mxsb-blog-accent);
}

.mxsb-blog-card__excerpt{
margin: 0;
color: var(--mxsb-blog-muted);
font-size: 15px;
line-height: 1.62;
}

.mxsb-blog-card__more{
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 6px;
color: var(--mxsb-blog-accent);
font-size: 14px;
font-weight: 750;
text-decoration: none;
}

.mxsb-blog-card__arrow{
display: inline-flex;
transition: transform 260ms cubic-bezier(.22,.68,.24,1);
}

.mxsb-blog-card__more:hover .mxsb-blog-card__arrow{
transform: translateX(5px);
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child{
flex-basis: 100%;
max-width: 100%;
flex-direction: row;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__media{
flex: 0 0 46%;
aspect-ratio: auto;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__body{
justify-content: center;
padding: 34px 34px 36px;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__title{
font-size: 28px;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__more{
margin-top: 10px;
}

.mxsb-blog-actions{
display: flex;
justify-content: center;
margin-top: 34px;
}

.mxsb-blog-rail--attached{
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 44px;
padding: 34px 30px 36px;
border: 1px solid var(--mxsb-blog-border);
border-radius: var(--mxsb-blog-radius);
background: linear-gradient(180deg, #f8fbff, #f1f6fd);
}

.mxsb-blog-rail__header{
display: flex;
align-items: flex-end;
flex-wrap: wrap;
justify-content: space-between;
gap: 14px 26px;
}

.mxsb-blog-rail__intro{
display: flex;
flex-direction: column;
gap: 8px;
max-width: 720px;
}

.mxsb-blog-rail__eyebrow{
margin: 0;
color: var(--mxsb-blog-accent);
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}

.mxsb-blog-rail__header h2{
margin: 0;
color: var(--mxsb-blog-ink);
font-size: 28px;
font-weight: 780;
line-height: 1.2;
letter-spacing: -.03em;
}

.mxsb-blog-rail__header p{
margin: 0;
color: var(--mxsb-blog-muted);
font-size: 16px;
line-height: 1.6;
}

.mxsb-blog-rail__link{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--mxsb-blog-accent);
font-size: 14px;
font-weight: 750;
text-decoration: none;
white-space: nowrap;
}

.mxsb-blog-rail__link:hover{
text-decoration: underline;
}

.mxsb-blog-rail--attached .mxsb-blog-card{
box-shadow: none;
}

.mxsb-product-information > .mxsb-blog-rail--product{
grid-column: 1 / -1;
margin-top: 0;
padding: 34px 30px 36px;
border: 1px solid var(--mxsb-blog-border);
border-radius: var(--mxsb-blog-radius);
background: linear-gradient(180deg, #f8fbff, #f1f6fd);
box-shadow: none;
}

.mxsb-content--light .mxsb-blog-rail,
.mxsb-bg--gradient .mxsb-blog-rail,
.mxsb-bg--image .mxsb-blog-rail{
--mxsb-blog-surface: rgba(255,255,255,.07);
--mxsb-blog-border: rgba(255,255,255,.16);
--mxsb-blog-ink: #fff;
--mxsb-blog-muted: #c3d6ea;
--mxsb-blog-accent: #7cc8ff;
--mxsb-blog-shadow: 0 20px 48px rgba(3,10,24,.28);
}

@media (max-width: 1024px){
.mxsb-blog-grid--feature .mxsb-blog-card:first-child{
flex-direction: column;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__media{
flex: 0 0 auto;
aspect-ratio: 16 / 9;
}
}

@media (max-width: 767px){
.mxsb-blog-rail{
--mxsb-blog-cols-max: 1;
--mxsb-blog-gap: 18px;
}

.mxsb-blog-rail--attached{
margin-top: 32px;
padding: 24px 18px 26px;
}

.mxsb-blog-card__body{
padding: 18px 18px 20px;
}

.mxsb-blog-card__title{
font-size: 18px;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__title{
font-size: 22px;
}

.mxsb-blog-grid--feature .mxsb-blog-card:first-child .mxsb-blog-card__body{
padding: 20px 18px 22px;
}

.mxsb-blog-rail__header h2{
font-size: 23px;
}
}