.hero {
min-height: 680px;
display: grid;
grid-template-columns: 1.1fr .9fr;
align-items: center;
gap: 70px;
padding-block: 80px
}
.hero h1 {
font-size: clamp(56px, 9vw, 132px);
letter-spacing: -.065em;
line-height: .86;
margin: 12px 0 28px;
}
.zezh-hero-mark {
transform: rotate(2deg)
}
.hand-hero-mark {
width: 125%;
}
.hero-actions {
display: flex;
align-items: center;
gap: 24px;
margin-top: 34px
}
.hero-actions-menu ul {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
list-style: none;
margin: 0;
padding: 0
}
.section-head {
margin-bottom: 34px
}
.section-head h2 {
font-size: clamp(38px, 5vw, 70px);
letter-spacing: -.05em;
margin: 8px 0
}
.row {
display: flex;
justify-content: space-between;
align-items: end
}
.project-group {
margin: 55px 0
}
.group-title {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--line);
margin-bottom: 20px
}
.group-title h3 {
font-size: 26px;
margin: 0 0 12px
}
.group-title span {
font-family: "IBM Plex Mono", monospace;
color: var(--muted)
}
.post-list {
border-top: 1px solid var(--line)
}
.post-row {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 20px;
padding: 22px 0;
border-bottom: 1px solid var(--line);
align-items: center
}
.post-row time {
font: 13px "IBM Plex Mono", monospace;
color: var(--muted)
}
.post-row strong {
font-size: 21px
}
@media(max-width:800px) {
.hero {
grid-template-columns: 1fr;
min-height: auto;
gap: 20px
}
.hero-mark {
order: -1;
width: 220px;
padding: 10px
}
.hero-actions {
flex-direction: column;
align-items: flex-start
}
.row {
align-items: start;
gap: 20px;
flex-direction: column
}
.post-row {
grid-template-columns: 90px 1fr auto
}
}