<!--Content: https://branch.climateaction.tech/-->
<main>
	<div class="grid">
		<div class="grid__item-wrapper">
			<div class="item">
				<p class="card__top">Solarpunk and Hope</p>
				<img src='https://images.unsplash.com/photo-1576403103737-dc646cbf7de5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3ODcyMjI&ixlib=rb-1.2.1&q=80&w=400' alt='Large globe'>
				<div class="card__inner">
					<h3>We Don’t Have the Right: A Decolonized Approach to Innovation</h3>
					<p>Shayna Robinson</p>
					<a href="">Read the article</a>
				</div>
			</div>
		</div>
		<div class="grid__item-wrapper">
			<div class="item" style="--c: darkorchid">
				<p class="card__top">Fossil-Free Futures</p>
				<img src='https://images.unsplash.com/photo-1509390981263-4d8df07d826c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3ODYzNzc&ixlib=rb-1.2.1&q=80&w=400' alt='Wind turbines'>
				<div class="card__inner">
					<h3>We Need a Fossil-Free Internet by 2030</h3>
					<p>Chris Adams</p>
					<a href="">Read the article</a>
				</div>
			</div>
		</div>
		<div class="grid__item-wrapper">
			<div class="item" style="--c: orange">
				<p class="card__top">Climate Misinformation</p>
				<img src='https://images.unsplash.com/photo-1576403103737-dc646cbf7de5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3ODcyMjI&ixlib=rb-1.2.1&q=80&w=400' alt='Large globe'>
				<div class="card__inner">
					<h3>Carbon Footprint of Unwanted Data-Use by Smartphones</h3>
					<p>CE Delft</p>
					<a href="">Read the article</a>
				</div>
			</div>
		</div>
	</div>
</main>
<aside>
	<div class="grid">
		<div class="grid__item-wrapper">
			<div class="item" style="--c: turquoise">
				<p class="card__top">Tech workers</p>
				<img src='https://images.unsplash.com/photo-1509390981263-4d8df07d826c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTI3ODYzNzc&ixlib=rb-1.2.1&q=80&w=400' alt='Wind turbines'>
				<div class="card__inner">
					<h3>The Handbook Every Worker in Tech Needs to Read</h3>
					<p>Ifeoma Ozoma</p>
					<a href="">Read the article</a>
				</div>
			</div>
		</div>
		<div class="grid__item-wrapper">
			<div class="item" style="--c: teal">
				<p class="card__top">Sustainable Web Craft</p>
				<div class="card__inner">
					<h3>Green Tech: What Solutions Are Being Advocated?</h3>
					<p>Anne Currie</p>
					<a href="">Read the article</a>
				</div>
			</div>
		</div>
	</div>
</aside>

* {
	box-sizing: border-box;
}

body {
	--pad: clamp(1rem, 2vw, 3rem);
	--pad-lg: calc(var(--pad) * 2);
	--pad-sm: calc(var(--pad) / 2);
	--pad-xs: calc(var(--pad) / 4);
	margin: 0;
	font-family: 'Exo 2', sans-serif;
	background: lightblue;
	min-height: 100vh;
}

img {
	width: 100%;
	display: block;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

main,
aside {
	container: layout / inline-size;
	padding: var(--pad);
}

aside {
	background: cornflowerblue;
}

@media (min-width: 60em) {
	body {
		display: grid;
		grid-template-columns: 1fr min(28rem, 50%);
	}
}

p,
h3 {
	margin: 0;
}

.card__inner h3 {
	margin: 0 0 var(--pad-xs);
	font-size: 1.5rem;
}

.card__inner p {
	margin: 0 0 var(--pad-sm);
}

.grid {
	display: grid;
	gap: var(--pad);
	margin: 0 auto;
	max-width: 65rem;
	padding: var(--pad);
}

.grid__item-wrapper {
	container: component / inline-size;
}

@media (min-width: 75em) {
	.grid {
		border: 0.2rem solid aliceblue;
		padding: var(--pad);
	}
}

.item {
	background: var(--c, deeppink);
	width: 100%;
	border-radius: var(--pad);
	border: 0.4rem solid;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.card__inner,
.card__top {
	padding: var(--pad-sm);
}

.card__inner {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	background: white;
}

.card__top {
	color: white;
	font-weight: 700;
}

.card__inner > * + * {
	margin-top: var(--pad-sm);
}

.card__inner a {
	margin-top: auto;
	color: inherit;
	font-size: 0.9rem;
}

[style="--c: turquoise"] .card__top,
[style="--c: orange"] .card__top {
	color: black;
}

@container layout (inline-size > 40em) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.grid__item-wrapper:first-child {
		grid-column: 1 / span 2;
	}
	
	.item {
		height: 100%;
	}
}


@container component (inline-size > 20em) {
	.card__inner h3 {
		font-size: 1.8rem;
	}
}

@container component (inline-size > 40em) {
	.item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 2fr;
	}
	
	.item img {
		aspect-ratio: none;
		height: 100%;
	}
	
	.card__top {
		position: absolute;
		top: 0;
		left: 0;
		background: var(--c, deeppink);
		z-index: 2;
	}
	
	.card__inner {
		flex: 1 1 auto;
		padding: var(--pad);
	}
	
	.card__inner h3 {
		font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
	}
}