/* Modern Minimal Cards */
.cards--portfolio {position:relative;display:flex;justify-content:start;align-content:center;flex-wrap:wrap;padding:0 0.6rem;}
.cards--portfolio .card {width:100%;height:100%;padding:1.2rem 0.6rem 2.4rem 0.6rem;text-align:left;position:relative;}
.cards--portfolio .card figure {position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;border-radius:6px;}
.cards--portfolio .card figure svg {width:100%;height:100%;opacity:0;position:relative;z-index:-1;}
.cards--portfolio .card figure noscript {width:100%;height:100%;position:absolute;}
.cards--portfolio .card figure img {width:100%;height:100%;position:absolute;}
.cards--portfolio .card h2 {margin:0;font-size:1.0rem;line-height:1.3rem;padding:1.0rem 0;text-align:center;}
.cards--portfolio .card div {font-size:0.8rem;line-height:1.2rem;max-height:3.6rem;text-align:center;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.cards--portfolio .card p {margin:0;}
@media only screen and (max-width:900px) {.cards--portfolio .card {width:50%;}}
@media only screen and (min-width:901px) and (max-width:1366px) {.cards--portfolio .card {width:33%;}}
@media only screen and (min-width:1367px) {.cards--portfolio .card {width:25%;}}
.cards--portfolio .card:hover a {color:var(--color-accent-100);}

.cards--article {position:relative;display:flex;justify-content:start;align-content:center;flex-wrap:wrap;}
.cards--article .card {width:100%;height:100%;padding:1.2rem 1.2rem 2.4rem 1.2rem;text-align:left;position:relative;}
.cards--article .card figure {position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;border-radius:6px;}
.cards--article .card figure svg {width:100%;height:100%;opacity:0;position:relative;z-index:-1;}
.cards--article .card figure noscript {width:100%;height:100%;position:absolute;}
.cards--article .card figure img {width:100%;height:100%;position:absolute;}
.cards--article .card h2 {margin:0;padding:1.2rem 0.1rem;font-size:1.4rem;line-height:1.8rem;}
.cards--article .card p {font-size:1.0rem;line-height:1.4rem;margin:0 0 1.0rem 0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.cards--article .card time {font-weight:300;font-size:1.0rem;color:#777777;}
@media only screen and (min-width:768px) {
	.cards--article .card {width:50%;}
	.cards--article .card h2 {font-size:1.8rem;line-height:2.4rem;}
}
.cards--article .card:hover a {color:var(--color-accent-100);}

.cards--section {position:relative;padding:0 0.6rem;}
.cards--section .card {width:100%;max-width:800px;margin:0 auto;height:100%;padding:1.2rem 0.6rem 2.4rem 0.6rem;text-align:left;position:relative;}
.cards--section .card figure {position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;margin:0;border-radius:6px;}
.cards--section .card figure svg {width:100%;height:100%;opacity:0;position:relative;z-index:-1;}
.cards--section .card figure noscript {width:100%;height:100%;position:absolute;}
.cards--section .card figure img {width:100%;height:100%;position:absolute;}
.cards--section .card h2 {margin:0;font-size:1.0rem;line-height:1.3rem;padding:1.0rem 0;text-align:center;}
.cards--section .card div {font-size:0.8rem;line-height:1.2rem;max-height:3.6rem;text-align:center;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.cards--section .card p {margin:0;}
.cards--section .card:hover a {color:var(--color-accent-100);}