--- export interface Props { title: string, titleHidden?: boolean } const { title, titleHidden } = Astro.props const hidden = titleHidden || false ? "visually-hidden" : "" --- <div class="base"> <h1 class={hidden}>{title}</h1> <div> <slot /> </div> </div> <style> div { display: flex; flex-direction: column; justify-content: center; text-align: center; } div > div { row-gap: 1em; column-gap: 1em; justify-content: center; align-self: center; display: flex; flex-flow: row wrap; position: relative; } h1 { font-size: 40px; letter-spacing: -1px; color: var(--c-primary-text); margin: 0 auto 0px; padding: 0.25rem 1.5rem 0.5rem; max-width: max-content; &:after { content:' '; display: block; width: 65%; height: 3px; margin: auto; background-color: var(--c-accent-1); } } @media (min-width: 1000px) { .base { margin-left: 3rem; margin-right: 3rem; } } @media (min-width: 1500px) { .base { margin-left: 10%; margin-right: 10%; } } </style>