Skip to content
Snippets Groups Projects
organizations.sass 2.60 KiB
.organization
    display: flex
    flex-direction: column-reverse
    position: relative
    &-title
        @include meta
        a
            @include stretched-link
            text-decoration: none
            display: block
    .media
        background: $color-background-alt
        padding: $spacing1
        margin-bottom: half($spacing0)
        picture
            aspect-ratio: 1
            display: block
        img
            display: block
            height: 100%
            object-fit: contain
            object-position: center
            width: 100%
        &:empty
            position: relative
            &::after
                content: ''
                display: block
                padding-bottom: 100%

.organizations
    max-width: 100%
    @include grid(2)
    @include grid(3, md)
    @include grid(4, lg)
    @include grid(6, xl)
    @include in-page-program
        @include grid(3, md)
        @include grid(3, lg)
        @include grid(3, xl)
    @include media-breakpoint-down(desktop)
        grid-column-gap: $spacing1 !important

.organizations__section
    .organizations
        margin-top: $spacing2

.organizations__page
    .lead
        font-family: $lead-sidebar-font-family
        font-weight: $lead-sidebar-weight
        line-height: $lead-sidebar-line-height
        margin-bottom: $spacing1
        @include media-breakpoint-up(desktop)
            font-size: $lead-sidebar-size-desktop
    .document-content
        .logo
            figcaption
                text-align: right
                @include meta
                margin-bottom: $spacing0
            picture
                aspect-ratio: 1/1
                background: $color-background-alt
                display: block
                padding: $spacing2
                margin-bottom: half($spacing0)
                width: auto
            img
                display: block
                height: 100%
                object-fit: contain
                object-position: center
                width: 100%
        .blocks
            margin-top: $spacing3
        .contacts-details
            @include grid(2, md)
    @include media-breakpoint-down(md)
        .document-content
            .logo
                margin-top: $spacing3
                display: flex
                justify-content: space-between
    @include media-breakpoint-up(md)
        .document-content
            > .container
                display: flex
                justify-content: space-between
                gap: $grid-gutter
            [itemprop="articleBody"]
                width: col(8)
            .logo
                width: col(3)