body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background-color: var(--primary-color-lightest);
}

::selection {
    background-color: var(--primary-color);
    color: var(--primary-color-lightest);
}

.bamboo-page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: calc(100vh - 4rem);
}

.bamboo-page__content {
    margin: 4rem var(--page-spacing);
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--white);
    align-self: start;
}

.bamboo-banner {
    object-fit: cover;
    width: 100%;
    height: 10rem;
    grid-area: area;
}

.bamboo-banner__container {
    width: 100vw;
    height: 10rem;
    display: grid;
    grid-template-areas: "area";
}

.bamboo-banner__title {
    grid-area: area;
    padding-left: var(--page-spacing);
    display: flex;
    align-items: center;
    background-color: rgba(255 255 255 / 10%);
    backdrop-filter: blur(0.75rem);
    color: var(--primary-color-lightest);
    font-size: 3rem;
    font-family: var(--font-family-heading);
}

.bamboo-footer {
    display: flex;
    justify-content: space-between;
    padding: 2rem var(--page-spacing);
    background: var(--primary-color);
    color: var(--primary-color-lightest);
}

.bamboo-footer__links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    a {
        color: var(--primary-color-lightest);
        text-decoration: underline;
    }
}

.bamboo-heart {
    color: #ff0000;
}

.is--license {
    &.bamboo-preview {
        width: 50%;
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    &.bamboo-preview__image {
        width: 100%;
        height: auto;
        object-fit: scale-down;

        &.is--small {
            width: 50%;
        }
    }

    &.bamboo-preview__caption {
        font-size: 1.25rem;
    }
}