@import "../../helpers";
:root {
  --color-text: rgba(255,255,255,0.5);
  --color-divider: rgba(255,255,255, 0.2);

  //COLORS
  --db-yellow: #E1BF7D;
  --db-yellow-dark: #D9AF5B;
  --db-red: #F78D72;
  --db-red-dark: #E26E51;
  --db-blue: #64A3B3;
  --db-blue-dark: #497E8C;
  --db-green: #77A377;
  --db-green-bright: #15DB95;
  --db-green-dark: #4A804A;
  --db-brown: #C0A593;
  --db-brown-dark: #AD8972;

  //GRADIENTS
  --db-yellow-gradient: linear-gradient(0deg, var(--db-yellow-dark) 0%, var(--db-yellow) 100%);
  --db-red-gradient: linear-gradient(0deg, var(--db-red-dark) 0%, var(--db-red) 100%);
  --db-blue-gradient: linear-gradient(0deg, var(--db-blue-dark) 0%, var(--db-blue) 100%);
  --db-green-gradient: linear-gradient(0deg, var(--db-green-dark) 0%, var(--db-green) 100%);
  --db-brightgreen-gradient: linear-gradient(0deg, var(--db-green-bright) 0%, var(--db-green-bright) 100%);
  --db-brown-gradient: linear-gradient(0deg, var(--db-brown-dark) 0%, var(--db-brown) 100%);
}
.db-card {
  display: block;
  font-family: var(--font-family--primary);
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(255,255,255,.06);
  &--span-2-rows {
    @include for-desktop {
      grid-row: 2 / 4;
    }
  }
}
.db-card__title {
  font-size: var(--font-size--xl);
  padding: 0.7em 0.8em;
  line-height: 1;
  color: var(--color-text);
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.db-card__content {
  padding: var(--spacer-base);
}
.db-card__content + .db-card__content {
  @include for-desktop {
    border-top: 4px solid var(--c-primary);
  }
}