.sk-hero {
background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-2) 100%);
padding: 48px 24px;
margin-bottom: 32px;
border-bottom: 1px solid var(--sk-line);
}
.sk-hero__inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.sk-hero__content {
display: flex;
flex-direction: column;
gap: 16px;
}
.sk-hero__content .sk-pill {
align-self: flex-start;
}
.sk-hero__title {
font-family: var(--sk-font-head);
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: #fff;
line-height: 1.35;
margin: 0;
}
.sk-hero__excerpt {
font-size: 14px;
color: rgba(255,255,255,0.75);
line-height: 1.8;
margin: 0;
}
.sk-hero__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.sk-btn {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: var(--sk-radius-pill);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: opacity 180ms ease;
}
.sk-btn:hover { opacity: 0.85; }
.sk-btn--primary {
background: var(--sk-coral);
color: #fff;
}
.sk-btn--ghost {
background: transparent;
color: rgba(255,255,255,0.8);
border: 1.5px solid rgba(255,255,255,0.4);
}
.sk-hero__thumb {
border-radius: var(--sk-radius-card);
overflow: hidden;
aspect-ratio: 16/9;
background: var(--sk-navy-2);
display: flex;
align-items: center;
justify-content: center;
}
.sk-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-hero__placeholder {
font-size: 64px;
}
@media (max-width: 768px) {
.sk-hero__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.sk-hero__thumb {
order: -1;
max-height: 200px;
}
} .sk-age-filter-wrap {
max-width: 1100px;
margin: 0 auto 24px;
padding: 0 24px;
}
.sk-age-filter {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sk-age-btn {
padding: 8px 16px;
border-radius: var(--sk-radius-pill);
border: 1.5px solid var(--sk-line);
background: #fff;
color: var(--sk-ink);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 180ms ease;
}
.sk-age-btn:hover {
border-color: var(--sk-coral);
color: var(--sk-coral);
}
.sk-age-btn--active {
background: var(--sk-navy);
border-color: var(--sk-navy);
color: #fff;
} article.sk-filtered-out {
opacity: 0.25;
pointer-events: none;
}