.display-posts-listing.grid {
    display: grid;
    grid-gap: 16px
}

.display-posts-listing.grid .title {
    display: block
}

.display-posts-listing.grid img {
    display: block;
    max-width: 100%;
    height: auto
}

@media (min-width: 600px) {
    .display-posts-listing.grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (min-width: 1024px) {
    .display-posts-listing.grid {
        grid-template-columns:repeat(3, 1fr)
    }
}

.display-posts-listing.flex {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap
}

@media only screen and (max-width: 480px) {
    .display-posts-listing.flex {
        flex-direction: column
    }
}

.display-posts-listing.flex .listing-item {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
    margin: 1em 0;
    transition: all .1s ease-in-out
}

@media only screen and (max-width: 979px) {
    .display-posts-listing.flex .listing-item {
        flex: 1 0 30%
    }
}

@media only screen and (max-width: 979px) {
    .display-posts-listing.flex .listing-item {
        flex: 1 0 50%
    }
}

.display-posts-listing.flex .listing-item a {
    color: var(--color-primary);
    display: flex;
    flex-flow: nowrap column;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    width: 100%
}

.var1 .display-posts-listing.flex .listing-item a {
    color: #578741
}

.var2 .display-posts-listing.flex .listing-item a {
    color: #1561a5
}

.var3 .display-posts-listing.flex .listing-item a {
    color: #8736a5
}

.var4 .display-posts-listing.flex .listing-item a {
    color: #ff8e00
}

.var5 .display-posts-listing.flex .listing-item a {
    color: #8100ff
}

.var6 .display-posts-listing.flex .listing-item a {
    color: #a04407
}

.var7 .display-posts-listing.flex .listing-item a {
    color: #0073a0
}

.var8 .display-posts-listing.flex .listing-item a {
    color: #a80000
}

.var9 .display-posts-listing.flex .listing-item a {
    color: #a80000
}

.var10 .display-posts-listing.flex .listing-item a {
    color: #363636
}

.var11 .display-posts-listing.flex .listing-item a {
    color: #a61d6d
}

.var12 .display-posts-listing.flex .listing-item a {
    color: #c81a00
}

.op1 .display-posts-listing.flex .listing-item a {
    color: #ff00ff
}

.op2 .display-posts-listing.flex .listing-item a {
    color: #ffcc00
}

.op3 .display-posts-listing.flex .listing-item a {
    color: #00d9ff
}

.kinet .display-posts-listing.flex .listing-item a {
    color: #de0000
}

.display-posts-listing.flex .listing-item a:focus-within, .display-posts-listing.flex .listing-item a:hover {
    color: var(--color-accent)
}

.var1 .display-posts-listing.flex .listing-item a:focus-within, .var1 .display-posts-listing.flex .listing-item a:hover {
    color: #203118
}

.var2 .display-posts-listing.flex .listing-item a:focus-within, .var2 .display-posts-listing.flex .listing-item a:hover {
    color: #071f34
}

.var3 .display-posts-listing.flex .listing-item a:focus-within, .var3 .display-posts-listing.flex .listing-item a:hover {
    color: #381745
}

.var4 .display-posts-listing.flex .listing-item a:focus-within, .var4 .display-posts-listing.flex .listing-item a:hover {
    color: #804700
}

.var5 .display-posts-listing.flex .listing-item a:focus-within, .var5 .display-posts-listing.flex .listing-item a:hover {
    color: #410080
}

.var6 .display-posts-listing.flex .listing-item a:focus-within, .var6 .display-posts-listing.flex .listing-item a:hover {
    color: #261002
}

.var7 .display-posts-listing.flex .listing-item a:focus-within, .var7 .display-posts-listing.flex .listing-item a:hover {
    color: #001721
}

.var8 .display-posts-listing.flex .listing-item a:focus-within, .var8 .display-posts-listing.flex .listing-item a:hover {
    color: #290000
}

.var9 .display-posts-listing.flex .listing-item a:focus-within, .var9 .display-posts-listing.flex .listing-item a:hover {
    color: #290000
}

.var10 .display-posts-listing.flex .listing-item a:focus-within, .var10 .display-posts-listing.flex .listing-item a:hover {
    color: #000000
}

.var11 .display-posts-listing.flex .listing-item a:focus-within, .var11 .display-posts-listing.flex .listing-item a:hover {
    color: #390a26
}

.var12 .display-posts-listing.flex .listing-item a:focus-within, .var12 .display-posts-listing.flex .listing-item a:hover {
    color: #490900
}

.op1 .display-posts-listing.flex .listing-item a:focus-within, .op1 .display-posts-listing.flex .listing-itema:hover {
    color: #80007f
}

.op2 .display-posts-listing.flex .listing-item a:focus-within, .op2 .display-posts-listing.flex .listing-item a:hover {
    color: #806600
}

.op3 .display-posts-listing.flex .listing-item a:focus-within, .op3 .display-posts-listing.flex .listing-item a:hover {
    color: #006c80
}

.kinet .display-posts-listing.flex .listing-item a:focus-within, .kinet .display-posts-listing.flex .listing-item a:hover {
    color: #5f0000
}

.display-posts-listing.flex .listing-item a .title {
    color: inherit !important;
    display: block;
    font-size: 1.3em;
    margin-top: .33em;
    text-align: center;
    max-width: 100%
}

.display-posts-listing.flex .listing-item a .image {
    color: inherit !important;
    display: block;
    height: 8em
}

@media only screen and (max-width: 767px) {
    .display-posts-listing.flex .listing-item a .image {
        height: 8em
    }
}