<!--Tips from https://www.nationaltrust.org.uk/features/nine-ways-to-build-a-wildlife-friendly-garden-->
<div class="grid">
  <h2>Let the grass grow</h2>
  <div class="grid__img">
    <img src='https://images.unsplash.com/photo-1601138436134-cf2fd0314aa8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxOTc2Nzg&ixlib=rb-1.2.1&q=80&w=400' alt='Green grass'>
  </div>
  <p>Leave your mower in the shed. Long grass is one of the rarest garden habitats. By letting some or all of your lawn grow you will make space for many plant and insect species, including butterflies and wildflowers. Mowing the lawn only once every four weeks gives ‘short-grass’ plants like daisies and white clover a chance to flower in profusion, boosting nectar production tenfold.</p>
</div>

<div class="grid">
  <h2>Add a bird box and feeders</h2>
  <div class="grid__img">
    <img src='https://images.unsplash.com/photo-1573483339229-9db1693a8df8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxOTc4NzA&ixlib=rb-1.2.1&q=80&w=400' alt='Sparrows'>
  </div>
  <p>Birds are an important part your garden's ecosystem, and creating bird boxes and putting out food will help them thrive. Put your bird box up high in a sheltered area. In spring, provide protein-rich feed, such as fat balls. Seeds are best in the winter. If there are cats nearby place your feeder near a dense bush to provide birds with cover.</p>
</div>

<div class="grid">
  <h2>Grow climbing plants</h2>
  <div class="grid__img">
    <img src='https://images.unsplash.com/photo-1542347369-6fb75718485c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxOTc5MDY&ixlib=rb-1.2.1&q=80&w=400' alt='Ivy growing'>
  </div>
  <p>Ivy is a very useful plant for wildlife. Both the flowers and seeds are good sources of food and pollen. Plus, it provides year round cover for birds and insects. Clematis and certain varieties of rose are also excellent climbers for wildlife.</p>
</div>

<div class="grid">
  <h2>Build an insect hotel</h2>
  <div class="grid__img">
    <img src='https://images.unsplash.com/photo-1643401170971-7a11f41e8538?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxOTgwMDU&ixlib=rb-1.2.1&q=80&w=400' alt='Green bug'>
  </div>
  <p>Leave piles of rocks, twigs and rotting wood in your garden. These will create shelter for all sorts of important insects, such as beetles and spiders.</p>
</div>

* {
  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;
  padding: var(--pad) 0;
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(1rem, 1rem + 0.1vw, 1.3rem);
  line-height: 1.4;
  background: whitesmoke;
}

h2,
p {
  margin: 0;
}

h2 {
  font-size: clamp(2rem, 1rem + 4vw, 3.5rem);
  line-height: 1.05;
  z-index: 1;
  font-weight: 800;
}

img {
  display: block;
  width: 100%;
}

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

.grid__img {
  border-radius: var(--pad);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  align-self: center;
  border: 0.4rem solid;
}

.grid + .grid {
  margin-top: var(--pad-lg);
}

@media (min-width: 45em) {
  .grid {
    grid-template-columns: 1fr repeat(10, minmax(0, 6rem)) 1fr;
    grid-template-rows: 
      1fr
      minmax(3rem, auto)
      1fr;
    padding: 0;
  }
  
  h2 {
    grid-column: 2 / span 6;
    grid-row: 2;
    padding: var(--pad);
    background: white;
    border: 0.4rem solid;
    border-radius: var(--pad);
    box-shadow: 0.6rem 0.6rem 0 deeppink;
  }
  
  .grid__img {
    grid-column: 7 / -1;
    grid-row: 1 / span 3;
  }
  
  p {
    grid-column: 2 / span 4;
    grid-row: 3;
  }
  
  .grid:nth-child(even) .grid__img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }
  
  .grid:nth-child(odd) .grid__img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
  
  .grid:nth-child(even) h2 {
    grid-column: span 6 / -2;
    text-align: right;
  }
  
  .grid:nth-child(even) p {
    grid-column: span 4 / -2;
  }
  
  .grid:nth-child(2n) .grid__img {
    grid-column: 1 / span 6;
  }
  
  .grid:nth-child(3n) .grid__img {
    grid-column: span 6 / -2;
    border: 0.4rem solid;
    border-radius: var(--pad);
  }
  
  .grid:nth-child(4n) .grid__img {
    grid-column: 2 / span 6;
    border: 0.4rem solid;
    border-radius: var(--pad);
  }
}