h2{
  text-align: center;
  margin: 0 0 2rem 0;
}
p{
  width: clamp(100px, 80%, 700px);
  margin: 0 auto;
  padding-bottom: 2rem;
}
.container{
  margin-top: 1rem;
  margin-bottom: 6rem;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding: 2rem 0 2rem 0;
}
.evolution-card,
.cosmology-card,
.biology-card,
.robotics-card,
.ecology-card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
img{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  object-fit: contain;
}
.evolution-images,
.cosmology-images,
.biology-images,
.robotics-images,
.ecology-images{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 1rem;
  height: fit-content;
}
.img1{
  grid-column: 2;
  grid-row: 1;
}
.img2{
  grid-column: 2;
  grid-row: 2;
  transform: translateY(20px);
}
.img3{
  grid-column: 1;
  grid-row: 1 / 3;
  transform: scale(0.9);
}
@media(min-width: 800px){
  .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .evolution-card,
  .biology-card,
  .ecology-card{
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .evolution-images,
  .biology-images,
  .ecology-images{
    grid-column: 2;
    grid-row: 1 /3;
  }
  .cosmology-images,
  .robotics-images{
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .cosmology-card,
  .robotics-card{
    grid-column: 2;
    grid-row: 1 / 3;
  }
}