/*
Block Name: Clips
Description: A newspaper-style selection of writing samples. The first clip is featured; label each one (e.g. For KYS Project, Self-initiated concept).
*/

.block-clips { border-top: 0.3rem solid var(--brand-2); }
.block-clips .cl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.6rem 4rem; margin-bottom: clamp(2.8rem, 4vw, 4.8rem); }
.block-clips .cl-intro { flex: 0 1 46rem; margin: 0; font-style: italic; }
.block-clips .cl-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.4rem; }
.block-clips .cl-clip { background: var(--brand-8); border: 0.1rem solid var(--brand-2); padding: 2.2rem 2.4rem 2.4rem; display: flex; flex-direction: column; gap: 1.4rem; }
.block-clips .cl-clip.is-featured { grid-row: span 2; padding: 2.8rem 3.2rem 3.2rem; }
.block-clips .cl-meta { display: flex; justify-content: space-between; gap: 1.2rem; padding-bottom: 1rem; border-bottom: 0.2rem solid var(--brand-2); }
.block-clips .cl-meta .cl-label { color: var(--brand-1); }
.block-clips .cl-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(100%) contrast(1.05); }
.block-clips .cl-title { margin: 0; }
.block-clips .cl-summary { margin: 0; flex-grow: 1; }
.block-clips .cl-link { align-self: flex-start; margin-top: 0.4rem; }

@media screen and (max-width: 860px) {
	.block-clips .cl-grid { grid-template-columns: minmax(0, 1fr); }
	.block-clips .cl-clip.is-featured { grid-row: auto; }
}