projects.sass

.block-projects
    .list
        .project-title
            @include hover-translate-icon
            display: flex
            align-items: center
            text-decoration: none
            padding-bottom: $spacing-3
            padding-top: $spacing-3
            gap: $spacing-3
            border-bottom: 1px solid var(--color-border)
            @include icon(arrow-right, after)
                margin-left: auto
                display: inline
                opacity: 0
                margin-right: $spacing-1
            a
                flex: 1
                text-decoration: none
            &:hover
                &,
                a
                    color: $color-accent
                &::after
                    opacity: 1
            @include in-page-without-sidebar
                @include h2
    .grid
        @include grid(2, md)
        @include media-breakpoint-down(desktop)
            .project + .project
                margin-top: $spacing-4
        .project-content
            align-items: baseline
    &--alternate
        .alternate
            @include media-breakpoint-down(desktop)
                .project + .project
                    margin-top: $spacing-4
            @include media-breakpoint-up(desktop)
                article
                    + article
                        margin-top: $spacing-6
                    &:nth-child(odd)
                        margin-left: auto
            @include in-page-with-sidebar
                article
                    width: columns(5)
            @include in-page-without-sidebar
                .top
                    .description
                        @include body-text
                article
                    width: columns(7)

    .large
        .project
            .project-meta
                line-height: $body-size
                margin-bottom: $spacing-2
                margin-top: $spacing-2
                time::after
                    content: ' —'
                    margin-right: $spacing-1
            time,
            ul.project-categories
                align-self: baseline
                display: inline
            .project-categories
                li 
                    display: inline
            + .project
                margin-top: $spacing-4
            .more
                @include icon(arrow-right, after)
                    margin-left: $spacing-1
                    transition: transform 0.55s $arrow-ease-transition
            &:hover 
                .more::after
                    transform: translateX(5px)
        @include media-breakpoint-up(desktop)
            .project
                align-items: flex-end
                flex-direction: row
                gap: var(--grid-gutter)
                .media
                    margin-bottom: 0
        @include in-page-with-sidebar
            .project
                &-title
                    @include h2
                    margin-bottom: $spacing-1
                &-content
                    flex: 1
                .media 
                    flex: 1
        @include in-page-without-sidebar
            .project
                &-title
                    @include lead
                    margin-bottom: space(4)
                &-content
                    width: columns(5)
                .media
                    width: columns(7)