.open-source-card {
  column-gap: var(--gutter);
  display: grid;
  row-gap: var(--baseline);
  margin-bottom: var(--baseline);

  background-color: var(--color-white);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-iron-400);
  padding-bottom: var(--space-lg);
  padding-left: var(--gutter);
  padding-right: calc(var(--gutter) * 2);
  padding-top: var(--space-lg);
  position: relative;


  h4 {
    color: var(--color-pastel-green-400);
    line-height: var(--line-height);
  }

  .col-details>* {
    margin-bottom: var(--space-sm);
  }

  .col-details:first-child,
  .col-details:last-child {
    padding-inline: var(--gutter);
    padding-left: var(--gutter);
  }

  @media (min-width: 0px) {
    .col-details {
      grid-column: span 4;
    }
  }

  /* @media (min-width: 40rem) {
    .col-details {
      grid-column: span 2;
    }
  } */

  @media (min-width: 64rem) {
    .col-details {
      grid-column: span 4;
    }
  }

  @media (min-width: 75rem) {
    .col-details {
      grid-column: span 3;
    }
  }


  .col-content {
    padding-left: var(--gutter);

    >div,
    >h3,
    >div>p {
      margin-bottom: var(--space-md);
    }
  }

  @media (min-width: 0px) {
    .col-content {
      grid-column: span 4;
    }
  }

  @media (min-width: 64rem) {
    .col-content {
      grid-column: span 7;
    }
  }

  .col-image {
    padding-left: 0px;

    &:last-child {
      padding-inline: var(--gutter);
    }

  }

  @media (min-width: 0px) {
    .col-image {
      grid-column: span 1;
    }
  }

  @media (min-width: 64rem) {
    .col-image {
      grid-column: span 2;
    }
  }
}

@media (min-width: 0px) {
  .open-source-card {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 40rem) {
  .open-source-card {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 64rem) {
  .open-source-card {
    grid-template-columns: repeat(12, 1fr);
  }
}

.github-button {
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  padding: 0.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid var(--color-downriver-400);
  color: var(--color-downriver-400);
}