.features {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  z-index: 1;
}

.features__container {
  column-gap: var(--space-neutral);
  column-width: 12em;
  margin-top: calc(-1 * var(--space-large));
  text-align: center;
}

.features__container * {
  will-change: opacity;
}

.features__card {
  align-items: center;
  color: var(--color-black);
  display: inline-flex;
  font-weight: 400;
  margin-top: var(--space-large);
  padding: var(--space-neutral);
  text-align: center;
  text-decoration: none;
}

.features__card .badge {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}

.features__card dl {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.features__card dl:before {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: flex;
  height: 2.2em;
  margin-bottom: 0.6em;
  width: 100%;
}

.features__card dl dt {
  color: var(--color-blurple);
  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;
}

.features__card dl dd {
  font-size: var(--font-size-small);
  letter-spacing: -0.0125em;
  margin-bottom: -0.3775em;
}

.features__card:nth-child(1n+1) dl:before {
  background-image: url(/assets/images/pebble/purple.svg);
}

.features__card:nth-child(2n+1) dl:before {
  background-image: url(/assets/images/pebble/pink.svg);
}

.features__card:nth-child(3n+1) dl:before {
  background-image: url(/assets/images/pebble/orange.svg);
}

.features__card:nth-child(4n+1) dl:before {
  background-image: url(/assets/images/pebble/blue.svg);
}

.features__card:nth-child(5n+1) dl:before {
  background-image: url(/assets/images/pebble/pink-purple.svg);
}

.features__card:nth-child(6n+1) dl:before {
  background-image: url(/assets/images/pebble/teal.svg);
}

.features__card:nth-child(7n+1) dl:before {
  background-image: url(/assets/images/pebble/blue-pink.svg);
}

.features__card:nth-child(8n+1) dl:before {
  background-image: url(/assets/images/pebble/yellow-peach.svg);
}

.features__card:nth-child(9n+1) dl:before {
  background-image: url(/assets/images/pebble/blue-yellow.svg);
}

.features__card:nth-child(10n+1) dl:before {
  background-image: url(/assets/images/pebble/red.svg);
}

.features__card:nth-child(11n+1) dl:before {
  background-image: url(/assets/images/pebble/green.svg);
}

.features__card--hey-for-domains {
  border: 1px solid var(--color-hey-for-domains);
}

.features__card--hey-for-you {
  border: 1px solid var(--color-hey-for-you);
}

@media(min-width: 64em) {

  .features {
    padding-left: var(--space-large);
    padding-right: var(--space-large);
  }

  .features__card dl dt {
    font-size: var(--font-size-small);
  }

  .features__card dl dd {
    font-size: var(--font-size-xx-small);
  }

}

.features-controls {
  align-items: center;
  display: flex;
  gap: var(--space-neutral);
  justify-content: center;
  margin-inline: auto;
  padding: var(--space-large) var(--space-medium);
  pointer-events: none;
  width: min(100%, 30em);
}

@media(min-width: 64em) {

  .features-controls {
    bottom: 50%;
    height: 0;
    justify-content: space-between;
    padding: 0 var(--space-medium) var(--space-xx-large) var(--space-medium);
    position: sticky;
    width: 100%;
    z-index: 2;
  }

}

.features-control {
  align-items: center;
  display: flex;
  justify-content: center;
}

.features-control a {
  align-items: center;
  border-radius: 1.65em;
  color: var(--color-blurple);
  display: flex;
  gap: 0.125em;
  padding-bottom: 0.425em;
  padding-top: 0.425em;
  pointer-events: auto;
  text-decoration: none;
}

.features-control a svg {
  display: flex;
  height: 0.8em;
  width: 0.5em;
}

.features-control a svg path {
  fill: var(--color-blurple);
}

.features-control a span {
  color: var(--color-blurple);
  font-feature-settings: 'c2sc', 'smcp';
  font-size: var(--font-size-x-small);
  font-weight: 500;
  letter-spacing: -0.0175em;
  line-height: 1em;
}

.features-control--prev {
  left: var(--space-medium);
}

.features-control--prev a {
  padding-left: 0.6em;
  padding-right: 0.7em;
}

.features-control--next {
  right: var(--space-medium);
}

.features-control--next a {
  padding-left: 0.7em;
  padding-right: 0.6em;
}

@media(hover: hover) {

  .features-control a {
    transition: background var(--transition);
  }

  .features-control a:focus,
  .features-control a:hover {
    background: rgba(var(--rgb-grey), 0.1);
  }

}

@media(min-width: 64em) {

  .features-control {
    bottom: 100%;
    position: absolute;
  }

}