<!--Content: https://branch.climateaction.tech/-->
<main>

  <div class="item">
    <p class="card__top">Solarpunk and Hope</p>
    <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 class="item" style="--c: darkorchid">
    <p class="card__top">Fossil-Free Futures</p>
    <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 class="item" style="--c: orange">
    <p class="card__top">Climate Misinformation</p>
    <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 class="item" style="--c: turquoise">
    <p class="card__top">Tech Workers</p>
    <div class="card__inner">
      <h3>How a Tech Worker Fought Back from Being Fired as a Union Organiser</h3>
      <p>Clarissa Redwine</p>
      <a href="">Read the article</a>
    </div>
  </div>
  <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 class="item" style="--c: darkorchid">
    <p class="card__top">Fossil-Free Futures</p>
    <div class="card__inner">
      <h3>Tech4Bad: When Do We Say No?</h3>
      <p>Ian Brooks MBCS, Minna Laurell Thorslund, Aksel Biørn-Hansen, Elena Somova</p>
      <a href="">Read the article</a>
    </div>
  </div>

</main>

* {
  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;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}

p,
h3 {
  margin: 0;
}

.card__inner h3 {
  margin: 0 0 var(--pad-xs);
}

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

.item {
  background: var(--c, deeppink);
  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;
}

main {
  border: 5px solid rgb(0 20 120 / 0.5);
  padding: var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--pad);
  max-width: 80vw;
}