.hero {
background: linear-gradient(180deg, #0a0a0a 0%, #121212 100%);
}

.alt {
background: var(--color-charcoal);
}

.highlight {
background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
border-top: 1px solid var(--color-graphite);
border-bottom: 1px solid var(--color-graphite);
}

.media {
min-width: 0;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-graphite);
}

.media img {
width: 100%;
height: 100%;
object-fit: cover;
}

.section .container {
align-items: center;
}

h1, h2 {
letter-spacing: 0.02em;
}

.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
}

.section p {
color: var(--color-light-gray);
}

@media (max-width: 640px) {
.media {
max-height: 320px;
}
}