@use '../mixins'; body { padding: var(--spacing-16); } .page-header { @include mixins.responsive-container($width-breakpoint: 600px); margin-bottom: var(--spacing-16); h1 { align-items: center; border: 1px solid var(--foreground-2); display: flex; font-size: 2.5rem; margin-bottom: var(--spacing-08); } .icon { align-items: center; background-color: var(--df-2); color: var(--db-1); display: inline-flex; height: 4.5rem; justify-content: center; margin-right: var(--spacing-08); width: 4.5rem; } .byline { background-color: var(--background-2); font-weight: bold; padding: var(--spacing-08); text-align: center; } } .page-main { @include mixins.responsive-container($width-breakpoint: 900px); margin-bottom: var(--spacing-16); display: flex; flex-direction: column; .store-links { align-items: center; display: flex; gap: var(--spacing-08); justify-content: center; margin-bottom: var(--spacing-16); @media (max-width: 600px) { flex-direction: column; } a { padding: var(--spacing-04); text-decoration: none; } img { display: block; height: fit-content; } } .screenshot { border: 1px solid var(--foreground-2); } } .page-footer { @include mixins.responsive-container($width-breakpoint: 600px); text-align: center; }