.component.component--card {
  margin-bottom: 45px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: calc(15/10 * 1rem);

  color: var(--color--card--text);
  background-color: var(--color--card--background);

  a {
    color: var(--color--card--link);
  }

  h2, h3, h4, h5, h6 {
    color: var(--color--card--heading);
  }
}

.card {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;

  color: var(--color--card--text);
  background-color: var(--color--card--background);

  a {
    color: var(--color--card--link);
  }

  h2, h3, h4, h5, h6 {
    color: var(--color--card--heading);

    a {
      color: var(--color--card--heading);
    }
  }
}

.card--no-border {
  box-shadow: none;
  border-radius: 0;
}

.card--whole-card-link {
  a {
    &:after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
    }
  }
}

.card--small-flip-card {
  border-radius: calc(20/10 * 1rem);
  border: calc(2/10 * 1rem) solid white;
  padding: calc(25/10 * 1rem) calc(20/10 * 1rem) calc(20/10 * 1rem) calc(20/10 * 1rem);
  width: 100%;
  height: 100%;

  @container (width > calc(992/10 * 1rem)) {
    border: calc(3/10 * 1rem) solid white;
    padding: calc(25/10 * 1rem) calc(20/10 * 1rem) calc(20/10 * 1rem) calc(20/10 * 1rem);
  }

  @container (width > calc(1200/10 * 1rem)) {
    border: calc(4/10 * 1rem) solid white;
    padding: calc(30/10 * 1rem) calc(25/10 * 1rem) calc(25/10 * 1rem) calc(25/10 * 1rem);
  }
}