.compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 25em);
}

.compare__card {
  background: var(--color-black);
  flex: 1;
  gap: var(--space-neutral);
  overflow: hidden;
  text-align: center;
}

.compare__card header {
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  padding: var(--space-neutral) var(--space-neutral) 0 var(--space-neutral);
}

.compare__card header h3 {
  font-family: 'Really Sans Large';
  font-feature-settings: 'case', 'liga', 'ss04';
  font-weight: 850;
  letter-spacing: normal;
  line-height: 1.2;
  margin-bottom: -0.3125em;
  margin-top: -0.175em;
}

.compare__card figure {
  padding-left: var(--space-neutral);
  padding-right: var(--space-neutral);
}

.compare__card figure img {
  filter: drop-shadow(0.4em 0.4em 0.8em rgba(var(--rgb-black), 0.4));
}

.compare__card footer {
  background: var(--color-salmon);
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: var(--space-medium);
}

.compare__card footer p {
  font-size: var(--font-size-x-small);
  letter-spacing: -0.0125em;
  line-height: 1.3;
  margin-bottom: -0.3175em;
  margin-top: -0.2625em;
}

.compare__card footer p br {
  display: none;
}

.compare__card--hey {
  background: url(/assets/images/pebble/triple-three-angled.svg) center center / 200% no-repeat var(--color-mint-light);
}

.compare__card--hey header {
  color: var(--color-blurple);
}

.compare__card--hey footer {
  background: var(--color-blurple);
  color: var(--color-white);
}

@media(min-width: 64em) {

  .compare {
    flex-direction: row;
    gap: var(--space-neutral);
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
    width: min(100%, 36em);
  }

  .compare__card footer p br {
    display: inline;
  }

}