.wp-block-post-link {
    --duration: 0.25s;
    --ease: ease-out;

    border-bottom: 1px solid transparent;
    overflow: visible;
    position: relative;
    transition: all var(--duration) var(--ease);
    transition-property: background-color, color, transform;
}

.wp-block-post-link > .wp-block-post-featured-image {
    overflow: hidden;
}

.wp-block-post-link > .wp-block-post-featured-image > .wp-post-image {
    transition: transform var(--duration) var(--ease);
    transform-origin: center;
}

.wp-block-post-link::after {
    background-color: var(--wp--preset--color--contrast);
    content: '';
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: height var(--duration) var(--ease);
    width: 100%;
}

.wp-block-post-link:has(*:hover),
.wp-block-post-link:has(.wp-block-post-link__link:hover),
.wp-block-post-link:hover {
    background-color: var(--wp--preset--color--neutral-light-2) !important;
    transform: translateY(-0.5em);

    &::after {
        height: 0.5em;
    }

    & > .wp-block-post-featured-image > .wp-post-image {
        transform: scale(1.125);
    }
}

.wp-block-outermost-social-sharing {
    text-transform: uppercase;
}

.wp-block-outermost-social-sharing-link-label {
    color: var(--wp--preset--color--contrast);
}

.wp-block-outermost-social-sharing .wp-block-outermost-social-sharing-link-anchor > svg {
    background-color: var(--wp--preset--color--neutral-light-2);
    padding: 0.25em;
    border-radius: 5px;
    transition: color 0.25s ease-out;
}

.wp-block-outermost-social-sharing .wp-block-outermost-social-sharing-link-anchor:hover > svg {
    color: var(--wp--preset--color--primary);
}

.wp-block-outermost-social-sharing .wp-block-outermost-social-sharing-link-anchor:active > svg {
    color: var(--wp--preset--color--contrast);
}

@media screen and (max-width: 781px) {
    .post-content-wrapper > .post-content-sidebar {
        order: 2;
    }

    .post-content-wrapper > .post-content {
        order: 1;
    }
}

@media screen and (max-width: 940px) {
    .wp-block-query > .is-layout-grid.columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wp-block-query > .is-layout-grid.columns-3 {
        grid-template-columns: 1fr;
    }
}
