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

.wp-block-query-pagination {
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    margin: 40px 0px;
}

.wp-block-query-pagination-numbers {
    padding: 15px 0px 15px 15px;
    margin-bottom: 0px !important;
}

.wp-block-query-pagination-numbers span,
.wp-block-query-pagination-numbers a {
    margin-right: 15px;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none !important;
}

/* 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;
}

/*Pagination*/
.wp-block-query-pagination {
    gap: 0px !important;
}
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    margin-bottom: 12px !important;
}
.wp-block-query-pagination-next-arrow.is-arrow-arrow::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: 7px;
    position: relative;
    left: -26px;
    height: 22px;
}

.wp-block-query-pagination-previous-arrow.is-arrow-arrow::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%);
    transform: rotate(180deg);
    width: 20px;
    display: inline-block;
    top: 6px;
    position: relative;
    left: -25px;
    height: 22px;
}