.color {
    background-color: var(--color-accent);
}

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

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

.startblog .post h2 {
    margin: 0 0 1rem 0;
    color: var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding-bottom: .5rem;

}

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

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

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

.startblog .postmeta {
    text-align: center;
}


.Albumübersicht {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    margin: 1rem; 
}

.album-card {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-surface);
    border-radius: 1cap;
    box-shadow: 10px 10px 15px var(--color-muted);
    width: calc(100vw/3);
    text-align: center;
    display: block;
}

.album-card li {
    list-style: none;
}

.album-card img {
    display: block;
    border: 1px solid var(--color-muted);
    padding: 3px;
    margin: 1rem auto;
    max-height: 250px;
}

    .artikel_absatz {
        padding: 1em;
        margin: auto;
        

    }

.button_start {

    border: 1px solid var(--color-surface);
    margin: 1rem 30%;
    min-width: 30%;


}


@media (max-width: 980px) {
    .startblog, .Albumübersicht {
        grid-template-columns: 1fr;
    }
    .startblog .post {
        max-width: 80vw;
        margin: auto 10vw;
        margin-left: 3vw;
        }

    .album-card {
        width: 80vw;
        margin-left: -3vw;      
    }



}