/**
 * Text block
 * ----------------------------------------------------------------------------
 */

/**
 * 1. Necessary to position the block content on top of the fade.
 */

.block__inner {
    position: relative; /* 1 */
}

.block__title {
    font-size: rem-calc(40);
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: rem-calc(15);

    @include breakpoint(medium) {
        margin-bottom: rem-calc(24);
    }

    @include breakpoint(small only) {
        font-size: rem-calc(30);
    }

    .block--title-large & {
        font-size: rem-calc(60);
        font-family: $font-montserrat;
        font-weight: 900;
        line-height: 1;
        text-transform: uppercase;

        @include breakpoint(medium) {
            font-size: rem-calc(90);
        }

        @include breakpoint(large) {
            font-size: rem-calc(130);
        }
    }
}

.block__link {
    display: inline-block;
    margin: $spacing--large 0 0;
    font-weight: 500;
    font-size: rem-calc(16);

    &:not(.button)::after {
        @include add-arrow;

        margin-left: $spacing--xsmall;
    }

    @include link-style();

    &.button--white {
        color: $white;
        &:hover, &:focus {
            color: $black;
        }
    }

    .block--white &.block__link--link {
        color: $color-white;

        &::after {
            @include add-arrow($color-white);
        }
    }
}
.block__figure {
    margin-top: $spacing--xlarge;
    figure {
        figcaption {
            font-size: rem-calc(11);
            line-height: rem-calc(16);
            margin-top: $spacing--small;
        }
    }
}

.block__usps {
    margin-top: $spacing--large;
    @include breakpoint(medium) {
        margin-top: $spacing--xlarge;
    }
    @include breakpoint(large) {
        margin-top: $spacing--xxlarge;
    }
    picture {
        display: block;
        width: 100%;
    }
    img {
        width: 100%;
        margin: 0 auto;
        display: block;
        box-shadow: $shadow;
    }
}

.block--products + .block--text {
    padding-top: 0;
}

/**
 * Add an optional fade to the block.
 */

.block--fade {
    background-size: cover;
    background-position: right center;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to right, rgba($color-white, 1) 30%, rgba($color-white, 0) 100%);
    }

    /**
     * Switch the fade position according to text position.
     */

    &.block--right {
        background-position: left center;

        &::before {
            background: linear-gradient(to left, rgba($color-white, 1) 40%, rgba($color-white, 0) 100%);
        }
    }
}

/**
 * Background color.
 */

.block--bg-color--white {
    background-color: $white;
}
.block--bg-color--gray {
    background-color: $color-gray-5;
}


/**
 * Text color of the block.
 */

.block--white {
    color: $color-white;
}

/**
 * Spacing.
 */

.block--spacing-large {
    padding: $spacing--xxxlarge 0;
}

.block--has-image {
    padding: 0;

    .block__title {
        font-size: rem-calc(20);
        line-height: rem-calc(28);
        margin-bottom: rem-calc(10);
        @include breakpoint(medium) {
            margin-bottom: rem-calc(32);
        }
        @include breakpoint(large) {
            font-size: rem-calc(40);
            line-height: rem-calc(40);
            margin-bottom: rem-calc(40);
        }
    }

    .block__image {
        position: relative;
        padding-bottom: 62%;
        background-size: cover;
        background-position: right center;

        @include breakpoint(medium) {
            padding-bottom: 56.25%;
        }

        @include breakpoint(large) {
            display: none;
        }
    }


    .block__wrapper {
        padding: $spacing--large 0;


        @include breakpoint(medium) {
            padding:$spacing--xlarge 0;
        }
    }

    @include breakpoint(medium only) {
        .row {
            justify-content: center;
        }
    }

    @include breakpoint(medium down) {
        background-image: none !important;
    }

    @include breakpoint(large) {
        padding: $spacing--xxlarge 0;
        &.block--spacing-large {
            padding: $spacing--xxxlarge 0;
        }
        .block__wrapper {
            padding: 0;
        }
    }
}

.block--hero {
    padding: $spacing--xxxlarge 0;
    text-align: center;

    .block__title {
        font-size: rem-calc(40);
        line-height: rem-calc(48);
    }

    @include breakpoint(medium) {
        padding: 150px 0 150px 0;
        text-align: left;
    }

    @include breakpoint(large) {
        padding: 200px 0;
        .block__title {
            font-size: rem-calc(60);
            line-height: rem-calc(65);
        }
    }

    @include breakpoint(small only) {
        .block__title.text-left {
            text-align: center;
        }
        .block__link {
            margin-top: 23px;
        }
    }

}
