/**
 * Fichier  : /ott/blog/article/assets/css/style.css
 * Fonction : structure d'un article
 */


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

#blog-article,
#blog-article *,
#blog-article *::before,
#blog-article *::after {
    box-sizing: border-box;
}

#blog-article {
    position: relative;
    overflow: hidden;
}

#blog-article {
    width: 100%;
    min-height: 100vh;
    padding: 1em 2em 5em 2em;
}

#blog-article {
    color: var(--color-white);
}


/* ==================================================
   INNER
================================================== */

#blog-article > .inner {
    width: min(100%, 1280px);
    margin: 0 auto;
}

#blog-article > .inner {
    display: flex;
    flex-direction: column;
    gap: 1.5em
}


/* ==================================================
   LAYOUT
================================================== */

#blog-article .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 820px) minmax(260px, 1fr);
    align-items: start;
    gap: 1.5em;
}

#blog-article .article-layout main {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}


/* ==================================================
   MAIN
================================================== */

#blog-article main {
    min-width: 0;
}


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

#blog-article aside {
    position: sticky;
    top: 2em;
}

#blog-article aside {
    display: flex;
    flex-direction: column;
    gap: 2em;
}


/* ==================================================
   LINK RESET
================================================== */

#blog-article a {
    color: inherit;
    text-decoration: none;
}


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

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

    #blog-article {
        padding: 1.5em 1em 3em 1em;
    }

    #blog-article .article-layout {
        grid-template-columns: 100%;
        gap: 2em;
    }

    #blog-article aside {
        position: static;
    }

}

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

    #blog-article {
        padding: 15px 10px;
    }

}