.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 300px;
    gap: 3rem;
    align-items: start;   
    margin: 1rem;
    padding: 1rem;  
}

.blog-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    margin: 1rem;     
}


.blogarticle-main {
    margin: 1rem;
    text-align: justify;
    padding: 1rem;
    border: 1px solid var(--color-surface);
    border-radius: 1cap;
    width: calc( 100vw - 3rem);
    box-shadow: 10px 10px 15px var(--color-muted);
}

.blogarticle-main p {
     min-width: 95%;
     padding: 1rem;
}

.blog-sidebar {
    display: grid;
    gap: 2rem;
    border: 1px solid var(--color-surface);
    border-radius: 1cap;
    box-shadow: 10px 10px 15px var(--color-surface);
    padding: 1rem;
    margin: 1rem;
    max-width: calc( 100vw - 3rem);
 
}

.post {
    border: 1px solid var(--color-surface);
    border-radius: 1cap;
    box-shadow: 10px 10px 15px var(--color-surface);
    padding: 1rem;
    margin: 1rem;
    min-height: 490px;
 }
.post:hover {
box-shadow: 10px 10px 15px var(--color-muted);
}

.post img {

    border: 1px solid var(--color-muted);
    padding: 3px;
    margin: 1rem auto;
    max-height: 150px;
}

.post h2,  .kommentare h3, .blogarticle-main h2 {
    margin: 0 0 1rem 0;
    color: var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding-bottom: .5rem;
   
}

.sidebar-box h3 {
    margin: 0 0 1rem 0;
    color: var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding-bottom: .5rem;

}

.blogarticle-main h2 {
    text-align: center;

}
.post-info {
    text-align: right;
}

.post a, .sidebar-box a {
    text-decoration: none;
    color: var(--color-surface);
}

.post a:hover, .sidebar-box a:hover {
    color: var(--color-muted);
    text-decoration: underline;
}

.sidebar-box li {
    list-style-type: none;
}

.entry {
    background-color: var(--color-accent);
    border-radius: 1cap;
    padding: 1rem;
    margin: 5px;
}

.postmeta {
    text-align: center;
    margin: auto;
    padding: 0;

}

.kommentare {
    border: 1px solid var(--color-surface);
    border-radius: 1cap;
    padding: 1rem;
    margin: 1rem;
    max-width: calc( 100vw - 3rem);
    box-shadow: 10px 10px 15px var(--color-muted);

}


@media (max-width: 980px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-main {
        grid-template-columns: 1fr;
    }
}