/*
** PROJECT PAGES
**
** Styles in this file are loaded only by the product/project pages.
** Shared layout, header, footer, media, and code block components live in base.css.
*/

:root {
    --content-readable-width: min(610px, 80vw);
    --project-content-width: var(--content-readable-width);
}

.ProjectPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--section-padding);
}

.ProjectContent {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 2rem);
    width: var(--project-content-width);
}

.ProjectSection {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ProjectSection p {
    margin: 0;
}

.ProjectSection p+p {
    margin-top: 0;
}

.ProjectSection ul {
    margin: 0;
    padding-left: 2rem;
}

.ProjectTitle {
    margin: 0;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.ProjectTitle-accent {
    color: var(--color-brand-blue);
}

.ProjectMedia {
    width: 100%;
}

.ProjectMedia a {
    display: block;
}

.ProjectMedia img {
    display: block;
    width: 100%;
}

.ProjectInstall {
    text-align: center;
}