garrit.xyz/styles/components/page.scss

.page {
    display: grid;
    grid-template-columns:
        1fr
        min(650px, 100%)
        1fr;
    margin: 1em 24px;
    margin-bottom: 3em;
    min-height: 80vh;
}
.page > * {
    grid-column: 2;
}
.page__hero {
    min-height: 300px;
    height: 60vh;
    width: 100%;
    margin: 0;
    overflow: hidden;
}
.page__hero img {
    margin-bottom: 0;
    object-fit: cover;
    min-height: 100%;
    min-width: 100%;
    object-position: center;
}
.page__info {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: 2rem 0;

    h1 {
        max-width: 500px;
        margin: 0;
        margin-bottom: 0.66rem;
    }

    h3 {
        margin-bottom: 0;
    }

    &__date {
        color: $color-text-dark;
        @media (prefers-color-scheme: light) {
            color: $color-text-light;
        }
    }
}

.page__body a {
    text-decoration: underline;
    text-decoration-color: $color-tertiary-dark;
    color: $color-text-dark;
    @media (prefers-color-scheme: light) {
        color: $color-text-light;
    }
}
.page__body a,
.page__footer a {
    text-decoration: underline;
    text-decoration-color: $color-tertiary-dark;
}

.page__body:last-child {
    margin-bottom: 0;
}
.page__body h1 h2 h3 h4 h5 h6 p {
    font-weight: normal;
}
.page__body ul ol {
    margin-left: 1.25rem;
    margin-bottom: 1.25rem;
    padding-left: 1.45rem;
}
.page__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.25rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.page__footer h2 {
    margin-bottom: 0;
}
.page__footer a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page__footer a svg {
    width: 20px;
}

.page__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.page__tag-icon {
    vertical-align: middle;
    margin-right: 4px;
}

@media (prefers-color-scheme: light) {
    .page__tag-icon {
        filter: invert(1);
    }
}

@media (max-width: 768px) {
    .page__footer {
        display: none;
    }
}
@media (min-width: 768px) {
    .page__body span {
        width: 100%;
        margin: 1.5rem auto;
    }
    .page__body ul ol {
        margin-left: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .page__hero {
        min-height: 600px;
        height: 75vh;
    }
    .page__info {
        text-align: center;
        h1 {
            margin: 0 auto 0.66rem auto;
        }
    }
    .page__footer {
        padding: 2.25rem;
    }
}
@media (min-width: 1440px) {
    .page__hero {
        height: 70vh;
    }
    .page__info {
        padding: 3rem 0;
    }
    .page__footer {
        padding: 2rem 2rem 3rem 2rem;
    }
}