#blog-list-container{
    container-type: inline-size;
}

.blog-list-element-root{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 1ch;
    margin-top: 1ch;
    gap: 2ch;
    border: thin solid #343a40;
    padding: 0.5em;
}

.blog-list-element-image-container{
    height: 9em;
    width: 30ch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@container (width < 60ch){
    .blog-list-element-root{
        flex-direction: column;
        text-align: center;
    }

    .blog-list-element-image-container{
        width: 100%;
        justify-content: center;
    }
}

.blog-list-element-image{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#blog-list-navigation-container{
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog-list-navigation-element{
    font-weight: bold;
    margin-right: 2ch;
    cursor: default;
}

.blog-list-navigation-element:last-child{
    margin-right: 0ch;
}

.clickable-blog-list-navigation-element{
    cursor: pointer;
}

.blog-list-navigation-element-current{
    color: #29aae3;
}