:root {
  --dora-black: rgb(34, 30, 39);
  --dora-warm-white: rgb(240, 238, 234);
  --dora-sky-blue: rgb(73, 160, 236);
  --dora-vermillion: rgb(245, 90, 36);
  --dora-spotlight-yellow: rgb(240, 225, 90);
  --dora-mauve: rgb(184, 175, 254);
  --dora-deep-plum: rgb(114, 2, 92);
  --dora-prussian-blue: rgb(11, 57, 84);
  --dora-primary-dark: var(--dora-black);
  --dora-primary-light: var(--dora-warm-white);
  --dora-highlight: var(--dora-spotlight-yellow);
  --dora-secondary-a: var(--dora-vermillion);
  --dora-secondary-b: var(--dora-sky-blue);
  --dora-secondary-c: var(--dora-mauve);
  --dora-tertiary-a: var(--dora-deep-plum);
  --dora-tertiary-b: var(--dora-prussian-blue); }

section.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  place-items: stretch; }
  section.features article {
    padding: 0;
    border: 1px solid #dadce0;
    border-radius: 8px; }
    section.features article h2 {
      background-color: #f8f9fa;
      margin: 0;
      padding: 1rem 1rem .5rem 1rem;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px; }
      section.features article h2 a {
        color: #202124;
        text-decoration: none; }
    section.features article div.content {
      display: flex;
      flex-direction: row; }
      section.features article div.content .text {
        padding: 1rem; }
      section.features article div.content .image {
        text-align: center; }
        section.features article div.content .image img {
          margin: 1rem; }
          section.features article div.content .image img.stroke {
            border: 1px solid #dadce0; }
      section.features article div.content.image-left {
        flex-direction: row-reverse; }
        @media (max-width: 800px) {
          section.features article div.content.image-left {
            flex-direction: column-reverse; } }
      @media (max-width: 800px) {
        section.features article div.content {
          flex-direction: column-reverse; } }
    section.features article.cols_1 img.feature {
      width: 10rem; }
      @media (max-width: 960px) {
        section.features article.cols_1 img.feature {
          width: 8rem; } }
    @media (max-width: 800px) {
      section.features article.cols_1 {
        grid-column: span 2; } }
    section.features article.cols_2 {
      grid-column: span 2; }
      section.features article.cols_2 img.feature {
        width: 16rem; }
        @media (max-width: 960px) {
          section.features article.cols_2 img.feature {
            width: 12rem; } }