* {
    box-sizing: border-box;
}

.article {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: aqua;
    margin: 20px;
    cursor: pointer;
    /*border-radius: 10px;*/
    /*border: 0px solid var(--border-color);*/
}

.article > a {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 12;
}

.image_frame {
    position: relative;
    width: 100%;
    height: 300px;
}

.image_frame > img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/*.lazy {
    image-rendering: pixelated;
}*/

/*.lazy {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}*/

.tag_container {
    z-index: 13;
    position: absolute;
    right: -20px;
    bottom: 0px;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tag {
    padding: 5px 20px;
    margin-bottom: 10px;
    margin-left: auto;

    cursor: pointer;
    border-radius: 9999px;
}

.article > h1 {
    margin: 15px 15px 0px 15px;
    font-weight: bold;
}
.article > h3 {
    margin: 5px 15px 0px 15px;
    color: var(--font-color-dark);
}

.accent1 {
    background-color: var(--accent-color-1);
    transition: background-color 1s ease;
}
.accent1:hover {
    background-color: var(--accent-color-1-dark);
    transition: background-color 0.4s ease;
}
.accent2 {
    background-color: var(--accent-color-2);
    transition: background-color 0.4s ease;
}
.accent2:hover {
    background-color: var(--accent-color-2-dark);
    transition: background-color 0.4s ease;
}
.accent3 {
    background-color: var(--accent-color-3);
    transition: background-color 0.4s ease;
}
.accent3:hover {
    background-color: var(--accent-color-3-dark);
    transition: background-color 0.4s ease;
}
.accent4 {
    background-color: var(--accent-color-4);
    transition: background-color 0.4s ease;
}
.accent4:hover {
    background-color: var(--accent-color-4-dark);
    transition: background-color 0.4s ease;
}
.accent5 {
    background-color: var(--accent-color-5);
    transition: background-color 0.4s ease;
}
.accent5:hover {
    background-color: var(--accent-color-5-dark);
    transition: background-color 0.4s ease;
}
.accent6 {
    background-color: var(--accent-color-6);
    transition: background-color 0.4s ease;
}
.accent6:hover {
    background-color: var(--accent-color-6-dark);
    transition: background-color 0.4s ease;
}
.filter_capsule_selected {
    background-color: var(--border-color);
}