//.programs__section
//     .page-with-blocks
//         .hero
//             margin-bottom: 3rem

//     main > article
//         position: relative
//         > aside
//             align-self: flex-start
//             margin-bottom: $spacing5
//             pointer-events: none
//             .toc + p
//                 margin-top: $grid-gutter
//             p:last-of-type
//                 margin-bottom: 0
//             @include media-breakpoint-down(md)
//                 position: relative
//             @include media-breakpoint-up(md)
//                 height: 100%
//                 margin-bottom: 0
//                 position: absolute
//                 width: 100%
//                 ~ *
//                     .container
//                         > *
//                             &:not(.call_to_action)
//                                 padding-left: col(4)
//                             &.call_to_action
//                                 margin-left: col(4)
//                             &:is(picture)
//                                 display: block
//             > div
//                 // @extend .container
//                 // @extend .sticky
//                 padding: 0
//                 > *
//                     // @extend .col-md-3
//                     padding-left: #{$grid-gutter / 2}
//                     padding-right: #{$grid-gutter / 2}
//                     pointer-events: auto
//         [itemprop="articleBody"]
//             margin-bottom: $spacing5
//     article
//         .persons
//             margin-bottom: 3rem
//             margin-top: -2rem
//             @include grid(2, lg)


.program
    @include article

div.programs,
section.programs
    @include grid(2, md)
    @include grid(3, xl)

ol.programs
    @include list-reset
    > li
        border-bottom: 1px solid $main-border-color
        padding-bottom: $spacing1
        padding-top: $spacing1
        > .title
            @extend .h3
        a
            text-decoration: none

        @include media-breakpoint-down(md)
            a, p
                display: block
        @include media-breakpoint-up(md)
            align-items: baseline
            display: flex
            justify-content: space-between
            a:first-child, p:first-child
                padding-right: $spacing2
            > .title
                & + a
                    text-align: right

.programs__section
    .hero
        display: block
        .dropdown-share
            margin-top: $spacing1
            @include media-breakpoint-up(md)
                bottom: $spacing1 + $spacing0 
                margin-top: 0
                position: absolute
                right: $grid-gutter
            > button
                @include media-breakpoint-down(md)
                    width: 100%

    .lead
        padding-top: $spacing4
    aside
        @include container
        @include sticky
        overflow: auto
        background: darken($main-background-color, 3)
        z-index: $program-zindex-toc
    .toc
        max-width: 100%
        ol
            display: flex
            flex-direction: row
            flex-wrap: nowrap
            justify-content: space-between
            white-space: nowrap
            margin: 0 #{-$spacing1}
            li
                padding: $spacing1/2 $spacing1
                margin-bottom: 0
    .blocks
        .block-content
            padding-left: col(5)

    @include media-breakpoint-up(md)
        article
            .content
                @include grid(12, md)
                padding-top: $spacing1
                padding-bottom: $spacing4
                border-top: 1px solid $main-color
                position: relative
                > *
                    grid-column: 6/13
                > h2
                    $sticky-top-offset: 90px
                    @include sticky(#{$header-height + $sticky-top-offset})
                    top: $sticky-top-offset
                    align-self: start
                    grid-column: 1/5
                    margin-bottom: 0