/* Module: Interior - Content Blocks
----------------------------------------------- */

.content-blocks {
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    max-width: 1440px;
    margin: 0 auto;

    &--left {
        flex: 0 100%;
        position: relative;
        display: none;

        @include desktop() {
            flex: 1;
            display: block;
        }
    }

    &--right {
        flex: 0 100%;
        display: flex;
        flex-flow: row wrap;

        @include desktop() {
            flex: 0 75%;
        }

        @include desktop-lg() {
            flex: 0 50%;
        }
    }
}

.block-item {
    position: relative;
    width: 100%;

    @include mobile() {
        width: 50%;
    }

    .content-blocks--left & {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    &:first-child {
        flex-grow: 2;
    }

    img {
        display: block;
        width: 100%;
        height: auto;

        @include mobile() {
            display: none;
        }
    }

    &--content {
        padding: 60px 30px 60px;

        @include tablet() {
            padding: 60px 60px 90px;
        }
    }

    &__headline {
        text-transform: uppercase;
        font-size: rem-calc(20px);
        display: block;
        margin-bottom: 12px;
        font-weight: 600;
    }

    &__link {
        position: absolute;
        right: 30px;
        bottom: 30px;

        .icon {
            fill: $white;
            width: 24px;
            height: 24px;
            display: block;
        }
    }
}
