.featured {
  margin: 0 0 5rem 0;
}
.featured--left .layout--twocol,
.featured--right .layout--twocol{
  display: flex;
  gap: 1rem;
  align-items: center;
}
.featured--left .layout--twocol{
  flex-direction: column;
}
.featured--right .layout--twocol{
  flex-direction: column-reverse;
}
.featured--left .image img{
  margin-right: auto;
}
.featured--right .image img{
  margin-left: auto;
}

@media screen and (min-width: 900px) {
  .featured {
    margin: 10rem 0;
  }
  .featured--left .layout--twocol,
  .featured--right .layout--twocol{
    display: grid;
    gap: 2rem;
    align-items: unset;
  }
}