@use "./const.scss" as *;

.blog-container {
    background-color: $background-color;
}

.blog-post-head {
    margin-bottom: 0;
    border-color: $main-color;
    border-bottom-style: solid;
    border-width: 2px;
}

.blog-post-head h1 {
    margin-block-start: 0.43em;
    margin-block-end: 0.43em;
    font-family: $menu-font;
    font-size: 2em;
    font-weight: normal;
}

.blog-post-head-image {
    text-align: center;
    border-color: $main-color;
    border-bottom-style: solid;
    border-width: 2px;
}

.blog-post-head-image img {
    vertical-align: top;
}

.blog-post-head > * {
    width: 100%;
    text-align: center;
}

.blog-post-tailer > * {
    width: 100%;
    text-align: center;
    margin-top: 0;
    margin-bottom: 2em;
}

.blog-post-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-post-content > * {
    width: 50vw;
}

.blog-post-content > .kg-card {
    width: 100%;
}

@media all and (max-width: 512px) {
    .blog-post-content > * {
        width: 90vw;
    }
    .pinned-container .blog-post-content > * {
        width: 90vw;
    }
}