_media-box.scss

.media-box {
    $root: &;
    display: flex;
    flex-direction: column;
    border: 1px solid $color--mid-grey;

    @include media-query(mob-landscape) {
        flex-direction: row;
    }

    &--reverse {
        border: 0;

        @include media-query(mob-landscape) {
            flex-direction: row-reverse;
        }
    }

    &--bottom-space {
        margin-bottom: 1rem;

        @include media-query(tablet-landscape) {
            margin-bottom: 3rem;
        }
    }

    &__image-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 170px;
        background-repeat: no-repeat;
        background-size: cover;

        @include media-query(mob-landscape) {
            width: 210px;
            height: 210px;
        }

        &::before {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(27, 27, 27, 0.8);
            content: '';
        }
    }

    &__image {
        &--large {
            width: 100%;
            height: 150px;
            object-fit: cover;

            @include media-query(mob-landscape) {
                width: auto;
                height: auto;
                object-fit: initial;
            }
        }

        &--small {
            z-index: 10;
            max-width: 105px;
            border: 0 solid;
            box-sizing: content-box;
            transition: border $transition;

            #{$root}:hover & {
                border: 10px solid $color--light-blue;
                transition: border $transition;
            }

            .media-box--reverse:hover & {
                border: 0;
            }
        }
    }

    &__content {
        flex: 1;
        padding: 20px 30px;
        color: $color--light-blue;
        background-color: $color--white;
        transition: color, background-color, $transition;

        #{$root}:hover & {
            color: $color--white;
            background-color: $color--light-blue;
        }

        .media-box--reverse & {
            padding: 20px 0 0;
            color: $color--default;

            @include media-query(mob-landscape) {
                padding: 0 20px 0 0;
            }
        }

        .media-box--reverse:hover & {
            color: $color--default;
            background-color: inherit;
        }

        @include media-query(mob-landscape) {
            padding: 15px 20px;
        }
    }

    &__teaser {
        display: none;
        margin: 0;
        font-size: 16px;
        font-weight: $weight--normal;
        color: $color--dark-grey;
        transition: color $transition;

        #{$root}:hover & {
            color: $color--white;
        }

        .media-box--reverse & {
            @include responsive-font-sizes(15px, map-get($font-sizes, epsilon));
            display: block;

            &--projectpage-introduction {
                @include responsive-font-sizes(18px, map-get($font-sizes, delta));
            }
        }

        .media-box--reverse:hover & {
            color: $color--default;
        }

        @include media-query(mob-landscape) {
            display: block;
        }

        @include media-query(tablet-portrait) {
            display: none;
        }

        @include media-query(tablet-landscape) {
            display: block;
        }
    }

    &__default-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 210px;
        height: 210px;
        background-color: $color--light-blue;

        > svg {
            width: 80px;
            height: 70px;
            fill: $color--white;
        }

        &--small {
            width: 105px;
            height: 105px;
            background-color: $color--white;
            border: 0 solid;
            box-sizing: content-box;
            transition: border $transition;

            #{$root}:hover & {
                border: 10px solid $color--light-blue;
                transition: border $transition;
            }

            > svg {
                width: 50px;
                height: 50px;
                fill: $color--light-blue;
            }
        }
    }

    &__category {
        margin-bottom: 5px;
        color: $color--default;
    }

    &__job-title {
        margin: 5px 0 0;
        color: $color--default;
    }

    &__category,
    &__job-title {
        transition: color $transition;

        #{$root}:hover & {
            color: $color--white;
        }
    }

}