/*
 + --------------------------------------------------
 | Root
 + --------------------------------------------------
 */
.noise-light:before {
    width: var(--grid-6);
    background-size: 300% auto;
}

.site-subtitle {
    font-size: 1.2em;
}
.site-pagination {
    --item-size: 6rem;
    column-gap: 2rem;
}


/*
 + --------------------------------------------------
 | Popup
 + --------------------------------------------------
 */
.popup-feedback {
    max-height: 90% !important;
}
#feedback {
    width: 48rem;
}
#feedback .feedback-title {
    width: 60%;
}


/*
 + --------------------------------------------------
 | Footer
 + --------------------------------------------------
 */
#footer {
    --logo-size: var(--grid-3);
    margin-top: var(--grid-5);
}
#footer .brand-head {
    transform: translateX(calc(-1 * var(--grid-2)));
}
#footer .brand-name {
    font-size: 6em;
}
#footer .brand-slogan {
    margin-top: 4em;
    width: var(--grid-8);
}


/*
 + --------------------------------------------------
 | Home
 + --------------------------------------------------
 */
.block-services .cover img {
    aspect-ratio: 3/2;
}
.block-services .cover {
    width: var(--grid-12);
    margin-left: auto;
}
.block-services .container {
    padding-left: var(--grid-2);
    padding-right: var(--grid-3)
}
.block-services .title:after {
    right: calc(-1 * var(--grid-2));
}


#home .block-title {
    --box-size: var(--grid-3);
    font-size: 5em
}
#home .block-title:before {
    content: '';
    width: var(--box-size);
    height: var(--box-size);
}
#home .block-title > :first-child {
    margin-left: calc(-.5 * var(--grid-2));
}
#home .block-subtitle {
    width: var(--grid-12);
}
#home .block-container {
    margin-top: 8rem;
}

#homePosts .post-list {
    display: grid;
    grid-template-columns: var(--grid-8) var(--grid-5);
    grid-gap: var(--grid-1);
    margin-left: var(--grid-2);
    align-items: end;
}
#homePosts .post-item:nth-child(2n+1) {
    width: var(--grid-5);
    justify-self: end;
}
#homePosts .post-item:nth-child(6n+1) {
    width: 100%;
}
#homePosts .post-item + .post-item {
    margin-top: initial;
}


/* -------------------------
 * Home Banner
 * -------------------------
 */
#banner .banner-line.--bl-top {
    width: var(--grid-8);
    height: calc(var(--header-height) + var(--grid-1));
    left: auto;
    right: var(--grid-3);
}
#banner .banner-frame {
    display: grid;
    grid-template-columns: calc(var(--grid-6) + 2rem) auto;
    column-gap: var(--grid-1);
}

#bannerMain {
    margin-left: var(--grid-1)
}
#bannerWindow {
    width: var(--grid-6);
}
#bannerMenu {
    max-width: var(--grid-3);
}
#bannerLogo {
    width: var(--grid-3);
    margin-left: var(--grid-3);
}

#bannerProject {
    /* display: flex; */
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    /* height: calc(var(--grid-6) + 9rem); */
    /* column-gap: 2rem; */
    display: block;
    column-count: 2;
    column-gap: 4rem;
}
#bannerProject .banner-box {
    width: var(--grid-3);
    aspect-ratio: 3/2;
    position: relative;
    display: block;
    break-inside: avoid;
}
#bannerProject .banner-box:not(:first-child) {
    margin-top: 4rem;
}
#bannerProject .banner-box:nth-child(2) {
    aspect-ratio: 1/1;
}
#bannerProject .banner-box:nth-child(2),
#bannerProject .banner-box:nth-child(5) {
    transform: translateX(2rem);
}
#bannerProject .banner-box:nth-child(n+4) {
    transform: translateY(4rem);
}
#bannerProject .banner-box:nth-child(5) {
    transform: translate(2rem, 4rem);
}

#bannerProject .banner-box img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    filter: grayscale(1);
    transition: var(--transition);
}

/*#bannerProject .banner-box img {*/
/*    --box-gap: .4rem;*/
/*    width: calc(100% - 2 * var(--box-gap));*/
/*    height: calc(100% - 2 * var(--box-gap));*/
/*    position: absolute;*/
/*    top: var(--box-gap);*/
/*    left: var(--box-gap);*/
/*    object-fit: cover;*/
/*    filter: grayscale(1);*/
/*    transition: var(--transition);*/
/*}*/


/* -------------------------
 * Home Post
 * -------------------------
 */
.post-item .post-title {
     padding-left: initial;
}
#homePosts .btn-more {
    margin-left: var(--grid-5);
}


/*
 + --------------------------------------------------
 | About
 + --------------------------------------------------
 */
#aboutCore .core-item {
    display: flex;
    column-gap: 4rem;
}



/*
 + --------------------------------------------------
 | Project Single
 + --------------------------------------------------
 */
#projectSingle .project-props {
    grid-template-columns: var(--grid-2) var(--grid-6) auto;
    padding-left: var(--grid-1);
}
#projectSingle .work {
    grid-column-end: auto;
}

#projectSingle .project-photos {
    padding-inline: 1rem;
    column-count: 2;
    column-gap: 1rem;
}
#projectSingle .project-photos > :not(:first-child) {
    margin-top: 1rem
}


/*
 + --------------------------------------------------
 | Post
 + --------------------------------------------------
 */
#human .post-list,
#post .post-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4rem;
}
#human .post-list > :first-child,
#post .post-item:nth-child(5n+1) {
    grid-column: span 2;
}
#human .post-item + .post-item,
#post .post-item + .post-item {
    margin-top: initial;
}

#human .site-pagination,
#post .site-pagination {
    justify-content: end;
    padding-right: 2rem;
}