/* this style is used inline in list.html */

body {
    margin: auto;
    max-width: 2560px;
}

body > footer.pagewidth,
body > header.pagewidth {
    padding: 0 calc(1.5rem + 1ex);
}

body > aside.carousel {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    float: left;
    /* border: var(--border);
    border-radius: 1ex; */
    padding: 1rem;
    width: 38vw;
    height: var(--vbody);
}

body > main#home {
    height: var(--vbody);
    overflow-y: auto;
}

body > main#home > aside#list-tags {
    top: 0;
    right: 0;
    margin: 1rem auto;
    width: calc(100% - var(--golden-ratio))
}

#home #top {
    padding: 1rem;
}

#home #list-posts {
    padding: 1rem;
    width: var(--golden-ratio);
}

div[role='feed'] {
    padding: 1ex;
}

.carousel .feed-item,
#home .feed-item,
hr.ldots {
    width: unset;
}

#main-footer > .pagewidth {
    padding: 0 1ex;
}

#duckduckgo,
#i18n-menu > .on-plank,
#more-menu > .on-plank,
.pagefind-ui {
    margin-right: 1rem;
}

#hasDuckDuckGo.pagewidth {
    padding-right: 1rem;
}

#grain {
    display: none;
}

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

    body > footer,
    body > header {
        background: var(--bg);
    }

    body > aside.carousel {
        float: unset;
        margin: 0 1rem;
        padding: 1rem 0;
        width: unset;
    }

    body > main#home {
        height: unset;
        overflow-y: unset;
    }

    body > main#home > aside#list-tags {
        top: var(--vhead);
    }

}

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

    #main-footer > .pagewidth {
        padding: 0 calc(var(--void) / 2);
    }

    body > main#home > aside#list-tags {
        padding: unset;
        width: var(--canonic);
    }

    aside + #list-posts .feed-item > section {
        flex-direction: row-reverse;
        aspect-ratio: 10/3;
    }

    #home #list-posts {
        margin: var(--bigskip) auto;
        padding: unset;
        width: var(--canonic);
    }

    #list-posts .section-title {
        padding-left: unset;
    }

    #duckduckgo,
    .pagefind-ui {
        margin-right: 1ex;
    }

}

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

    aside + #list-posts .feed-item > section {
        flex-direction: column;
        aspect-ratio: unset;
    }

}