main .page__header { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 2); @media #{$small} { margin-top: calc(var(--spacing) * 1); } .page__type{ margin-bottom: calc(var(--spacing) * 1); } .page__title { max-width: var(--max-w-content); text-transform: uppercase; font-weight: normal; font-size: var(--fs-medium); font-weight: 500; line-height: var(--leading-title); margin-bottom: calc(var(--spacing) * 2); @media #{$small-up} { text-wrap: balance; } @media #{$small} { margin-bottom: calc(var(--spacing) * 1); } } .page__cover{ margin-top: calc(var(--spacing) * 2); } .date{ display: block; margin-top: calc(var(--spacing) * -1.5); margin-bottom: calc(var(--spacing) * 2); color: var(--color-txt-light); @media #{$small} { margin-bottom: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * -0.75); } } .page__description { font-size: var(--fs-text); margin-bottom: calc(var(--spacing) * 3); @media #{$small} { margin-bottom: calc(var(--spacing) * 1.5); } max-width: var(--max-w-content); } ul.list-nav{ display: flex; // justify-content: space-between; flex-wrap: wrap; // gap: 3ch; list-style: none; margin-top: calc(var(--spacing) * -1.5); @media #{$small} { margin-top: calc(var(--spacing) * -0.5); } color: var(--color-txt-light); li{ white-space: nowrap; margin-right: 2ch; &:last-of-type{ margin-right: 0; } @media #{$small} { width: 12ch; } margin-bottom: calc(var(--spacing) * 0.25); } a{ text-decoration: none; text-transform: lowercase; &::after{ content: " ↓"; } } li:hover{ color: var(--color-txt) } } }