/*
Layout-related css classes
*/

/*
The width of main content on pages is usually the same. Instead of repeating
this width everywhere, just apply this class to the container elements.

On smaller screens, some areas of the site actually go to 100% width (e.g. the
header on blog posts). In such cases use CSS specificity to overwrite the value 
*/
.content-max-width {
    margin: 0 auto;
    max-width: 1280px; 
}

@media (max-width: 1400px) {
    .content-max-width {
        max-width: 85%;
    }
}

@media (max-width: 1000px) {
    .content-max-width {
        max-width: 95%;
    }
}

@media (max-width: 800px) {
    .content-max-width {
        max-width: 100%;
    }
}

/* The sidebar layout used throughout the site */
.sidebar-container {
    display: flex;
    justify-content: space-between;
}

.sidebar-container > :first-child {
    max-width: 305px;
}

.sidebar-container > :first-child .sticky {
    position: sticky;
    top: 130px;
}
.sidebar-container > :last-child {
    flex-grow: 1;
}

.sidebar-container > :is(:first-child, :last-child) {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding: 0 1rem;
}


@media (max-width: 1280px) {
    .sidebar-container {
        display: block;
    }

    .sidebar-container > :last-child {
        margin-top: 1.5rem;
    }

    .sidebar-container > :is(:first-child, :last-child) {
        padding: 0 1.5rem;
        gap: 0.5rem;
    }
}