/**
 * Generic/text block styling
 * ----------------------------------------------------------------------------
 */

.block {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: $spacing--xxlarge 0;
    transition: background $duration--long $easing;
}

.block__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: z-index(positive);
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%) rotate(45deg);
    width: 80px;
    height: 80px;
    background-color: $color-gray-85;
    border: 4px solid $color-white;
    cursor: pointer;
    transition: all .25s ease-in-out;
    @include breakpoint(small only) {
        width: 60px;
        height: 60px;
    }

    &::before {
        @include add-arrow($color-white);
        transform: rotate(45deg);
        width: 20px;
        height: 29px;
        @include breakpoint(small only) {
            width: 15px;
            height: 22px;
        }
    }

    &:hover {
        bottom: -10px;
    }
}