/* =====================================================
   VBlink HR Consultants
   BLOG POST / ARTICLE PAGE
===================================================== */


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --post-primary: #2f54eb;

    --post-primary-dark: #1d3fc4;

    --post-primary-light: #5b8cff;

    --post-secondary: #0f4c81;

    --post-text: #1f2937;

    --post-heading: #172033;

    --post-muted: #6b7280;

    --post-light-text: #9ca3af;

    --post-background: #f5f7fb;

    --post-white: #ffffff;

    --post-border: #e5e7eb;

    --post-border-light: #edf0f5;

    --post-shadow:
        0 10px 35px rgba(20, 40, 80, 0.08);

    --post-shadow-hover:
        0 18px 45px rgba(20, 40, 80, 0.14);

    --post-radius: 16px;

    --post-radius-small: 10px;

    --post-transition:
        all 0.3s ease;

}


/* =====================================================
   GLOBAL
===================================================== */

.post-page {

    width: 100%;

    background:
        var(--post-background);

    color:
        var(--post-text);

    font-family:
        "Poppins",
        sans-serif;

}


/* =====================================================
   REMOVE DEFAULT LINK DECORATION
===================================================== */

.post-page a {

    text-decoration: none;

}


/* =====================================================
   ARTICLE HERO
===================================================== */

.post-hero {

    position: relative;

    width: 100%;

    min-height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0f4c81,
            #2f54eb
        );

}


/* =====================================================
   HERO IMAGE
===================================================== */

.post-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}


.post-hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* =====================================================
   HERO OVERLAY
===================================================== */

.post-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            135deg,
            rgba(5, 27, 58, 0.92),
            rgba(25, 66, 155, 0.78)
        );

}


/* =====================================================
   HERO CONTENT
===================================================== */

.post-hero-content {

    position: relative;

    z-index: 3;

    width: min(
        1100px,
        92%
    );

    margin: 0 auto;

    text-align: center;

    color: var(--post-white);

    padding:
        100px 20px 70px;

}


/* =====================================================
   CATEGORY
===================================================== */

.post-category {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        7px 16px;

    margin-bottom: 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    border-radius:
        50px;

    background:
        rgba(255, 255, 255, 0.12);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        0.4px;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        var(--post-transition);

}


.post-category:hover {

    background:
        rgba(255, 255, 255, 0.22);

    transform:
        translateY(-2px);

}


/* =====================================================
   HERO TITLE
===================================================== */

.post-hero-content h1 {

    max-width:
        1000px;

    margin:
        0 auto 24px;

    color:
        #ffffff;

    font-size:
        clamp(
            32px,
            5vw,
            60px
        );

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -1px;

    text-shadow:
        0 4px 20px
        rgba(0, 0, 0, 0.25);

}


/* =====================================================
   POST META
===================================================== */

.post-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    color:
        rgba(255, 255, 255, 0.88);

    font-size:
        14px;

}


.post-meta-separator {

    opacity:
        0.45;

}


/* =====================================================
   ARTICLE CONTAINER
===================================================== */

.post-container {

    width:
        min(
            1200px,
            92%
        );

    margin:
        30px auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap:
        45px;

    align-items:
        start;

}


/* =====================================================
   ARTICLE
===================================================== */

.post-article {

    min-width:
        0;

    padding:
        45px;

    background:
        var(--post-white);

    border:
        1px solid
        var(--post-border-light);

    border-radius:
        var(--post-radius);

    box-shadow:
        var(--post-shadow);

}


/* =====================================================
   ARTICLE EXCERPT
===================================================== */

.post-excerpt {

    margin-bottom:
        35px;

    padding:
        22px 25px;

    border-left:
        5px solid
        var(--post-primary);

    background:
        linear-gradient(
            135deg,
            #f3f6ff,
            #f8faff
        );

    border-radius:
        0 12px 12px 0;

    color:
        #46546b;

    font-size:
        18px;

    line-height:
        1.8;

    font-weight:
        500;

}


/* =====================================================
   TINYMCE ARTICLE CONTENT
===================================================== */

.post-content {

    color:
        var(--post-text);

    font-size:
        16px;

    line-height:
        1.85;

    overflow-wrap:
        break-word;

    word-wrap:
        break-word;

}


/* =====================================================
   PARAGRAPHS
===================================================== */

.post-content p {

    margin:
        0 0 22px;

}


/* =====================================================
   HEADINGS
===================================================== */

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {

    margin-top:
        35px;

    margin-bottom:
        18px;

    color:
        var(--post-heading);

    font-weight:
        700;

    line-height:
        1.3;

}


/* =====================================================
   H1
===================================================== */

.post-content h1 {

    font-size:
        34px;

}


/* =====================================================
   H2
===================================================== */

.post-content h2 {

    position:
        relative;

    padding-left:
        18px;

    font-size:
        29px;

}


.post-content h2::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        5px;

    width:
        5px;

    height:
        calc(100% - 10px);

    border-radius:
        5px;

    background:
        linear-gradient(
            to bottom,
            var(--post-primary),
            var(--post-primary-light)
        );

}


/* =====================================================
   H3
===================================================== */

.post-content h3 {

    font-size:
        24px;

}


/* =====================================================
   H4
===================================================== */

.post-content h4 {

    font-size:
        21px;

}


/* =====================================================
   H5
===================================================== */

.post-content h5 {

    font-size:
        18px;

}


/* =====================================================
   H6
===================================================== */

.post-content h6 {

    font-size:
        16px;

}


/* =====================================================
   FIRST HEADING
===================================================== */

.post-content > h1:first-child,
.post-content > h2:first-child,
.post-content > h3:first-child {

    margin-top:
        0;

}


/* =====================================================
   STRONG / BOLD
===================================================== */

.post-content strong,
.post-content b {

    font-weight:
        700;

    color:
        #16213a;

}


/* =====================================================
   ITALIC
===================================================== */

.post-content em,
.post-content i {

    font-style:
        italic;

}


/* =====================================================
   UNDERLINE
===================================================== */

.post-content u {

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;

}


/* =====================================================
   LINKS
===================================================== */

.post-content a {

    color:
        var(--post-primary);

    font-weight:
        500;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;

    transition:
        var(--post-transition);

}


.post-content a:hover {

    color:
        var(--post-primary-dark);

}


/* =====================================================
   UNORDERED LIST
===================================================== */

.post-content ul {

    margin:
        0 0 25px;

    padding-left:
        30px;

}


/* =====================================================
   ORDERED LIST
===================================================== */

.post-content ol {

    margin:
        0 0 25px;

    padding-left:
        30px;

}


/* =====================================================
   LIST ITEMS
===================================================== */

.post-content li {

    margin-bottom:
        9px;

    padding-left:
        5px;

}


/* =====================================================
   NESTED LISTS
===================================================== */

.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {

    margin-top:
        8px;

    margin-bottom:
        8px;

}


/* =====================================================
   BLOCKQUOTE
===================================================== */

.post-content blockquote {

    position:
        relative;

    margin:
        30px 0;

    padding:
        25px 30px 25px 35px;

    border:
        0;

    border-left:
        5px solid
        var(--post-primary);

    border-radius:
        0 12px 12px 0;

    background:
        #f4f7ff;

    color:
        #4b5b73;

    font-size:
        18px;

    font-style:
        italic;

    line-height:
        1.8;

}


/* =====================================================
   BLOCKQUOTE PARAGRAPH
===================================================== */

.post-content blockquote p {

    margin:
        0;

}


/* =====================================================
   HORIZONTAL RULE
===================================================== */

.post-content hr {

    margin:
        40px 0;

    border:
        0;

    border-top:
        1px solid
        var(--post-border);

}


/* =====================================================
   CODE
===================================================== */

.post-content code {

    padding:
        3px 7px;

    border-radius:
        5px;

    background:
        #f1f3f7;

    color:
        #c7254e;

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size:
        14px;

}


/* =====================================================
   PRE
===================================================== */

.post-content pre {

    overflow-x:
        auto;

    margin:
        30px 0;

    padding:
        22px;

    border-radius:
        12px;

    background:
        #172033;

    color:
        #ffffff;

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size:
        14px;

    line-height:
        1.7;

}


/* =====================================================
   PRE CODE
===================================================== */

.post-content pre code {

    padding:
        0;

    background:
        transparent;

    color:
        inherit;

    font-size:
        inherit;

}


/* =====================================================
   IMAGES
===================================================== */

.post-content img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

    margin:
        30px auto;

    border-radius:
        12px;

    box-shadow:
        0 8px 25px
        rgba(20, 40, 80, 0.10);

}


/* =====================================================
   IMAGE ALIGNMENT
   TinyMCE COMMON CLASSES
===================================================== */

.post-content img.alignleft {

    float:
        left;

    margin:
        8px 30px 20px 0;

}


.post-content img.alignright {

    float:
        right;

    margin:
        8px 0 20px 30px;

}


.post-content img.aligncenter {

    display:
        block;

    margin:
        30px auto;

}


/* =====================================================
   FIGURE
===================================================== */

.post-content figure {

    margin:
        30px 0;

}


.post-content figure img {

    margin:
        0 auto;

}


/* =====================================================
   FIGCAPTION
===================================================== */

.post-content figcaption {

    margin-top:
        10px;

    color:
        var(--post-muted);

    text-align:
        center;

    font-size:
        13px;

    font-style:
        italic;

}


/* =====================================================
   TABLE WRAPPER
===================================================== */

.post-content table {

    width:
        100%;

    margin:
        30px 0;

    border-collapse:
        collapse;

    border-spacing:
        0;

    background:
        #ffffff;

    font-size:
        15px;

}


/* =====================================================
   TABLE CELLS
===================================================== */

.post-content table th,
.post-content table td {

    padding:
        13px 15px;

    border:
        1px solid
        var(--post-border);

    text-align:
        left;

    vertical-align:
        top;

}


/* =====================================================
   TABLE HEADER
===================================================== */

.post-content table th {

    background:
        linear-gradient(
            135deg,
            var(--post-primary),
            var(--post-primary-light)
        );

    color:
        #ffffff;

    font-weight:
        600;

}


/* =====================================================
   TABLE ROWS
===================================================== */

.post-content table tr:nth-child(even) td {

    background:
        #f8faff;

}


/* =====================================================
   TABLE HOVER
===================================================== */

.post-content table tr:hover td {

    background:
        #f1f5ff;

}


/* =====================================================
   RESPONSIVE TABLE
===================================================== */

.post-content .table-responsive {

    width:
        100%;

    overflow-x:
        auto;

    margin:
        30px 0;

}


/* =====================================================
   VIDEO
===================================================== */

.post-content video {

    display:
        block;

    width:
        100%;

    max-width:
        900px;

    height:
        auto;

    margin:
        30px auto;

    border-radius:
        12px;

    background:
        #000000;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.12);

}


/* =====================================================
   VIDEO EMBED / IFRAME
===================================================== */

.post-content iframe {

    display:
        block;

    width:
        100%;

    max-width:
        900px;

    min-height:
        500px;

    margin:
        30px auto;

    border:
        0;

    border-radius:
        12px;

    box-shadow:
        0 10px 30px
        rgba(20, 40, 80, 0.12);

}


/* =====================================================
   EMBED RESPONSIVE WRAPPER
===================================================== */

.post-content .video-container,
.post-content .video-wrapper {

    position:
        relative;

    width:
        100%;

    max-width:
        900px;

    margin:
        30px auto;

    overflow:
        hidden;

    border-radius:
        12px;

    aspect-ratio:
        16 / 9;

}


.post-content .video-container iframe,
.post-content .video-wrapper iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    margin:
        0;

}


/* =====================================================
   AUDIO
===================================================== */

.post-content audio {

    width:
        100%;

    margin:
        25px 0;

}


/* =====================================================
   MARK / HIGHLIGHT
===================================================== */

.post-content mark {

    padding:
        2px 5px;

    border-radius:
        4px;

}


/* =====================================================
   SMALL TEXT
===================================================== */

.post-content small {

    font-size:
        13px;

}


/* =====================================================
   SUBSCRIPT / SUPERSCRIPT
===================================================== */

.post-content sub,
.post-content sup {

    line-height:
        0;

}


/* =====================================================
   CLEAR FLOATS
===================================================== */

.post-content::after {

    content:
        "";

    display:
        table;

    clear:
        both;

}


/* =====================================================
   ARTICLE FOOTER
===================================================== */

.post-article-footer {

    margin-top:
        45px;

    padding-top:
        25px;

    border-top:
        1px solid
        var(--post-border);

}


/* =====================================================
   POST TAG / CATEGORY
===================================================== */

.post-tags {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    color:
        var(--post-muted);

    font-size:
        14px;

}


.post-tags span {

    font-weight:
        600;

}


.post-tags a {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 12px;

    border-radius:
        50px;

    background:
        #eef2ff;

    color:
        var(--post-primary);

    font-weight:
        600;

    transition:
        var(--post-transition);

}


.post-tags a:hover {

    background:
        var(--post-primary);

    color:
        #ffffff;

}


/* =====================================================
   SIDEBAR
===================================================== */

.post-sidebar {

    position:
        sticky;

    top:
        110px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

}


/* =====================================================
   SIDEBAR CARD
===================================================== */

.sidebar-card {

    padding:
        25px;

    background:
        #ffffff;

    border:
        1px solid
        var(--post-border-light);

    border-radius:
        var(--post-radius);

    box-shadow:
        var(--post-shadow);

}


/* =====================================================
   BACK TO BLOG
===================================================== */

.back-to-blog {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    padding:
        13px 18px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            var(--post-primary),
            var(--post-primary-light)
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        var(--post-transition);

}


.back-to-blog:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(47, 84, 235, 0.25);

}


/* =====================================================
   SIDEBAR HEADINGS
===================================================== */

.sidebar-card h3 {

    margin:
        0 0 20px;

    color:
        var(--post-heading);

    font-size:
        19px;

    font-weight:
        700;

}


/* =====================================================
   RELATED POSTS
===================================================== */

.related-posts {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


/* =====================================================
   RELATED POST
===================================================== */

.related-post {

    display:
        flex;

    gap:
        13px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        var(--post-border);

}


.related-post:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;

}


/* =====================================================
   RELATED IMAGE
===================================================== */

.related-post-image,
.related-post-placeholder {

    flex:
        0 0 80px;

    width:
        80px;

    height:
        65px;

    overflow:
        hidden;

    border-radius:
        8px;

}


.related-post-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;

}


.related-post:hover
.related-post-image img {

    transform:
        scale(1.08);

}


/* =====================================================
   RELATED PLACEHOLDER
===================================================== */

.related-post-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            var(--post-primary),
            var(--post-secondary)
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

}


/* =====================================================
   RELATED CONTENT
===================================================== */

.related-post-content {

    min-width:
        0;

    flex:
        1;

}


.related-post-category {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--post-primary);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

}


/* =====================================================
   RELATED TITLE
===================================================== */

.related-post-content h4 {

    margin:
        0 0 5px;

    font-size:
        13px;

    line-height:
        1.45;

}


.related-post-content h4 a {

    color:
        var(--post-heading);

    transition:
        var(--post-transition);

}


.related-post-content h4 a:hover {

    color:
        var(--post-primary);

}


/* =====================================================
   RELATED DATE
===================================================== */

.related-post-content small {

    color:
        var(--post-light-text);

    font-size:
        11px;

}


/* =====================================================
   SHARE CARD
===================================================== */

.share-card {

    overflow:
        hidden;

}


/* =====================================================
   SHARE BUTTONS
===================================================== */

.share-buttons {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        9px;

}


/* =====================================================
   SHARE BUTTON COMMON
===================================================== */

.share-buttons a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        8px 12px;

    border-radius:
        8px;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        600;

    transition:
        var(--post-transition);

}


.share-buttons a:hover {

    transform:
        translateY(-2px);

}


/* =====================================================
   WHATSAPP
===================================================== */

.share-whatsapp {

    background:
        #25d366;

}


/* =====================================================
   FACEBOOK
===================================================== */

.share-facebook {

    background:
        #1877f2;

}


/* =====================================================
   LINKEDIN
===================================================== */

.share-linkedin {

    background:
        #0a66c2;

}


/* =====================================================
   ARTICLE NAVIGATION
===================================================== */

.post-navigation {

    width:
        min(
            1200px,
            92%
        );

    margin:
        0 auto 70px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


/* =====================================================
   NAVIGATION ITEM
===================================================== */

.post-navigation-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    min-height:
        110px;

    padding:
        23px;

    background:
        #ffffff;

    border:
        1px solid
        var(--post-border-light);

    border-radius:
        14px;

    box-shadow:
        var(--post-shadow);

    transition:
        var(--post-transition);

}


.post-navigation-item:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--post-shadow-hover);

}


.post-navigation-item.next {

    text-align:
        right;

}


/* =====================================================
   NAVIGATION LABEL
===================================================== */

.navigation-label {

    color:
        var(--post-primary);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.6px;

}


/* =====================================================
   NAVIGATION TITLE
===================================================== */

.post-navigation-item strong {

    color:
        var(--post-heading);

    font-size:
        15px;

    line-height:
        1.5;

}


/* =====================================================
   ERROR PAGE
===================================================== */

.post-error-page {

    min-height:
        65vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        60px 20px;

    background:
        var(--post-background);

}


/* =====================================================
   ERROR CONTAINER
===================================================== */

.post-error-container {

    width:
        min(
            600px,
            100%
        );

    padding:
        55px 35px;

    text-align:
        center;

    background:
        #ffffff;

    border:
        1px solid
        var(--post-border-light);

    border-radius:
        18px;

    box-shadow:
        var(--post-shadow);

}


/* =====================================================
   ERROR ICON
===================================================== */

.post-error-icon {

    margin-bottom:
        15px;

    color:
        var(--post-primary);

    font-size:
        65px;

    font-weight:
        700;

}


/* =====================================================
   ERROR TITLE
===================================================== */

.post-error-container h1 {

    margin:
        0 0 12px;

    color:
        var(--post-heading);

    font-size:
        30px;

}


/* =====================================================
   ERROR TEXT
===================================================== */

.post-error-container p {

    margin:
        0 auto 25px;

    max-width:
        500px;

    color:
        var(--post-muted);

    line-height:
        1.7;

}


/* =====================================================
   ERROR BUTTON
===================================================== */

.post-error-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 22px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            var(--post-primary),
            var(--post-primary-light)
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        var(--post-transition);

}


.post-error-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(47, 84, 235, 0.25);

}


/* =====================================================
   TABLET
===================================================== */

@media (
    max-width: 1000px
) {


    .post-container {

        grid-template-columns:
            minmax(0, 1fr)
            280px;

        gap:
            25px;

    }


    .post-article {

        padding:
            35px;

    }


    .post-hero {

        min-height:
            420px;

    }


    .post-hero-content {

        padding:
            90px 20px 60px;

    }


    .post-content iframe {

        min-height:
            400px;

    }

}


/* =====================================================
   TABLET / SMALL DESKTOP
===================================================== */

@media (
    max-width: 850px
) {


    .post-container {

        grid-template-columns:
            1fr;

    }


    .post-sidebar {

        position:
            static;

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        align-items:
            start;

    }


    .sidebar-card:first-child {

        grid-column:
            1 / -1;

    }


    .share-card {

        grid-column:
            1 / -1;

    }


    .post-navigation {

        grid-template-columns:
            1fr;

    }


    .post-navigation-item.next {

        text-align:
            left;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (
    max-width: 600px
) {


    .post-hero {

        min-height:
            380px;

    }


    .post-hero-content {

        width:
            94%;

        padding:
            80px 12px 50px;

    }


    .post-hero-content h1 {

        font-size:
            31px;

        line-height:
            1.2;

        letter-spacing:
            -0.4px;

    }


    .post-meta {

        font-size:
            12px;

        gap:
            7px;

    }


    .post-container {

        width:
            94%;

        margin:
            30px auto;

    }


    .post-article {

        padding:
            25px 20px;

        border-radius:
            13px;

    }


    .post-excerpt {

        padding:
            18px;

        font-size:
            16px;

        line-height:
            1.7;

    }


    .post-content {

        font-size:
            15px;

        line-height:
            1.8;

    }


    .post-content h1 {

        font-size:
            28px;

    }


    .post-content h2 {

        font-size:
            24px;

    }


    .post-content h3 {

        font-size:
            21px;

    }


    .post-content h4 {

        font-size:
            19px;

    }


    .post-content table {

        display:
            block;

        width:
            100%;

        overflow-x:
            auto;

        white-space:
            nowrap;

    }


    .post-content iframe {

        min-height:
            220px;

        border-radius:
            8px;

    }


    .post-content img {

        margin:
            25px auto;

        border-radius:
            9px;

    }


    .post-content img.alignleft,
    .post-content img.alignright {

        float:
            none;

        display:
            block;

        width:
            100%;

        max-width:
            100%;

        margin:
            25px auto;

    }


    .post-content blockquote {

        padding:
            18px 20px;

        font-size:
            15px;

    }


    .post-sidebar {

        display:
            flex;

        flex-direction:
            column;

    }


    .sidebar-card {

        padding:
            20px;

    }


    .post-navigation {

        width:
            94%;

        margin-bottom:
            45px;

    }


    .post-navigation-item {

        min-height:
            auto;

        padding:
            19px;

    }


    .post-navigation-item strong {

        font-size:
            14px;

    }


    .post-error-container {

        padding:
            40px 20px;

    }


    .post-error-icon {

        font-size:
            50px;

    }


    .post-error-container h1 {

        font-size:
            25px;

    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (
    max-width: 400px
) {


    .post-hero {

        min-height:
            350px;

    }


    .post-hero-content h1 {

        font-size:
            27px;

    }


    .post-article {

        padding:
            20px 16px;

    }


    .post-excerpt {

        font-size:
            14px;

    }


    .post-content {

        font-size:
            14px;

    }


    .post-content h2 {

        font-size:
            22px;

    }


    .post-content h3 {

        font-size:
            19px;

    }


    .post-meta-separator {

        display:
            none;

    }


}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (
    prefers-reduced-motion: reduce
) {


    .post-page *,
    .post-page *::before,
    .post-page *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}