/* blog post wrapper
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-wrapper
{
    /* variables */
    --blog-post-list-width: 30em;
    --blog-post-list-padding: 3em;
    --blog-post-list-padding-divide: calc(var(--blog-post-list-padding) / 1.5);
    --blog-post-content-width: 70em;
    --blog-post-content-padding: 5em;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;
}

/* mobile settings */
@media only screen and (max-width: 1500px)
{
    html > body .content.blog-post .blog-post-wrapper {--blog-post-list-width: 25em;}
}
@media only screen and (max-width: 1280px)
{
    html > body .content.blog-post .blog-post-wrapper
    {
        --blog-post-list-width: 20em;
        --blog-post-list-padding: 2em;
        --blog-post-content-padding: 3em;
    }
}
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-post .blog-post-wrapper {--blog-post-list-width: 100%;}
}
@media only screen and (max-width: 640px)
{
    html > body .content.blog-post .blog-post-wrapper {--blog-post-content-padding: 2em;}
}
@media only screen and (max-width: 480px)
{
    html > body .content.blog-post .blog-post-wrapper {--blog-post-content-padding: 1em;}
}





/* direct children
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-wrapper > div
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; align-self: stretch;
}





/* specific children
==================================================================================================== */

/* banner
================================================== */

/* main container */
html > body .content.blog-post .blog-post-wrapper > .blog-post-banner-wrapper
{
    /* child flex rules */
    flex-basis: 100%;
}





/* left side
================================================== */

/* main container */
html > body .content.blog-post .blog-post-wrapper > .blog-post-left-side
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; row-gap: 0; column-gap: 0;

    /* child flex rules */
    flex-basis: 100%;
}

/* if there is a sidebar */
html > body .content.blog-post .blog-post-wrapper:has( > .blog-post-right-side) .blog-post-left-side
{
    /* child flex rules */
    flex-basis: calc(100% - var(--blog-post-list-width));
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-post .blog-post-wrapper:has( > .blog-post-right-side) .blog-post-left-side {flex-basis: 100%;}
}

/* direct children */
html > body .content.blog-post .blog-post-wrapper > .blog-post-left-side > div
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; align-self: center;
}





/* right side
================================================== */

/* main container */
html > body .content.blog-post .blog-post-wrapper > .blog-post-right-side
{
    /* child flex rules */
    flex-basis: var(--blog-post-list-width);

    /* standard rules */
    padding: var(--blog-post-list-padding) var(--blog-post-list-padding) 0 var(--blog-post-list-padding);
    background: linear-gradient(to top right, var(--gainsboro-dark), var(--gainsboro-norm));
    box-shadow: 0 0 1em 0.25em rgba(0,0,0,0.15), 0 0 3em 0.5em rgba(0,0,0,0.15);
}

/* mobile settings */
@media only screen and (max-width: 1500px)
{
    html > body .content.blog-post .blog-post-wrapper > .blog-post-right-side {padding: var(--blog-post-list-padding) var(--blog-post-list-padding-divide) 0 var(--blog-post-list-padding-divide);}
}
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-post .blog-post-wrapper > .blog-post-right-side {padding: calc(var(--blog-post-content-padding) * 1.5) var(--blog-post-content-padding) 0 var(--blog-post-content-padding);}
}

/* right side background texture */
html > body .content.blog-post .blog-post-wrapper > .blog-post-right-side::before
{
    z-index: -1;
    top: 0; left: 0; display: block; float: left;
    background: url("../../../media/textures/noise-filter-black.svg") repeat center center / 10em;
    opacity: 0.035;
}




















/* banner
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner-wrapper
{
    /* variables */
    --banner-height: 55vh;

    /* standard rules */
    box-shadow: 0 0.25em 0.5em 0.15em rgba(0,0,0,0.15), 0 1em 2em 0.5em rgba(0,0,0,0.15);
}










/* banner content
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner
{
    min-height: var(--banner-height);
    color: var(--banner-text-color);
}










/* banner image/photo
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-banner-img
{
    position: absolute; top: 0; left: 0; height: 100%;
    background-repeat: no-repeat; background-size: cover; background-position: var(--banner-image-position);
}





/* background overlay */
html > body .content.blog-post .blog-post-banner .blog-post-banner-img::before
{
    z-index: 1;
    top: 0; left: 0; display: block; float: left;
    background: var(--banner-overlay-color);
}










/* info
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; row-gap: 1em; column-gap: 1em;

    /* standard rules */
    min-height: var(--banner-height); padding: 5em;
    color: inherit;
}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .content.blog-post .blog-post-banner .blog-post-info {padding: 3em;}
}
@media only screen and (max-width: 640px)
{
    html > body .content.blog-post .blog-post-banner .blog-post-info {padding: 2em;}
}
@media only screen and (max-width: 480px)
{
    html > body .content.blog-post .blog-post-banner .blog-post-info {padding: 1em;}
}

/* direct child elements */
html > body .content.blog-post .blog-post-banner .blog-post-info > div
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; align-self: center;

    /* standard rules */
    color: inherit;
}










/* nav button
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-nav
{
    /* child flex rules */
    flex-basis: 100%;

    /* standard rules */
    color: inherit;
}





/* link
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-nav a
{
    display: block; float: left; padding: 0.5em 1em;
    color: inherit;
}





/* icon
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-nav a .icon
{
    transform: scale(1);
    font-size: 2em; line-height: 1em;
    opacity: 0.5;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blog-post-banner .blog-post-nav a:hover .icon
{
    transform: scale(1.25);
    opacity: 1;
}

/* icon */
html > body .content.blog-post .blog-post-banner .blog-post-nav a .icon::before
{
    position: relative; display: block; float: left; width: auto; height: auto; content: "\f177";
    font-family: var(--fa7); font-weight: 700;
}





/* text
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-nav a .text
{
    transform: translate3d(50%,-50%,0);
    position: absolute; top: 50%; right: 0; padding: 0.5em 1em;
    text-transform: uppercase; white-space: nowrap;
    opacity: 0; visibility: hidden;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

html > body .content.blog-post .blog-post-banner .blog-post-nav a:hover .text
{
    transform: translate3d(100%,-50%,0);
    opacity: 1; visibility: visible;
}










/* tags
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-tags
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; row-gap: 0.5em; column-gap: 0.5em;

    /* child flex rules */
    flex-basis: 100%;
}

/* hide if disabled */
html > body .content.blog-post .blog-post-banner:is([data-show-tags="False"],[data-show-tags="false"]) .blog-post-tags {display: none!important;}





/* individual tags
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-tags a
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center;

    /* standard rules */
    z-index: 1;
    display: block; float: left; padding: 0.35em 0.5em 0.4em 0.5em;
    line-height: 1em;
    color: inherit;
    background: var(--banner-overlay-color);
    border-radius: 0.25em;
}

/* hover */
html > body .content.blog-post .blog-post-banner .blog-post-tags a:hover
{
    text-decoration: none;
    color: var(--white);
}





/* scaling background
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-tags a::before
{
    z-index: -1;
    transform: scaleX(0); transform-origin: right center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: inherit;
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blog-post-banner .blog-post-tags a:hover::before
{
    transform: scaleX(1); transform-origin: left center;
    opacity: 1;
}










/* title
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-title
{
    /* child flex rules */
    flex-basis: 100%;

    /* standard rules */
    font-family: var(--oswald);
}





/* heading tag
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-title :is(h1,h2,h3,h4,h5,h6)
{
    margin: 0; padding: 0;
    text-transform: uppercase;
    font-size: 3.6em; line-height: 1.35em;
    text-shadow: 0.05em 0.05em 0.15em rgba(0,0,0,0.5);
}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-title :is(h1,h2,h3,h4,h5,h6) {font-size: 3.2em;}
}
@media only screen and (max-width: 640px)
{
    html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-title :is(h1,h2,h3,h4,h5,h6) {font-size: 2.6em;}
}
@media only screen and (max-width: 480px)
{
    html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-title :is(h1,h2,h3,h4,h5,h6) {font-size: 2.2em;}
}










/* description
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-description
{
    /* child flex rules */
    flex-basis: 100%;

    /* standard rules */
    text-shadow: 0.05em 0.05em 0.15em rgba(0,0,0,0.5);
}

/* hide if disabled */
html > body .content.blog-post .blog-post-banner:is([data-show-description="False"],[data-show-description="false"]) .blog-post-description {display: none!important;}





/* paragraph
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-description p
{
    max-width: 35em;
    font-size: 0.85em;
}










/* author/date
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-date-author-wrapper
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center; row-gap: 1em; column-gap: 2em;

    /* child flex rules */
    flex-basis: auto; max-width: 100%;

    /* standard rules */
    padding: 0.5em 1em;
    background: var(--banner-overlay-color);
    border-radius: 0.25em;
}

/* hide if both author and date are disabled */
html > body .content.blog-post .blog-post-banner:is([data-show-author="False"][data-show-date="False"],[data-show-author="false"][data-show-date="false"]) .blog-post-info .blog-post-date-author-wrapper {display: none!important;}

/* direct children */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-date-author-wrapper > div
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; align-self: flex-start;

    /* standard rules */
}










/* author
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-author
{
    /* child flex rules */
    flex-basis: auto;

    /* standard rules */
    text-shadow: 0.05em 0.05em 0.15em rgba(0,0,0,0.5);
}

/* hide if disabled */
html > body .content.blog-post .blog-post-banner:is([data-show-author="False"],[data-show-author="false"]) .blog-post-info .blog-post-author {display: none!important;}

/* paragraph */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-author p {white-space: nowrap;}

/* icon */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-author p::before
{
    z-index: 1;
    position: relative; display: inline-block; float: none; width: auto; height: auto; margin: 0 0.5em 0 0; content: "\f2bd";
    font-family: var(--fa7); font-weight: 700;
}










/* date
================================================== */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-date
{
    /* variables */
    --date-gap: 0.75em;
    --dot-size: 0.25em;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: var(--date-gap);

    /* child flex rules */
    flex-basis: auto;

    /* standard rules */
    text-transform: uppercase;
    text-shadow: 0.05em 0.05em 0.15em rgba(0,0,0,0.5);
}

/* hide if disabled */
html > body .content.blog-post .blog-post-banner:is([data-show-date="False"],[data-show-date="false"]) .blog-post-info .blog-post-date {display: none!important;}





/* icon
========================= */

/* main container */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-date p {margin: 0; padding: 0;}

/* icon */
html > body .content.blog-post .blog-post-banner .blog-post-info .blog-post-date p::before
{
    position: relative; display: inline-block; float: none; width: auto; height: auto; margin: 0 0.5em 0 0; content: "\f133";
    font-family: var(--fa); font-weight: 700;
}




















/* content
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content
{
    /* child flex rules */
    flex-basis: var(--blog-post-content-width); align-self: center;

    /* standard rules */
    max-width: 100%;
}










/* sections
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content .blog-post-section
{
    padding: var(--blog-post-content-padding);
    color: var(--blog-post-section-text-color);
}

/* last section */
html > body .content.blog-post .blog-post-content > :nth-last-child(2):is(.blog-post-section) {padding: var(--blog-post-content-padding) var(--blog-post-content-padding) calc(var(--blog-post-content-padding) * 1.5) var(--blog-post-content-padding);}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body .content.blog-post .blog-post-content .blog-post-section {padding: calc(var(--blog-post-content-padding) * 2) var(--blog-post-content-padding);}
    html > body .content.blog-post .blog-post-content > :nth-last-child(2):is(.blog-post-section) {padding: calc(var(--blog-post-content-padding) * 2) var(--blog-post-content-padding) calc(var(--blog-post-content-padding) * 3) var(--blog-post-content-padding);}
}





/* background
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content .blog-post-section::before
{
    z-index: -1;
    transform: translate3d(-50%,0,0);
    top: 0; left: 50%; display: block; float: left; width: 100vw;
    background: var(--blog-post-section-background-color);
}

/* if there is a sidebar */
html > body .content.blog-post .blog-post-wrapper:has( > .blog-post-right-side) .blog-post-content .blog-post-section::before
{
    width: calc(100vw - var(--blog-post-list-width));
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-post .blog-post-wrapper:has( > .blog-post-right-side) .blog-post-content .blog-post-section::before {width: 100%;}
}




/* direct child elements
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content .blog-post-section > div
{
    margin: 0 0 2em 0;
}

/* last child */
html > body .content.blog-post .blog-post-content .blog-post-section > :last-child {margin: 0;}





/* title
==================================================================================================== */

/* main container */
/*html > body .content.blog-post .blog-post-content .blog-post-section .blog-post-section-title {}*/

/* heading tag */
html > body .content.blog-post .blog-post-content .blog-post-section .blog-post-section-title :is(h1,h2,h3,h4,h5,h6) {margin: 0; padding: 0;}





/* text
==================================================================================================== */

/* main container */
/*html > body .content.blog-post .blog-post-content .blog-post-section .blog-post-section-text {}*/





/* image
==================================================================================================== */

/* main container */
/*html > body .content.blog-post .blog-post-content .blog-post-section .blog-post-section-image {}*/

/* image tag */
html > body .content.blog-post .blog-post-content .blog-post-section .blog-post-section-image img {display: inline-block; float: none; max-width: 100%;}

/* mobile settings */
@media only screen and (max-width: 768px)
{
    html > body .content.blog-post .blog-post-content .blog-post-section .blog-post-section-image img {width: auto!important;}
}



















/* blog home link
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content .blog-home-link
{
    transform: translate3d(0,50%,0);
    position: absolute; bottom: 0; left: var(--blog-post-content-padding); display: block; float: left; width: auto; height: auto; margin: 0; padding: 0;
    color: var(--white);
    border-radius: 3em;
}

/* hover */
html > body .content.blog-post .blog-post-content .blog-home-link:hover {color: var(--white);}





/* icon
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content .blog-home-link .icon
{
    z-index: 2;
    background: linear-gradient(to top right, var(--eerie-norm), var(--eerie-lite));
    border-width: 0.2rem; border-style: solid; border-color: var(--white); border-radius: inherit;
    box-shadow: 0 0.25em 1em 0.35em rgba(0,0,0,0.2);
}



/* icon container
================================================== */

/* main cointainer */
html > body .content.blog-post .blog-post-content .blog-home-link .icon::before
{
    z-index: 2;
    position: relative; display: block; float: left; width: 2em; height: 2em; content: "\f177";
    text-align: center;
    font-family: var(--fa7); font-weight: 700; font-size: 2em; line-height: 2em;
    border-radius: inherit;
}



/* scaling background
================================================== */

/* main cointainer */
html > body .content.blog-post .blog-post-content .blog-home-link .icon::after
{
    z-index: 1;
    transform: scale(0); transform-origin: center center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: inherit;
    box-shadow: inset 0 -1em 1em 0 rgba(0,0,0,0.25);
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blog-post-content .blog-home-link:hover .icon::after
{
    transform: scale(1.01);
    opacity: 1;
}





/* text
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-content .blog-home-link .text
{
    z-index: 1;
    transform: translate3d(-50%,-50%,0);
    position: absolute; top: 50%; left: 100%; padding: 0.5em 1em 0.5em 2em;
    white-space: nowrap;
    background: linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: 0.25em;
    box-shadow: 0 0.25em 1em 0.35em rgba(0,0,0,0.2);
    opacity: 0; visibility: hidden;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blog-post-content .blog-home-link:hover .text
{
    transform: translate3d(-1em,-50%,0);
    opacity: 1; visibility: visible;
}




















/* footer
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-footer-info
{
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: 0; column-gap: 0;

    /* child flex rules */
    flex-basis: 100%;

    /* standard rules */
    padding: 0 0 calc(var(--blog-post-content-padding) * 2) 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 8%, rgba(0,0,0,0) 50%, rgba(0,0,0,0));
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-post .blog-post-footer-info {padding: 1em 0 6em 0;}

    /* if there is a sidebar */
    html > body .content.blog-post .blog-post-wrapper:has( > .blog-post-right-side) .blog-post-footer-info {padding: 1em 0;}
}

/* direct children */
html > body .content.blog-post .blog-post-footer-info > div
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; align-self: center;
}





/* dates
==================================================================================================== */

/* main container */
html > body .content.blog-post .blog-post-footer-info .blog-post-dates
{
    /* child flex rules */
    flex-basis: var(--blog-post-content-width); max-width: 100%;

    /* standard rules */
    padding: var(--blog-post-content-padding);
}





/* paragraphs
================================================== */

/* main container */
html > body .content.blog-post .blog-post-footer-info .blog-post-dates p {font-weight: 200; font-size: 0.8em;}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .content.blog-post .blog-post-footer-info .blog-post-dates p
    {
        text-align: center;
        font-size: 2.75vw;
    }
}

/* date text */
html > body .content.blog-post .blog-post-footer-info .blog-post-dates p span {font-weight: 700;}




















/* blog posts list
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* title
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blogs-list-title
{
    margin: 0 0 calc(var(--blog-post-list-padding) / 1.25) 0; padding: 0 0 calc(var(--blog-post-list-padding) / 1.5) 0;
    border-width: 0 0 0.2rem 0; border-style: solid; border-color: rgba(0,0,0,0.15);
}





/* heading tag
==================================================================================================== */

/* main container */
html > body .content.blog-post .blogs-list-title :is(h1,h2,h3,h4,h5,h6)
{
    margin: 0; padding: 0;
    text-align: center; text-transform: uppercase;
    font-weight: 400; font-size: 2em; line-height: 1.35em;
    color: var(--white);
    text-shadow: 0.05em 0.05em 0.075em rgba(0,0,0,0.25);
}

/* mobile settings */
@media only screen and (max-width: 640px)
{
    html > body .content.blog-post .blogs-list-title :is(h1,h2,h3,h4,h5,h6) {font-size: 1.6em;}
}










/* list
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper {padding: 0 0 calc(var(--blog-post-content-padding) * 3) 0;}

/* mobile settings */
@media only screen and (max-width: 640px)
{
    html > body .content.blog-post .blogs-list-wrapper {padding: 0 0 calc(var(--blog-post-content-padding) * 4) 0;}
}
@media only screen and (max-width: 480px)
{
    html > body .content.blog-post .blogs-list-wrapper {padding: 0 0 calc(var(--blog-post-content-padding) * 8) 0;}
}





/* list
==================================================================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul
{
    /* variables */
    --item-gap: 2em;
    
    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--item-gap); column-gap: var(--item-gap);

    /* standard rules */
    margin: 0; padding: 0;
}





/* list items
==================================================================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li
{
    /* child flex rules */
    order: 0; flex-grow: 1; flex-shrink: 1; flex-basis: 100%; align-self: center;

    /* standard rules */
    margin: 0; padding: 0;
}

/* first/last children */
html > body .content.blog-post .blogs-list-wrapper ul > :is(:first-child,:last-child) {margin: 0;}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-post .blogs-list-wrapper ul li {flex-basis: calc(33.3333% - (var(--item-gap) * 2));}
}
@media only screen and (max-width: 768px)
{
    html > body .content.blog-post .blogs-list-wrapper ul li {flex-basis: 100%;}
}

/* remove dot */
html > body .content.blog-post .blogs-list-wrapper ul li::before {display: none;}





/* link
==================================================================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a
{
    /* variables */
    --link-gap: 1em;
    --image-width: 45%;

    /* parent flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--link-gap); column-gap: var(--link-gap);

    /* standard rules */
    width: 100%;
    color: var(--eerie-norm);
}

/* mobile settings */
@media only screen and (max-width: 768px)
{
    html > body .content.blog-post .blogs-list-wrapper ul li a {--link-gap: 2em;}
}
@media only screen and (max-width: 400px)
{
    html > body .content.blog-post .blogs-list-wrapper ul li a {--link-gap: 1em;}
}

/* hover */
html > body .content.blog-post .blogs-list-wrapper ul li a:hover {color: var(--white);}

/* direct children */
html > body .content.blog-post .blogs-list-wrapper ul li a > div
{
    /* child flex rules */
    order: 0; flex-grow: 0; flex-shrink: 0; align-self: center;
}





/* scaling background
================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a::before
{
    z-index: -1;
    transform: scaleX(0); transform-origin: right center;
    top: 0.5em; right: 0; display: block; float: right; width: calc(100% - 1em); height: calc(100% - 1em);
    background: linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: 0.25em;
    box-shadow: 0 0.25em 0.5em 0.15em rgba(0,0,0,0.15);
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blogs-list-wrapper ul li a:hover::before
{
    transform: scaleX(1); transform-origin: left center;
    opacity: 1;
}





/* image
================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a > .image
{
    /* child flex rules */
    flex-basis: var(--image-width);

    /* standard rules */
    height: 8em;
    background-repeat: no-repeat; background-position: center center; background-size: cover;
    border-radius: 0.25em;
    box-shadow: 0 0.25em 0.5em 0.1em rgba(0,0,0,0.1), 0 1em 2em 0.5em rgba(0,0,0,0.1);
}





/* overlay
================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a > .image::before
{
    z-index: 1;
    transform: scaleX(0); transform-origin: left center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--persian-dark), var(--persian-norm));
    border-radius: inherit;
    box-shadow: 0 0 0.5em 0.15em rgba(0,0,0,0.15);
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blogs-list-wrapper ul li a:hover > .image::before
{
    transform: scaleX(1); transform-origin: right center;
    opacity: 0.5;
}





/* icon
================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a > .image::after
{
    z-index: 2;
    transform: translate3d(-100%,-50%,0);
    top: 50%; left: 50%; display: block; float: left; width: auto; height: auto; content: "\f178";
    font-family: var(--fa7); font-weight: 700; font-size: 2em; line-height: 1em;
    color: var(--white);
    opacity: 0; visibility: hidden;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* hover */
html > body .content.blog-post .blogs-list-wrapper ul li a:hover > .image::after
{
    transform: translate3d(-50%,-50%,0);
    opacity: 1; visibility: visible;
}





/* image
================================================== */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a > .title
{
    /* child flex rules */
    flex-basis: calc(100% - (var(--image-width) + var(--link-gap)));

    /* standard rules */
    padding: var(--link-gap) var(--link-gap) var(--link-gap) 0;
}

/* heading tag
========================= */

/* main container */
html > body .content.blog-post .blogs-list-wrapper ul li a > .title :is(h1,h2,h3,h4,h5,h6)
{
    margin: 0; padding: 0;
    text-transform: uppercase;
    font-weight: 500; font-size: 1.4em; line-height: 1.5em;
}