/* Exact art from Alyeon's supplied 36-icon board, displayed by CSS cropping. */
.feature-combo-directory .feature-combo-group > a {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 52px;
  gap: 10px;
}

.feature-combo-directory .feature-combo-group i.feature-library-icon,
.platform-section .tab i.feature-library-icon {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background-color: transparent;
  background-image: url('alyeon-icon-library-board.png');
  background-repeat: no-repeat;
  background-size: var(--sprite-size);
  background-position: var(--icon-position);
  mix-blend-mode: multiply;
}

/* The AI butterfly and Integrations puzzle use the later final sheet. */
.feature-combo-directory .feature-combo-group i.feature-final-icon {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background-color: transparent;
  background-image: url('alyeon-final-feature-icons.png');
  background-repeat: no-repeat;
  background-size: 168.53px 84.27px; /* Original 1774 × 887 at 9.5%. */
}

.feature-combo-directory .feature-combo-group i.feature-final-icon-ai {
  background-position: -27.6px -21px;
}

.feature-combo-directory .feature-combo-group i.feature-final-icon-integrations {
  background-position: -107.7px -21.4px;
}

.feature-combo-directory .feature-combo-group > a:focus-visible {
  outline: 2px solid #862650;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .feature-combo-directory .feature-combo-group > a {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 52px;
  }

  .platform-section .tab i.feature-library-icon {
    display: block;
    width: 34px;
  }
}