.wp-block-query-no-results .wp-block-image.align-center {
    margin: 0 auto;
}

/* Tertiary Button
Will always contain an arrow forward icon –>
--------------------------------------------- */

.wp-block-post-excerpt__more-link {
    height: auto;
    background-color: transparent;
    padding: 0;
    color: var(--wp--preset--color--red-50);
}
.wp-block-post-excerpt__more-link:hover {
    color: var(--wp--custom--color--hover);
}
.wp-block-post-excerpt__more-link:active {
    color: var(--wp--custom--color--active);
}

/* TODO: Instead of hacking with the filter find an alternative to change the SVG color
Filter-hack via: https://isotropic.co/tool/hex-color-to-css-filter/
*/
.wp-block-post-excerpt__more-link::after {
    content: "";
    margin-left: var(--wp--custom--spacing--0-5-rem);
    width: var(--wp--custom--spacing--1-5-rem);
    height: var(--wp--custom--spacing--1-5-rem);
    background: url(/wp-content/themes/protektor/assets/icons/arrow_forward.svg);
    transition: all 0.2s ease-out;
    filter: invert(17%) sepia(94%) saturate(6263%) hue-rotate(358deg) brightness(94%) contrast(90%);
    width: 20px;
    display: inline-block;
    top: 6px;
    position: relative;
    height: 22px;
}
.wp-block-post-excerpt__more-link:hover::after {
    margin-left: 0.6rem;
}

.wp-block-post-excerpt__more-link:hover::after {
    filter: invert(14%) sepia(56%) saturate(6940%) hue-rotate(357deg) brightness(85%) contrast(93%);
}
.wp-block-post-excerpt__more-link:active::after {
    filter: invert(11%) sepia(69%) saturate(2786%) hue-rotate(346deg) brightness(123%) contrast(109%);
}

.wp-block-post-featured-image {
    max-height: 300px;
    overflow: hidden;
}

.wp-block-query .post h5 {
    height: 88px !important;
}
