.project
    @include article(auto)
    .project-title
        @include article-title

.projects__section,
.projects_categories__term
    .projects
        @include grid(2, md)

.projects__page
    .hero
        .content
            align-items: stretch
        .hero-text
            display: flex
            flex-direction: column
            gap: $spacing-3
        .project-infos
            --color-text: #{$project-infos-color-text}
            --color-text-alt: #{$project-infos-color-text-alt}
            @include meta
            display: flex
            gap: $spacing-3
            ul
                @include list-reset
                display: flex
                gap: $spacing-3
            

    @include media-breakpoint-up(sm)
        .hero
            .project-infos
                width: columns(8)
    @include media-breakpoint-up(md)
        .hero
            .project-infos
                width: columns(6)
    @include media-breakpoint-up(desktop)
        .hero
            .content
                align-items: stretch
            .hero-text
                gap: $spacing-3
                width: columns(6)
            .project-infos
                width: columns(4)
            figure
                width: columns(6)