/* Block template */
.related-library {
    padding: 60px 0 0;

    &.l-container--xxl.full-bleed {
        margin: auto calc(-10rem - 4%);
        max-width: calc(100% + 20rem + 8%);
        width: calc(100% + 20rem + 8%);
    }

    .related-library-title {
        margin: 20px auto 60px;

        h3 {
            text-align: center;
            font-size: 32px;
            font-weight: 700;
        }
    }

    .related-library-wrapper.col-xs-12 {
        max-width: 120vw;
        width: 70rem;
        margin: auto;
        padding: 0;

        @media all and (min-width: 35em) {
            max-width: 100vw;
        }

        @media all and (min-width: 35em) {
            width: 92%;
            padding: 0 60px;
        }

        @media all and (min-width: 70em) {
            max-width: 1280px;
        }

        .col-lg-6 {
            margin: 0 auto 30px;
            
            @media all and (min-width: 47em) {
                display: flex;
                opacity: 1;
                align-items: stretch;
                flex-grow: 1;

                .related-library-item {
                    height: 100%;

                    .related-library-container {
                        height: 100%;
                    }
                }
            }

            @media all and (min-width: 60em) {
                margin: 0 auto 90px;
            }
        }
    }

    a.related-library-item {
        padding-bottom: 10px;

        &:hover,
        &:focus {
            text-decoration: none;
        }

        .related-library-container {
            margin: auto 40px;
            padding: 35px;
            background: rgba(244, 244, 244, 0.5);
            min-height: 255px;
            box-shadow: 0px 0px 5px #eee;

            &:hover,
            &:focus {
                text-decoration: none;
                box-shadow: 5px 5px 5px #eee;
            }

            @media all and (min-width: 47em) {
                margin: auto 0px;
            }

            .library-title {
                display: flex;
                justify-content: center;
                flex-direction: column;
                position: relative;

                &::after {
                    content: '';
                    border-radius: 30px;
                    font-size: 25px;
                    padding: 28px 26px 28px 29px;
                    color: #FE8F3F;
                    position: absolute;
                    align-self: flex-end;
                    justify-content: flex-end;

                    @media all and (max-width: 47em) {
                        display: none;
                    }
                }
            }

            h4 {
                font-size: 32px;
                font-weight: 400;
                margin-top: 13px;
                margin-bottom: 24px;
                word-break: break-word;

                @media all and (min-width: 47em) {
                    width: calc(100% - 70px); /*space for arrow*/
                    span {
                        margin-right: 60px;
                    }
                }
            }

            h5 {
                font-size: 20px;
                font-weight: 400;
                color: var(--color-library-title);
                text-transform: uppercase;
            }

            p {
                font-size: 18px;
                font-weight: 400;
                color: #6E6F72;
                margin: 0;
            }
        }
        

        .border-bottom {
            height: 10px;
            width: auto;
            margin: auto 40px;
            position: relative;
            background: white;
            transition: opacity 0.4s linear;
            opacity: 0;
    
            @media all and (min-width: 47em) {
                margin: -10px 0 0;
            }
        }

        &:hover {
            .border-bottom {
                background: var(--background-gradient-color-orange);
                opacity: 1;
            }
        }
    }

    &.gray {
        background: rgba(244, 244, 244, 0.5);

        a.related-library-item .related-library-container {
            background: white;
        }
    }
}