/* VitePress 1.6.4, MIT. Extracted component styles; Vue scope replaced with the component class where needed. */
.VPFeature {
  display: block;
  border: 1px solid var(--vp-c-bg-soft);
  border-radius: 12px;
  height: 100%;
  background-color: var(--vp-c-bg-soft);
  transition: border-color 0.25s, background-color 0.25s;
}

.VPFeature.link:hover {
  border-color: var(--vp-c-brand-1);
}

.VPFeature .box {
  display: flex;
  flex-direction: column;
  padding: 24px;
  height: 100%;
}

.VPFeature .box > .VPImage {
  margin-bottom: 20px;
}

.VPFeature .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: var(--vp-c-default-soft);
  width: 48px;
  height: 48px;
  font-size: 24px;
  transition: background-color 0.25s;
}

.VPFeature .title {
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
}

.VPFeature .details {
  flex-grow: 1;
  padding-top: 8px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.VPFeature .link-text {
  padding-top: 8px;
}

.VPFeature .link-text-value {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}

.VPFeature .link-text-icon {
  margin-left: 6px;
}