.single-portfolio section.section-portfolio .content {
    display: grid;
    grid-template-areas: "header"
        "gallery"
        "content";
    grid-template-columns: 1fr;
    grid-template-rows: auto 210px auto;
    align-items: start;
    gap: var(--space-l);
}

/* Portfolio entry header */
.single-portfolio .portfolio-entry-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    grid-area: header;

    & hgroup {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        font-family: var(--heading-font-family);
    }

    & hgroup h2 {
        font-weight: 400;
        margin: 0;
    }

    & hgroup p {
        font-size: var(--body-font-xs);
        font-weight: 500;
        color: var(--grey-3);
        margin: 0;
    }

    & .portfolio-entry-client-year {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-s);
        font-size: var(--body-font-m);
        font-family: var(--heading-font-family);
        font-weight: 400;
        color: var(--grey-2);
        margin: 0;
        margin-bottom: 0;
    }

    & .portfolio-entry-client {
        font-weight: 400;
        margin: 0;
    }

    & .portfolio-entry-year {
        font-weight: 500;
        margin: 0;
    }
}

/* Portfolio entry content */
.single-portfolio .portfolio-entry-content {
    grid-area: content;

    & .portfolio-entry-description {
        font-size: var(--body-font-s);
        font-weight: 400;
        line-height: 1.6;
        color: var(--grey-1);
        margin: 0;
    }

    & .portfolio-entry-tags {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        gap: var(--space-s);
        margin-top: var(--space-xl);

        & .portfolio-entry-tag {
            font-size: var(--body-font-xs);
            font-weight: 400;
            color: var(--grey-3);
            background-color: color-mix(in oklab, var(--grey-5) 50%, #fff 50%);
            margin: 0;
            padding: 6px 12px;
            border-radius: 100px
        }
    }

    & .portfolio-entry-url {
        font-size: var(--body-font-s);
        font-weight: 500;
        color: var(--grey-1);
        font-weight: 500;
        margin: 0;
        margin-top: var(--space-xl);
    }

}

/* Portfolio entry gallery */
.single-portfolio .portfolio-entry-gallery {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: scroll;
    gap: var(--space-m);
    grid-area: gallery;
    height: 210px;

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--space-s);
    }
}

/* Large devices (1024px and up) */
@media (min-width: 1024px) {
    .single-portfolio section.section-portfolio .content {
        display: grid;
        grid-template-areas: "header gallery"
            "content gallery";
        grid-template-columns: 1fr 480px;
        grid-template-rows: 96px 1fr;
        align-items: start;
        gap: calc(var(--space-l) / 2) calc(var(--space-l) * 2);
    }

    /* Portfolio entry header */
    .single-portfolio .portfolio-entry-header {
        position: sticky;
        top: 102px;
    }

    /* Portfolio entry content */
    .single-portfolio .portfolio-entry-content {
        position: sticky;
        top: 228px;
    }

    /* Portfolio entry gallery */
    .single-portfolio .portfolio-entry-gallery {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-l);
        height: auto;
    }
}