a.card {
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.card h2 {
  margin-block-end: 0.5rem;
}
.card p {
  margin-block-start: 0rem;
  margin-block-end: 1.5rem;
}

.card-image {
  background-image: var(--background-image);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1.6 / 1;
  transition: background-size 0.2s ease;
  border-radius: 12px;
  border: solid 3px var(--color-tc-dark-green);
}

.card:hover .card-image {
  background-size: 108%;
}

.col:has(.card) {
  padding: 1rem;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
  outline: solid 3px transparent;
  outline-offset: -3px;
  transition:
    background-color 0.2s ease,
    outline-color 0.2s ease;
}
.col:has(.card:hover) {
  background-color: var(--color-tc-blue-white);
  outline-color: var(--color-tc-blueberry-milk);
}