.section-inner {
  max-width: 96%;
  margin: -9px auto;
  width: 100%;
}


.content::before {
  content: "";
  background: #fff;
  bottom: 0;
  left: -10000px;
  position: absolute;
  right: 23.5%;
  top: 0;
  z-index: -9999;
}


.sidebar {
  float: right;
  padding: 50px 0 50px 3.75%;
  width: 25.5%;
}


.wrapper::after {
  background: #f1f1f1;
  border-left: 1px solid rgba(0,0,0,0.2);
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 23.5%;
  z-index: -1;
}
.wp-block-image img {
  height: auto;
  max-width: 105%;
  vertical-align: bottom;
  width: 105%;
}


.header-wrapper {
  background: #6c427e;
  height: 6rem;
}
.content {
    float: left;
    width: 74%;
}
.single-post .post-inner {
    float: none;
    width: 75%;
    position: relative;
    z-index: 5;
}
.single-post .post-meta {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.single-post .post-inner {
		width: 100%;
	}

@media (max-width: 780px) {
.single-post .post-meta {
    position: relative;
	}
}

@media (max-width: 400px) {
	.single-post .post-meta {
		position: relative;
}
}

@media (max-width: 850px) {
	.sidebar {
		width: 100% !important;
		}
	.content {
    float: none !important;
    width: 100% !important;
	}
}

@media (max-width: 850px) {
.wrapper:after {
    width: 0px !important;
}
	}

@media screen and (max-width: 850px) {

    /* Force section-inner to not exceed screen */
    .section-inner {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    /* Wrapper must not overflow */
    .wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Remove the sidebar pseudo-element background */
    .wrapper::after,
    .wrapper:after {
        display: none !important;
        content: none !important;
        width: 0 !important;
    }

    /* Content area full width */
    .content {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove content::before pseudo-element */
    .content::before,
    .content:before {
        display: none !important;
        content: none !important;
    }

    /* Sidebar full width below content */
    .sidebar {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
        box-sizing: border-box !important;
    }

    /* Post inner area full width */
    .single-post .post-inner {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    /* Post meta - not absolute positioned */
    .single-post .post-meta {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        float: none !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    /* Post content must stay within bounds */
    .post-content,
    .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    /* All images responsive */
    img,
    figure,
    .wp-block-image,
    .wp-caption {
        max-width: 100% !important;
        height: auto !important;
    }

    .wp-block-image {
        width: 100% !important;
    }

    /* Tables scrollable */
    figure.wp-block-table,
    table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Code blocks wrap */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-break: break-all !important;
    }

    /* Long URLs break */
    .post-content a,
    .entry-content a {
        word-break: break-all !important;
    }

    /* Every direct child of content areas respects width */
    .post-content > *,
    .entry-content > *,
    .post-inner > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Override any inline min-width styles */
    .post-content [style*="min-width"],
    .entry-content [style*="min-width"] {
        min-width: 0 !important;
    }

    /* Header area */
    .header-wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .header {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .header .section-inner {
        max-width: 100% !important;
    }

    /* YellowPencil header image */
    .header-wrapper .header {
        background-size: cover !important;
        background-position: center !important;
    }

    /* Footer */
    .site-footer .section-inner {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}