.eds-c-hero {
    position: relative;

    &__content {
        position: relative;
        z-index: 2;
    }

    &__metadata-list {
        line-height: $t-a-typography-line-height-md;
        font-size: $t-a-typography-font-size-xs;
        display: flex;
        gap: $t-a-space-relative-400;
        padding: 0;
        margin: 0 0 $t-a-space-absolute-200 0;
        list-style: none;
        flex-wrap: wrap;

        &-item {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
        }

        &-item:not(:last-child) {
            margin-bottom: $t-a-space-absolute-400;
        }

        &-text { 
            margin-bottom: $t-a-space-absolute-100;
            display: block;
        }

        &-description {
            font-weight: $t-a-typography-font-weight-bold;
            white-space: nowrap;
        }

    }
    
    &__metadata-list--horizontal {
        display: flex;
        gap: $t-a-space-relative-200;
        flex-wrap: wrap;

        .eds-c-hero__metadata-list-item {
            display: inline-flex;
            flex-direction: row;
            align-items: baseline;
            gap: $t-a-space-relative-200;
            padding: 0;
            margin: 0;
        }

        .eds-c-hero__metadata-list-title {
            margin-bottom: 0;
        }

        .eds-c-hero__metadata-list-description {
            font-weight: $t-a-typography-font-weight-bold;
        }

        .eds-c-hero__metadata-list-item:not(:last-child)::after {
            content: "•";
            margin: 0;
            color: currentColor;
            opacity: .6;
        }
    }

    &__metadata-list--big {
        .eds-c-hero__metadata-list-description {
            font-size: $t-a-typography-font-size-md;
        }
    }

    &__bg-picture {
        display: none;
    }

    &__bg-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    &__title--span {
        @include u-h1();
        margin: 0.67em 0;
        display: block;
    }

    &__title--small {
        @include u-h2();
    }

    &__subtitle {
        font-size: $t-a-typography-font-size-s;
        line-height: $t-a-typography-line-height-md;
        display: block;
        margin-bottom: $t-a-space-absolute-200;
    }

    &__buttons-container {
        display: flex;
        gap: $t-a-space-absolute-400;
        flex-direction: column;
        margin-top: $t-a-space-absolute-400;
    }

    &__journal {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
        "breadcrumbs breadcrumbs"
        "journal-cover info"
        "partnership partnership";

        .eds-c-hero__title {
            margin-top: $t-a-space-absolute-0;
            margin-bottom: $t-a-space-absolute-400;
        }
    }

    &__breadcrumbs {
        grid-area: breadcrumbs;
    }

    &__partnership {
        grid-area: partnership;
        justify-self: flex-start;
        margin-top: $t-a-space-absolute-200;
    }

    &__journal-cover {
        grid-area: journal-cover;
        margin-top: $t-a-space-absolute-100;
    }

    &__journal-cover, &__article-cover {
        height: 82px;
        width: 64px;
        transition: transform 0.4s ease, box-shadow 0.4s ease;

        &:hover {
            transform: scale(1.02);
        }

        img {
            border: $t-a-border-width-50 solid $t-a-palette-default-white;
            border-radius: 7px;
            width: 100%;
            height: 100%;
        }
    }

    &__article-cover-wrapper {
        display: flex;
        gap: $t-a-space-relative-400;
    }

    &__article-cover {
        flex-shrink: 0;
    }

    &__info {
        grid-area: info;
        display: flex;
        flex-direction: column;
        font-size: $t-a-typography-font-size-s;
    }

    &__access {
        display: flex;
        align-items: center;
        gap: 0.5em;
        font-size: $t-a-typography-font-size-xs;
        line-height: $t-a-typography-line-height-md;
    
        &-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: -$t-a-border-width-50;
        }
    }

    &__search {
        max-width: 1110px;
    }

    &__partnership {
        width: 100%;
    }

    &__partnership-list {
        list-style-type: none;
        border: 2px solid $t-a-palette-default-white;
        border-radius: $t-a-border-radius-200;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    &__partnership-list-item {
        background-color: $t-a-palette-default-white;
        display: flex;
        justify-content: center; // center image horizontally
        align-items: center; 
        width: 100%;
        height: 80px;
        padding: $t-a-space-absolute-200;
        border-bottom-left-radius: $t-a-border-radius-100;
        border-bottom-right-radius: $t-a-border-radius-100;

        &--bg-transparent {
            background-color: transparent;
        }
        
        img {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            max-width: 144px;

            &:hover {
                transform: scale(1.04);
            }
        }
    }

    &__partnership-list-item-img-wrapper {
        width: 250px;
        display: flex;
        gap: $t-a-space-relative-400;
        align-items: center;
    }

    @include from-tablet {

        &__bg-picture {
            display: block;
            position: absolute;
            inset: 0;
            width: 50%;
            padding: $t-a-space-relative-800;
            box-sizing: border-box;
            overflow: hidden;
            z-index: 0;
            right: 0; 
            left: auto;
        }

        &__bg-picture picture img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
            object-position: center;
        }

        &__buttons-container {
            flex-direction: row;
        }

        &__article-cover {
            height: 210px;
            width: 160px;
        }
    }

    @include from-wide-tablet {

        &__journal {
            grid-template-columns: auto minmax(0, 1fr) auto;
            grid-template-areas:
                "breadcrumbs breadcrumbs breadcrumbs"
                "journal-cover info partnership";
            gap: 1.5rem;

            .eds-c-hero__title {
                margin-top: $t-a-space-absolute-100;
            }
        }

        &__partnership {
            width: 300px;
            padding-top: $t-a-space-absolute-0;
        }

        &__partnership-list-item {
            width: 296px;
            height: 105px;
        }

        &__journal-cover {
            height: 210px;
            width: 160px;
            margin-top: $t-a-space-absolute-200;
        }
    }
}