/* This grid aligns the `.container--content` "over" the `.container--media` */
.container--media-content {
  display: grid;
  grid-template: "media-content";
  place-items: center;
  place-content: start;
  & > * {
    grid-area: media-content;
  }
}
/* This grid aligns the `video` "over" the `picture/img` */
.container--media {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: "media";
  place-items: stretch;
  place-content: stretch;
  & > * {
    grid-area: media;
  }
  /* Make sure video and image assets are the same size, so this aligns them perfectly */
  & img, video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.container--content {
  /* Needed to retain accessibility to content, for CTA, etc. */
  position: relative;
  /* For cosmetics */
  padding: 4em;
  background-color: rgb(from var(--green-light) r g b / .8);
  color: var(--green-dark);
  button {
    border-radius: 4px;
    border: 1px solid var(--green-med);
    background-color: var(--green-dark);
    padding-block: .5rem;
    padding-inline: 2rem;
    color: var(--green-light);
    font-size: 16px;
    cursor: pointer;
  }
}