/* === ListPage === */

/* -- list -- */

.container { text-align: left; display:flex; flex-wrap: wrap; align-content: flex-start; margin: 0 -1.5rem; }
.item { width: 100%; display: flex; }


/* -- cards -- */

.card { box-shadow: 0px 0px 10px rgba(0,0,0,.3); margin: 1.5rem 0; width: 100%; display: grid; grid-template-rows: [header] auto [footer] 1fr; }
.card .header { margin: 0; align-self: stretch; min-height: 25rem; padding: 1rem; background-image: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.02) 100%); background-position: 0% 40%; background-repeat: no-repeat; background-size: cover; color: #000; background-color: #fff; }
.card .header a { color: #000; }
.card h2 { margin:0; font-size: 1.8rem; font-weight: 500; padding: 1rem 1rem 1.5rem; }
.card .tagline { font-size: 1.6rem; padding: 0 1rem 2rem; }
.card h2, .card .tagline { background-color: rgba(255,255,255,.97); }
.card .footer { padding: 0 1rem 1rem; grid-row-start: footer; background-color: #fff; border-top: 1px solid #eee; }
.card .date { border-bottom: 1px solid #222; padding: 1.1rem 0 .9rem 3rem; margin: 0 0 1rem; font-size: 1.8rem; background: no-repeat left url('icons/calendar_today_FILL0_wght400_GRAD0_opsz24.svg'); }
.card .from { font-size: 1.4rem; margin: 0 0 .5rem; }
.card .urlicon { font-size: 1.4rem; margin: 0; }



/* --- MediaQueries --- */ 

@media (min-width:300px) {
	.card a .trunk { max-width: 200px; }
}

@media (min-width:400px) {
	.card h2 { font-size: 2.2rem; }
	.card a .trunk { max-width: 300px; }
}

@media (min-width:730px) {
	.item { flex-basis: 50%; }
	.card { margin: 1.5rem; }
}

@media (min-width: 1100px) {
	.item { flex-basis: 33.3333333333%; }
}

@media (min-width: 1600px) {
	.item { flex-basis: 25%; }
}

@media (min-width: 2120px) {
	.item { flex-basis: 20%; }
}