:root {
  --white: #fff;
  --black: #000;
  --gray: #666666;
  --very-light-gray: #bbb;
  --purple: #705dcb;
  --teal: #4ca2bd;
  --faded-yellow: #fdf9d3;
  --faded-green: #e4ffee;
  --faded-purple: #eff2ff;
  --faded-red: #f8e8e5;
  --faded-blue: #eff7fa;
  --faded-darker-purple: #eaedf9;
  --editor-bg-light: #1e242e;
  --editor-bg-dark: #151a21;
  --shadow: #999;
}

body {
  background: var(--faded-yellow);
}

@media only screen and (min-width: 48rem) {
  #showcases .showcases-container {
    aspect-ratio: 16/10;
  }
  #showcases .showcases-container .showcase {
    aspect-ratio: none;
  }
}

.details-bg {
  background-image: none;
}
@media only screen and (min-width: 64rem) {
  .details-bg {
    background-repeat: no-repeat;
    background-image: url("/deploy/office_illustration.png");
    background-size: 64rem auto;
    background-position: bottom -6rem right -8rem;
  }
}
@media only screen and (min-width: 96rem) {
  .details-bg {
    background-position: bottom -6rem right 0;
  }
}

.card {
  grid-template: "heading" "img" "text" "button";
}
@media only screen and (min-width: 64rem) {
  .card {
    grid-template: "img heading button" "img text button";
    grid-template-rows: auto auto;
    grid-template-columns: 12rem auto 8rem;
  }
}