.com-featured-link {
  /* Layout */
  --com-featured-link-margin-sibling    : 16px;
  --com-featured-link-padding           : 20px;
  /* Colors */
  --color-com-featured-link-bg          : hsl(0 0% 98% / p1);
  --color-com-featured-link-border      : hsl(0 0% 50% / 0.5);
  --color-com-featured-link-border-left : var(--color-primary-yellow);
  /* Misc */
  --com-featured-radius                 : 0;
}

.com-featured-link { width: 100%; margin-left: auto; margin-right: auto; }

.editor-info-page {
  .com.com-featured-link + .com.com-featured-link {
    margin-top: var(--com-featured-link-margin-sibling);
  }
}

.com-featured-link a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--com-featured-link-padding);
  text-decoration: none;
  color: var(--color-text-color);
  background: var(--color-com-featured-link-bg);
  border: 1px solid var(--color-com-featured-link-border);
  border-left: 20px solid var(--color-com-featured-link-border-left);
  border-radius: var(--com-featured-link-radius);
  transition: box-shadow ease-out 200ms;
}
.com-featured-link a[href]:hover { box-shadow: 0 0 24px 0 hsl(0 0% 50% / 50%); }

.com-featured-link header { color: var(--color-primary-purple); }
.com-featured-link p { margin: 8px 0 0 0; }

.com-featured-link-icon { margin-left: 16px; }
.com-featured-link-icon svg {
  width: 80px; height: auto;
  stroke: var(--color-primary-teal); stroke-opacity: 0.5;
  transition: stroke-opacity ease-out 200ms, transform ease-out 200ms;
}
.com-featured-link a[href]:hover svg {
  stroke-opacity: 1;
  transform: scale(1.1);
}