.plugin .plugin-cards {
  grid-template-columns: repeat(1, 1fr);
}

.plugin > .box {
  margin-bottom: var(--spacing-12);
}

@container (min-width: 40rem) {
  .plugin .plugin-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plugin-features {
  --features-columns: 1;
  --features-margin: var(--spacing-8);
  margin-bottom: var(--features-margin);
}

@container (min-width: 40rem) {
  .plugin-features {
    --features-columns: 3;
    --features-margin: var(--spacing-12);
  }
}

@container (min-width: 70rem) {
  .plugin-features {
    --features-margin: var(--spacing-24);
  }
}

.plugin-header {
  display: grid;
  grid-auto-rows: auto;
  grid-template-areas:
    "info"
    "preview"
    "ctas";
  margin-bottom: var(--spacing-8);
}

.plugin-header .plugin-teaser {
  grid-area: preview;
  justify-self: start;
  align-self: end;
  margin-bottom: var(--spacing-8);
}

@container (min-width: 60rem) {
  .plugin-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "info preview"
      "ctas preview";
    column-gap: var(--spacing-3);
    margin-bottom: var(--spacing-16);
  }

  .plugin-header .plugin-info,
  .plugin-header .plugin-title,
  .plugin-header .plugin-ctas {
    padding-right: var(--spacing-6);
  }

  .plugin-header .plugin-teaser {
    justify-self: end;
    align-self: start;
    margin-bottom: 0;
  }
}

.plugin-header .plugin-teaser:where([data-type="image"], [data-type="video"]) {
  display: flex;
  justify-content: end;
  align-items: start;
}
.plugin-header .plugin-teaser[data-type="image"] img,
.plugin-header .plugin-teaser[data-type="video"] video,
.plugin-header .plugin-teaser[data-type="logo"] {
  outline: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--rounded);
  box-shadow: var(--shadow);
  width: auto;
  max-width: 100%;
  max-height: 50vh;
}
.plugin-header .plugin-teaser[data-type="logo"] {
  aspect-ratio: 2/1;
  width: 100%;
}
.plugin-header .plugin-teaser[data-type="code"] {
  overflow: hidden;
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-xl);
  --code-font-size: var(--text-md);
  background: var(--color-black);
  aspect-ratio: 2/1;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 30rem;
}

.plugin-header .plugin-info {
  grid-area: info;
  margin-bottom: var(--spacing-8);
}

.plugin-header .plugin-title {
  font-weight: var(--font-h1);
  margin-bottom: var(--spacing-6);
}

.plugin-header .developer-pill-link {
  margin-bottom: var(--spacing-8);
}

.plugin-header .plugin-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-dimmed);
  line-height: 1.375;
}

.plugin-header .plugin-ctas {
  grid-area: ctas;
  container-type: inline-size;
  align-self: flex-start;
}
.plugin-header .plugin-ctas .button:not([data-size="xs"]) {
  height: var(--height);
}

.plugin-cta-links,
.plugin-cta-actions {
  --columns: 1;
  display: grid;
  gap: var(--spacing-2);
  grid-template-columns: repeat(var(--columns), 1fr);
}

.plugin-cta-links {
  margin-bottom: var(--spacing-2);
}

@container (min-width: 15rem) {
  .plugin-cta-links[data-links="2"],
  .plugin-cta-links[data-links="4"] {
    --columns: 2;
  }
}

@container (min-width: 20rem) {
  .plugin-cta-links[data-links="3"] {
    --columns: 3;
  }
}

@container (min-width: 25rem) {
  .plugin-cta-links[data-links="4"] {
    --columns: 4;
  }
  .plugin-cta-actions:has(:nth-child(2)) {
    --columns: 2;
  }
}

.plugin-info {
  --info-columns: 1;
  font-size: var(--text-sm);
}
.plugin-info dl {
  display: grid;
  grid-template-columns: repeat(var(--info-columns), 1fr);
  line-height: 1.25;
  gap: var(--spacing-6);
}

@container (min-width: 30rem) {
  .plugin-info {
    --info-columns: 2;
  }
}

@container (min-width: 50rem) {
  .plugin-info {
    --info-columns: 4;
  }
}

.plugin-info dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-dimmed);
  margin-bottom: var(--spacing-2);
}
.plugin-info a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}
.plugin-info a svg {
  width: 16px;
  height: 16px;
}

.plugin-info dd[data-theme] a {
  color: var(--theme-color-800);
}
.plugin-info dd[data-theme] svg {
  color: var(--theme-color-700);
}

.plugin-meta {
  --meta-columns: 1;
}
.plugin-meta dl {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(var(--meta-columns), 1fr);
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

@container (min-width: 20rem) {
  .plugin-meta {
    --meta-columns: 2;
  }
}

@container (min-width: 30rem) {
  .plugin-meta {
    --meta-columns: 3;
  }
}

@container (min-width: 60rem) {
  .plugin-meta {
    --meta-columns: 6;
  }
}

.plugin-meta div {
  flex-basis: calc(50% - var(--spacing-6));
  text-align: center;
  padding: var(--spacing-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--rounded);
  background: rgba(255, 255, 255, 0.3);
}

.plugin-meta dt {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.plugin-meta dd {
  font-size: var(--text-sm);
}
.plugin-meta a {
  color: var(--link-color);
  border-radius: var(--rounded-xs);
  outline-offset: 2px;
}

.plugin-meta .plugin-meta-versions {
  justify-content: center;
}

.plugin-features dl {
  display: grid;
  grid-template-columns: repeat(var(--features-columns), 1fr);
  gap: var(--spacing-6) var(--spacing-3);
}
.plugin-feature {
  border-radius: var(--rounded-lg);
  line-height: 1.375;
  padding-right: var(--spacing-6);
}
.plugin-feature dt {
  font-weight: var(--font-semi);
}
.plugin-feature dd {
  color: var(--color-text-dimmed);
}
.plugin-feature-icon {
  display: grid;
  place-items: center;
  width: var(--height);
  height: var(--height);
  background: var(--color-gray-100);
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing-3);
  border-radius: var(--rounded);
}