.newroads-media-text-wrapper {
    gap: 1rem;
    margin: 3rem auto;
    max-width: 1400px;
    padding: 0 1rem;
}

.newroads-media-text-wrapper .wp-block-column .wp-block-image {
    margin-bottom: 0;
}

.newroads-media-text-wrapper h2.wp-block-heading {
    color: var(--color-primary-800);
    font-size: 1.8125rem;
    font-variation-settings: "wght" 750, "wdth" 80;
    line-height: 2.25rem;
}

.newroads-media-text-wrapper p {
    margin-bottom: 0.5rem;
}

.newroads-media-text-wrapper .wp-element-button {
    background-color: var(--color-primary-500);
    border: 1px solid var(--color-primary-500);
    border-radius: 0.25rem;
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.12) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    padding: 0.75rem 1.125rem;
    transition: all 0.5s ease;
}

.newroads-media-text-wrapper .wp-element-button:hover {
    background-color: var(--white);
    color: var(--color-primary-500);
}

/* Container for image and background */
.skewed-frame {
    left: 0.625rem;
    max-width: calc(100% - 30px);
    position: relative;
    z-index: 0;
}

/* Blue skewed background that extends behind the image */
.skewed-frame::before {
    background-color: hsla(236, 84%, 22%, 1);
    background-image:
        radial-gradient(at 51% 33%, hsla(220, 74%, 29%, 1) 0, transparent 50%),
        radial-gradient(at 30% 0%, hsla(236, 84%, 22%, 1) 0, transparent 50%),
        radial-gradient(at 39% 96%, hsla(236, 84%, 22%, 1) 0, transparent 50%),
        radial-gradient(at 65% 0%, hsla(208, 96%, 25%, 1) 0, transparent 50%),
        radial-gradient(at 100% 61%, hsla(137, 98%, 27%, 1) 0, transparent 50%),
        radial-gradient(at 100% 100%, hsla(137, 98%, 27%, 1) 0, transparent 50%),
        radial-gradient(at 100% 1%, hsla(137, 98%, 27%, 1) 0, transparent 50%);
    border-radius: 8px;
    content: "";
    inset: 0; /* full coverage of the parent */
    position: absolute;
    transform: skew(-5deg);
    z-index: 0;
}

.skewed-frame .wp-block-image {
    transform: skew(-5deg);
}

/* Image overlaps the background */
.skewed-frame img {
    border-radius: 8px;
    display: block;
    height: auto;
    position: relative;
    right: -8px;
    top: -8px;
    width: 100%;
    z-index: 1;
}


@media (max-width: 1023px) {

    .newroads-media-text-wrapper {
        flex-direction: column-reverse;
    }
}

@media (max-width: 1399px) {

    .newroads-media-text-wrapper {
        padding: 0 2.5rem;
    }
}

@media (min-width: 768px) {

    .newroads-media-text-wrapper,
    .newroads-media-text-wrapper .wp-block-group.is-vertical {
        gap: 1.5rem;
    }

    .newroads-media-text-wrapper h2.wp-block-heading {
        font-size: 2.625rem;
        line-height: 3.25rem;
    }

    .newroads-media-text-wrapper .wp-element-button {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }

    .skewed-frame {
        left: 1.625rem;
        max-width: calc(100% - 66px);
    }

    .skewed-frame img {
        right: -16px;
        top: -16px;
    }
}

@media (min-width: 1400px) {

    .newroads-media-text-wrapper {
        gap: 9rem;
        padding: 0;
    }
}