#content .hero {
display: grid;
grid-template-columns: 1fr;
gap: 1.5em;
max-width: var(--pagewidth);
margin: var(--sectiongap) auto 0;
box-sizing: border-box;
padding: 1.8em var(--rail);
background: var(--panel-bg);
color: var(--text);
}
@media (min-width: 1000px) {
#content .hero {
grid-template-columns: 5fr 4fr;
align-items: center;
gap: 2.5em;
padding: 2.6em var(--rail);
}
}
#content .hero h1 {
margin: 0 0 0.4em;
color: var(--text-strong);
line-height: 115%;
}
#content .hero .herosub {
margin: 0 0 1.2em;
max-width: 34em;
color: var(--text-soft);
font-size: 1.1em;
line-height: 155%;
}
#content .hero .heroactions {
display: flex;
flex-wrap: wrap;
gap: 0.8em;
margin: 0;
}
#content .hero .heroactions .buttons {
width: auto;
margin: 0;
}
#content .heropanel {
min-width: 0; 
}
#content .herotrack {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
cursor: grab;
}
#content .herotrack.isdragging {
scroll-snap-type: none;
scroll-behavior: auto;
cursor: grabbing;
user-select: none;
}
#content .herotrack::-webkit-scrollbar {
display: none;
}
#content .heroslide {
flex: 0 0 100%;
scroll-snap-align: center;
display: block;
text-align: center;
text-decoration: none;
color: var(--text);
}
#content .heroslide img {
display: block;
width: 100%;
height: 14em;
margin: 0 auto;
object-fit: contain;
-webkit-user-drag: none;
user-select: none;
}
@media (min-width: 1000px) {
#content .heroslide img {
height: 20em;
}
}
#content .heroslidename {
display: block;
margin-top: 0.6em;
color: var(--text-quiet);
font-size: 0.95em;
line-height: 140%;
}
#content .heroslide:hover .heroslidename {
color: var(--link);
}
#content .herodots {
display: flex;
justify-content: center;
gap: 0.5em;
margin-top: 0.9em;
}
#content .herodot {
width: 0.7em;
height: 0.7em;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--rule);
cursor: pointer;
}
#content .herodot[aria-selected="true"] {
background: var(--hdred);
}
#content .herodot::after {
content: "";
display: block;
position: relative;
top: -1.1em;
left: -1.1em;
width: 2.9em;
height: 2.9em;
}
#content .herodot:focus-visible {
outline: 2px solid var(--link);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
#content .herotrack {
scroll-behavior: auto;
}
}