.oc-articles {
    --color-gray-dark: #666;
    --color-gray-light: #ddd;
    --color-gray-lighter: #eee;
    --color-gray-lightest: #f2f2f2;
}

 *{
    box-sizing: border-box;
}

.oc-articles-list .oc-filters{
    margin-bottom: 2em;
}


/* List */
.oc-articles-list  .oc-item-wrap{
    padding: 0.5em;
    border: solid 1px var(--color-gray-dark);

}

.oc-articles-list .oc-item{
    padding: 0.5em;
}

.oc-articles-list .oc-title{
    margin: 0;
}

.oc-articles-list .oc-date{
    margin: 0.3em 0;
    padding: 0.3em 0;
    border-bottom: solid 1px var(--color-gray-light);
}





/* the actual ist of items */
.oc-article-list{
    display:flex;
    flex-wrap:wrap;
    gap: 2em;
    container-type: inline-size;
}

.oc-article-list .oc-item-wrap {
    flex: 0 0 100%;
}

@container (min-width: 600px) {
.oc-article-list .oc-item-wrap {
    --flex-width: calc(50% - 1em);
    flex: 0 0 var(--flex-width);
  }
}


@container (min-width: 992px) {
.oc-article-list .oc-item-wrap {
    --flex-width: calc(33.33% - 1.333em);
    flex: 0 0 var(--flex-width);
  }
}


@container (min-width: 1600px) {
.oc-article-list .oc-item-wrap {
    --flex-width: calc(25% - 1.5em);
    flex: 0 0 var(--flex-width);
  }
}

.oc-edit-bar{
    background: var(--color-gray-lighter);
    padding: 0.1em;
    margin-bottom: 0.5em;
    text-align: right;
}

.oc-article-content{
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: solid 1px var(--color-gray-light);

}

.oc-comments{
    max-width: 400px;
    border-bottom: solid 1px var(--color-gray-light);
}
.oc-comment{
    padding: 1em;
    margin-bottom: 1em;
    border: solid 1px var(--color-gray-light);
}

.oc-comment-title{
    margin: 0 0 0.5em;
    font-size: 1.1em;
}

.oc-buttons{
    text-align: end;
    margin-top: 1em;
}
.btn {
    display:inline-block;
    padding: 0.3em 0.5em;
    border: solid 1px currentColor;
}

.d-none{
    display:none;
}


.oc-add-comment{
    background: var(--color-gray-lightest);
    max-width: 400px;
    padding: 1em;
    margin-bottom: 0.5em;
}

.oc-add-comment .alpaca-field-object{
    padding: 0;
}
.oc-add-comment .alpaca-control-label{
    display:block;
    margin-bottom: 0.3em;
}


.oc-add-comment .form-group{
    margin-bottom: 0.8em;
}

.oc-add-comment textarea, .oc-add-comment input{
    max-width: 100%;
}