@media screen and (min-width: 65em) {
  :root {
    .purple {
      --grid-column-start: 1;
      --grid-column-end: 4;
      --grid-row-start: 1;
      --grid-row-end: 2;
    }

    .gray {
      --grid-column-start: 4;
      --grid-column-end: 6;
      --grid-row-start: 1;
      --grid-row-end: 1;
    }

    .white1 {
      --grid-column-start: 1;
      --grid-column-end: 2;
      --grid-row-start: 2;
      --grid-row-end: 3;
    }

    .white2 {
      --grid-column-start: 6;
      --grid-column-end: 6;
      --grid-row-start: 1;
      --grid-row-end: 3;
    }

    .blue {
      --grid-column-start: 2;
      --grid-column-end: 6;
      --grid-row-start: 2;
      --grid-row-end: 2;
    }
  }

  body {
    padding-right: 10em;
    padding-left: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .content {
    display: grid;
    gap: 1em;
    place-items: center;
    justify-content: stretch;
    align-items: stretch;
  }

  .description-bold {
    margin-bottom: 0.5em;
  }

  .card {
    grid-column-start: var(--grid-column-start);
    grid-column-end: var(--grid-column-end);
    grid-row-start: var(--grid-row-start);
    grid-row-end: var(--grid-row-end);
    padding: 1em;
  }

  .quote-img {
    display: flow-root;
    position: absolute;
    top: 0;
    right: 2em;
  }
}