.meta-data {
  display: grid;
  margin: 2rem 0;
  grid-template-columns: repeat(2, auto);
  column-gap: 2ch;
  row-gap: 1ex;
  align-items: center;
  font-weight: 400;
}
.meta-data a {
  font-weight: 600;
}
.meta-data dt, .meta-data dd {
  margin: 0;
}
.meta-data dt {
  font-size: 0.875rem;
  color: var(--neutral);
}
.meta-data dt:after {
  content: ":";
}

h1.blog {
  backdrop-filter: blur(5px);
  background: var(--alt-background);
  padding: 1rem;
  color: var(--accent);
  margin: 0;
  border-top: solid 1px var(--border);
  border-bottom: solid 1px var(--border);
}
h1.blog small {
  color: var(--primary);
}

figcaption {
  display: block;
  line-height: 1.25;
  font-weight: 500;
}

figcaption:before {
  font-style: italic;
}

.blog img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  background: #fafafa;
  border: solid 1px var(--border);
}

.hero {
  display: block;
  margin: 0;
}
.hero img {
  margin-bottom: 1rem;
  object-fit: cover;
  max-height: 275px;
  width: 100%;
  border: none;
}

figcaption.license-and-attribution {
  font-style: italic;
  margin-top: -1rem;
  font-size: 0.85em;
}
figcaption.license-and-attribution p {
  margin-top: 0;
}

blockquote {
  border-left: solid 3px var(--secondary);
  margin-left: 0;
  padding-left: 1rem;
}
blockquote, blockquote p {
  line-height: 1.3;
}

section.call-to-action {
  outline-offset: 4px;
  padding: 1px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%, 0 15%);
  shape-outside: polygon(10% 0%, 90% 0%, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%, 0 15%);
  background: var(--primary);
  border: none;
}
section.call-to-action .inner {
  background: var(--background);
  clip-path: polygon(10% 0%, 90% 0%, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%, 0 15%);
}
section.call-to-action .content-container {
  padding: 1rem 2rem;
}
section.call-to-action h2 {
  margin: 0;
  text-align: center;
}
section.call-to-action img {
  display: block;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
}
section.call-to-action .actions {
  display: flex;
  align-items: center;
  margin: 0;
}
section.call-to-action .actions a {
  display: block;
  background: var(--primary);
  border: solid 1px var(--primary);
  color: var(--primary-contrast);
  border-radius: 4px;
  padding: 1rem;
  text-decoration: none;
}
section.call-to-action .actions a:hover, section.call-to-action .actions a:focus {
  cursor: pointer;
  outline: solid 1px var(--secondary);
  outline-offset: 2px;
}

a.external-card {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  border-radius: 8px;
  border: solid 1px var(--secondary);
  color: var(--color);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  font-weight: normal;
}
a.external-card:hover, a.external-card:focus {
  outline: solid 1px var(--links);
  outline-offset: 2px;
}
a.external-card img {
  border-radius: 7px 0 0 7px;
  border: none;
  height: 100%;
  object-fit: cover;
}
a.external-card .card-content {
  padding: 1rem;
}
a.external-card .site-info {
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  flex-wrap: wrap;
}
a.external-card .url {
  color: var(--links);
}
a.external-card .title {
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--primary);
}
a.external-card .link-text {
  text-align: right;
  color: var(--links);
  font-weight: 500;
}

article, .content {
  columns: 1;
  text-align: justify;
  hyphens: auto;
  widows: 3;
  text-wrap: pretty;
}

@media (min-width: 630px) {
  .meta-data {
    grid-template-columns: repeat(2, auto);
  }
  .meta-data dt.category, .meta-data dt.published, .meta-data dt.word-count {
    grid-column: 1;
  }
  .meta-data dd.category, .meta-data dd.published, .meta-data dd.word-count {
    grid-column: 2;
  }
  .meta-data dd.tags a:not(:last-of-type)::after {
    content: ", ";
  }
  .meta-data dt.tags, .meta-data dt.reading-time, .meta-data dt.updated {
    grid-column: 3;
  }
  .meta-data dd.tags, .meta-data dd.reading-time, .meta-data dd.updated {
    grid-column: 4;
  }
  .meta-data dt.technology-versions {
    grid-column: 1;
  }
  .meta-data dd.technology-versions {
    grid-column: 2;
  }
  .meta-data dt.share {
    grid-column: 3;
  }
  .meta-data dd.share {
    grid-column: 4;
  }
}
lite-youtube {
  max-width: none;
}