Info Box: Default

.c-info-box {
    &--author {
        border-bottom: rem-calc(2) $color-grey-lightest solid;
        clear: both;
        margin-bottom: rem-calc(28);
        min-height: rem-calc(80);
        overflow: auto;
        position: relative;
        width: 100%;

        .c-info-box__content {
            float: left;
            padding-bottom: rem-calc(6);
            width: 50%;

            p {
                line-height: rem-calc(22);
            }

            @include breakpoint(large) {
                width: 100%;
            }
        }

        .c-info-box__media {
            bottom: 0;
            float: right;
            position: absolute;
            right: 0;

            @include breakpoint(large) {
                position: relative;
            }
        }

        .c-info-box__title,
        .c-info-box__text {
            margin-bottom: 0;
        }

        .c-info-box__image {
            max-height: rem-calc(80);
            width: auto;
        }

        @include breakpoint(large) {
            margin-bottom: 0;
        }
    }

    &--article-author {
        background-color: $color-grey-lightest;
        padding: rem-calc(18);
        width: 100%;

        @include breakpoint(medium) {
            padding: rem-calc(25) rem-calc(33);
            width: 458px;
        }

        @include breakpoint(large) {
            float: right;
            padding: rem-calc(30) rem-calc(40);
            width: 100%; // 370px before but adapted to final position below text
        }

        figure {
            align-content: flex-end;
            align-items: flex-end;
            background-color: $color-white;
            border-radius: 50%;
            display: flex;
            flex-flow: column wrap;
            height: 77px;
            justify-content: flex-end;
            margin: 0;
            overflow: hidden;
            width: 77px;

            @include breakpoint(medium) {
                height: 100px;
                width: 100px;
            }
        }

        figure + figcaption {
            margin-left: rem-calc(20);
        }

        .btn {
            &:hover,
            &:focus {
                .c-info-box__title {
                    color: currentColor;
                }
            }
        }

        .c-info-box {
            &__image {
                height: 100%; // ok, because we only have landscape images.
                max-width: none;
            }

            &__media {
                @include clearfix;

                align-items: center;
                display: flex;
            }

            &__title {
                font-size: rem-calc(23);
                font-weight: 700;
                line-height: rem-calc(24);
                margin: 0;
                transition: color .25s;
            }

            &__text {
                font-size: rem-calc(15);
                margin: 0;
            }

            &__content p {
                font-size: rem-calc(16);
                font-weight: 300;
                line-height: rem-calc(23);
                margin-bottom: .8rem;

                :first-child {
                    margin: rem-calc(16) 0 rem-calc(18);
                }

                @include breakpoint(large) {
                    margin: rem-calc(28) 0 rem-calc(21);
                }
            }
        }
    }
}