.pricing {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  text-align: center;
  z-index: 1;
}

.pricing__card {
  gap: var(--space-neutral);
  padding: var(--space-neutral) var(--space-medium) var(--space-medium) var(--space-medium);
  width: min(100%, 19em);
}

.pricing__card header {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.pricing__card header h3 {
  font-family: 'Really Sans Large';
  font-feature-settings: 'case', 'liga', 'ss04';
  font-size: var(--font-size-large);
  font-weight: 850;
  letter-spacing: normal;
  line-height: 1.1;
  margin-bottom: 0.1em;
  margin-top: -0.1425em;
}

.pricing__card header p {
  font-size: var(--font-size-x-small);
  letter-spacing: -0.0125em;
  line-height: 1.3;
  margin-bottom: -0.3275em;
}

.pricing__card header p br {
  display: none;
}

.pricing__card header a {
  background: var(--color-blurple);
  border-radius: 0.45em;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  margin-top: 0.9em;
  padding: 1.3em;
  position: relative;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.pricing__card header a dl {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.pricing__card header a dl dt {
  margin-bottom: -0.4325em;
  margin-top: -0.1975em;
  vertical-align: text-bottom;
}

.pricing__card header a dl dt s,
.pricing__card header a dl dt strong {
  display: inline-block;
  font-family: 'Really Sans Large';
  font-feature-settings: 'case', 'liga', 'ss04';
  font-size: var(--font-size-xx-large);
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1;
}

.pricing__card header a dl dt s {
  margin-right: 0.075em;
  position: relative;
  text-decoration: none;
}

.pricing__card header a dl dt s:before {
  background: var(--color-coral);
  border-radius: 0.15em;
  content: '';
  height: 0.15em;
  left: -9%;
  position: absolute;
  top: 38.5%;
  transform: rotate(-10deg);
  width: 118%;
}

.pricing__card header a dl dt span {
  display: inline-block;
  font-size: var(--font-size-xx-small);
  line-height: 1.05;
}

.pricing__card header a dl dd {
  background: linear-gradient(135deg, var(--color-cobalt) 0, rgba(var(--rgb-cobalt), 0.6) 100%);
  box-shadow:
    0 0.8em 0.4em -0.8em rgba(var(--rgb-black), 0.1),
    0 1.2em 0.8em -1.2em rgba(var(--rgb-black), 0.2),
    0 1.6em 1.2em -1.6em rgba(var(--rgb-black), 0.3)
  ;
}

.pricing__card article {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3em;
}

.pricing__card article h4 {
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: -0.0125em;
  margin-top: -0.285em;
}

.pricing__card article dl {
  align-items: center;
  background: var(--color-stone-light);
  border-radius: 0.7em;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-xxx-small);
  gap: 0.15em;
  letter-spacing: -0.0125em;
  padding: 1.3em;
}

.pricing__card article dl dt {
  color: var(--color-blurple);
  font-weight: 500;
  margin-top: -0.235em;
}

.pricing__card article dl dd {
  margin-bottom: -0.325em;
}

.pricing__card article dl dd a {
  color: inherit;
}

.pricing__card article dl .pricing__feature--mint {
  background: var(--color-mint-light);
}

.pricing__card article hr {
  align-items: center;
  display: flex;
  flex: 1;
  height: 1em;
  justify-content: center;
}

.pricing__card article hr:before {
  color: var(--color-black);
  content: '+';
  font-size: var(--font-size-small);
  font-weight: 500;
  margin-bottom: -0.4175em;
  margin-top: -0.3175em;
}

@media(min-width: 64em) {

  .pricing {
    align-items: normal;
    flex-direction: row;
    gap: var(--space-neutral);
    justify-content: center;
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }

  .pricing__card {
    padding: var(--space-neutral);
  }

  .pricing__card header p br {
    display: inline;
  }

}