.sbvzla-article-hero {
width: 100%;
max-width: 1240px;
margin: 1.25rem auto 0;
padding: 0 20px;
} .sbvzla-article-bg {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: calc( 30vh + 50px );
overflow: hidden;
border-radius: 8px;
background-color: var( --color-primary );
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 4px 16px rgba( 15, 23, 42, 0.08 );
}
.sbvzla-article-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient( to top, rgba( 15, 23, 42, 0.65 ), rgba( 15, 23, 42, 0.1 ) 60%, rgba( 15, 23, 42, 0.05 ) );
}
@media ( min-width: 1441px ) {
.sbvzla-article-bg {
min-height: calc( 35vh + 50px );
}
}
@media ( max-width: 768px ) {
.sbvzla-article-hero {
margin-top: 1rem;
padding: 0 14px;
}
.sbvzla-article-bg {
min-height: calc( 30vh + 50px );
max-height: 400px;
}
} .sbvzla-article-title-wrap {
position: relative;
z-index: 2;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 2.5rem 20px;
text-align: center;
}
.sbvzla-article-title {
display: inline;
margin: 0;
padding: 0 8px;
font-size: clamp( 1.5rem, 3.2vw, 2.1rem );
font-weight: 700;
line-height: 1.4;
color: #ffffff;
text-shadow: 0 2px 12px rgba( 15, 23, 42, 0.5 );
background-image: linear-gradient( to top, transparent 55%, color-mix( in srgb, var( --color-primary ) 70%, transparent ) 55% );
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
} .sbvzla-article-body {
padding-bottom: 2rem;
}
.sbvzla-article-sheet-content {
max-width: 1240px;
margin: 0 auto;
padding: 1.5rem 20px 2rem;
}
.sbvzla-article-content {
position: relative;
} .sbvzla-article-content p {
margin: 0 0 1.25rem;
line-height: 1.75;
color: #364151;
font-size: 1.02rem;
}
.sbvzla-article-content h2,
.sbvzla-article-content h3,
.sbvzla-article-content h4 {
margin: 2rem 0 0.9rem;
line-height: 1.35;
color: var( --color-quaternary );
}
.sbvzla-article-content h2 {
padding-bottom: 0.4rem;
border-bottom: 2px solid var( --color-primary );
display: inline-block;
}
.sbvzla-article-content ul,
.sbvzla-article-content ol {
margin: 0 0 1.25rem;
padding-left: 1.5rem;
color: #364151;
line-height: 1.7;
}
.sbvzla-article-content li {
margin-bottom: 0.4rem;
}
.sbvzla-article-content a {
color: var( --color-primary );
text-decoration: underline;
}
.sbvzla-article-content a:hover {
color: var( --color-secondary );
}
.sbvzla-article-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.sbvzla-article-content blockquote {
margin: 1.75rem 0;
padding: 1rem 1.5rem;
border-left: 2px solid var( --color-primary );
background-color: rgba( 0, 146, 188, 0.08 );
color: #364151;
font-style: italic;
}
.sbvzla-article-content table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.5rem;
}
.sbvzla-article-content th,
.sbvzla-article-content td {
border: 2px solid var( --color-primary );
padding: 0.6rem 0.9rem;
text-align: left;
}
.sbvzla-article-content th {
background-color: var( --color-primary );
color: #ffffff;
}
@media ( max-width: 768px ) {
.sbvzla-article-title-wrap {
padding: 1.5rem 14px;
}
.sbvzla-article-title {
font-size: clamp( 1.3rem, 5.4vw, 1.7rem );
}
.sbvzla-article-sheet-content {
padding: 1rem 14px 2rem;
}
}