programs.sass

.block-programs
    .program
        display: flex
        &-diploma
            @include meta
            display: block
            margin-bottom: $spacing-1
            margin-top: $spacing-1
        .media img
            aspect-ratio: $block-programs-aspect-ratio
            display: block
            object-fit: cover
        @include media-breakpoint-up(desktop)
            &-content
                align-items: baseline
                display: flex
    &--list
        .program
            align-items: start
            .program-title a
                @include hover-translate-icon($fade: true)
                @include icon(arrow-right-line, after, true)
                    display: inline
                transition: color 0.55s
                &:hover
                    color: var(--color-accent)
            @include media-breakpoint-down(desktop)
                flex-direction: column-reverse
                gap: $spacing-2
                .program-title a
                    align-items: baseline
                    display: flex
                    &::after
                        opacity: 1
            @include media-breakpoint-up(desktop)
                flex-direction: row-reverse
                .program-content
                    flex: 1
                    flex-wrap: wrap
                    .program-title
                        flex: 1
                    .program-title,
                    [itemprop="abstract"]
                        min-width: columns(6)
                    .program-diploma
                        width: var(--grid-gutter)
                        text-align: center
                .media
                    flex-shrink: 0
                    margin-bottom: 0
                    width: columns(2)
        @include in-page-with-sidebar
            .program-diploma + [itemprop="abstract"]
                padding-right: var(--grid-gutter)
                width: 100%
        @include in-page-without-sidebar
            .program-title
                @include h2
            [itemprop="abstract"]
                width: columns(9)
            .program-diploma
                margin-left: offset(1)
    &--grid
        .programs-grid
            align-items: start
            @include grid(1, false, $spacing-5)
            @include grid(2, xl)
            .program
                flex-direction: column
                .program-content
                    flex-direction: column
                    &:hover .more:after
                        transform: translateX($spacing-1)
                    .program-title
                        margin-bottom: $spacing-1
                        order: -1
                    .program-diploma
                        order: 0
                    [itemprop='abstract'],
                    .more
                        order: 2
                    .more
                        @include icon(arrow-right-line, after, true)
                        @include hover-translate-icon
                .media
                    margin-bottom: $spacing-3
            @include in-page-without-sidebar
                @include grid(2)
                @include grid(3, xl)