.link_box:hover {
    z-index: 100;
    position: relative;
}

.field__item.text + .field__item.link_box,
.field__item.link_box + .field__item.text {
    margin-top: var(--spacing-40);
}

.paragraph--type--link-box {
    background-color: var(--color-red);
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    transform: scale(1);
    transition: all ease-in-out .3s;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.0);
}

.paragraph--type--link-box:hover {
    transform: scale(1.1);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
    z-index: 10;
}

/* Box Headline */
.paragraph--type--link-box .box-title {
    font-size: var(--font-size-h3);
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: 3vw;
    left: 3vw;
    width: 50%;
    z-index: 4;
}

/* Inclined darker background */
.paragraph.columns.columns--3 .paragraph--type--link-box:before {
    display: block;
    content: '';
    height: 200%;
    width: 100%;
    background-color: var(--color-red-dark);
    position: absolute;
    transform: rotate(30deg);
    top: -20%;
    right: -65%;
    will-change: right;
    transition: right ease-in-out .5s;
    z-index: 3;
}

/* BG Pattern */

.paragraph.paragraph--type--link-box:after {
    display: block;
    content: '';
    background-image: url(../images/bg-pattern.svg);
    background-repeat: no-repeat;
    background-size: 54rem;
    background-position: top center;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .3;
    filter: grayscale(1);
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: luminosity;
}

/* Image */

.box-icon {
    width: 20%;
    position: absolute;
    bottom: 2vw;
    right: 2vw;
    will-change: bottom;
    transition: bottom ease-in-out .5s .3s;
    aspect-ratio: 1/1;
    z-index: 4;
}

.paragraph--type--link-box .box-icon img {
    aspect-ratio: 1/1;
    height: 100%;
    width: auto;
    margin: auto;
    will-change: opacity;
    transition: opacity ease-in-out .3s .3s;
}

/* Link */
.paragraph--type--link-box .field--name-field-link-destination {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.paragraph--type--link-box .field--name-field-link-destination a {
    display: block;
    text-indent: -99999px;
    height: 100%;
}

/* When Paragraph is used in 4 or 5 columns */
:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box {
    display: flex;
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box .box-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--font-size-h5);
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box .box-icon {
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box .box-icon svg {
    width: 100%;
    max-height: 5rem;
}

.col-size-50 .paragraph--type--link-box .box-title {
    font-size: var(--font-size-h2);
}


@media (max-width: 1280px) { 
    .paragraph--type--link-box .box-title {
        font-size: var(--font-size-h4);
    }
    
    :is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box .box-title {
        height: 3.5rem;
    }
}

@media (max-width: 991px) {
    :is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box .box-title {
        font-size: calc(var(--font-size-h5) / 1.25);
        height: 3rem;
    }
    .col-size-50 .paragraph--type--link-box .box-title {
        font-size: var(--font-size-h3);
    }
}

@media (max-width: 767px) {
    .box-icon {
        bottom: 1.5rem;
        right: 2rem;
    }

    .paragraph--type--link-box .box-title {
        font-size: var(--font-size-h2);
        top: 2rem;
        left: 2rem;
    }
}

@media (max-width: 500px) {
    :is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph--type--link-box .box-title {
        font-size: 1.5rem;
    }
    .col-size-50 .paragraph--type--link-box .box-title {
        font-size: var(--font-size-h4);
    }
}

/* NOTICE: Different styles depending on amount of parent columns (1-3 and 4-5) */

/* HANDLING FOR0 1 TO 3 COLUMNS */


/* HANDLING FOR 4 AND 5 COLUMNS */
:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box {
    display: flex;
    flex-direction: column;

    padding: .5rem;

    background-color: var(--color-red);
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    transform: scale(1);
    transition: all ease-in-out .3s;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.0);
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box > div {
    z-index: 4;
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-icon {
    height: 70%;
    padding: .5rem;
    /* OVERRULE STYLES FOR 1 TO 3 COLUMNS */
    width: unset;
    position: unset;
    will-change: unset;
    transition: unset;
    aspect-ratio: unset;
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-icon div,
:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-icon svg {
    height: 100%;
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-icon .field--type-image .field__item {
    /* Overrule column styles */
    margin-top: 0 !important;
    display: flex;
}

:is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-title {
    text-align: center;
    font-size: var(--font-size-h5);
    font-weight: 700;
    color: #fff;
    width: 100%;
    height: 100%;

    /* OVERRULE STYLES FOR 1 TO 3 COLUMNS */
    position: unset;
}

@media (max-width: 767px) {
    :is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-icon svg {
        max-height: unset;
    }

    :is(.paragraph.columns.columns--4, .paragraph.columns.columns--5) .paragraph.link-box .box-title {
        font-size: var(--font-size-h1);
    }
}