.article {
   margin: var(--spacing-l) 0;
}
.articleContainer {
   width: 80%;
   margin: 0 auto;
}
.article img {
   border-radius: var(--border-radius);
}

/* HEADER */
.article h1 {
   width: 80%;
   margin: var(--spacing-xs) 0 var(--spacing-m) 0;
}
ul.article__authors {
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: var(--spacing-l);
}
ul.article__authors li {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: .5rem 1.5rem;
   border-radius: 3rem;
   background: var(--color-bg-500);
}
/* SPECIFIC STYLING DEPENDING ON THE TAG */
.article__authors_author--misc {
   color: var(--color-primary);
   font-weight: bold;
}

.article__authors_author--update {
   color: var(--color-secondary);
   font-weight: bold;
}

.article__authors_author--event {
   color: var(--color-accent);
   font-weight: bold;
}
img.article__authors_authorImage {
   width: 2rem;
   border-radius: 2rem;
   margin-left: -1rem;
}
ul.article__authors li.article__authors_readingTime {
   background: var(--color-primary);
   color: white;
}
.article__authors_readingTime svg {
   margin-left: -.5rem;
   fill: black;
   opacity: .3;
}
figure.article__heroImage {
   margin-bottom: var(--spacing-l);
   display: block;
}
figure.article__heroImage img {
   width: 100%;
   display: block;
}

/* ARTICLE CONTENT */
.article__body figure {
   display: block;
}
.article__body img {
   display: block;
   width: 100%;
   height: auto;
}
.article__body h2, .article__body h3, .article__body h4, .article__body h5 {
   padding: 1em 0 1em 0; /* Padding in order to prevent margin overlapping! */
}
.article__body p {
   padding-bottom: var(--spacing-markup); /* Padding in order to prevent margin overlapping! */
}
.article__body ul {
   margin: .35em 0 1em;
   padding: 0;
}
.article__body ul li {
   list-style: none;
   position: relative;
   padding: 0 0 0 1.5em;
}
.article__body ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .5em;
   height: .35em;
   width: .35em;
   border: var(--border);
   border-color: var(--color-primary);
   border-width: .15em .15em 0 0;
   transform: rotate(45deg);
}
.article__body ol {
   counter-reset: ol-counter var(--ol-start, 0);
   list-style-type: none;
}
.article__body ol[start] {
   --ol-start: calc(attr(start number) - 1);
}
.article__body ol li {
   counter-increment: ol-counter;
   position: relative;
   padding: 0 0 0 1.5em;
}
.article__body ol li::before {
   content: counter(ol-counter) ". ";
   position: absolute;
   left: 0;
   font-family: var(--font-family-title);
   font-size: 1rem;
   font-weight: bold;
   color: var(--color-title);
}
.article__body hr {
   border: none;
   height: 1px;
   background: var(--color-border);
   margin: var(--spacing-markup) 0 calc(2*var(--spacing-markup)) 0;
}
.article__body a {
   color: var(--color-primary);
   border-bottom: var(--border);
   border-width: 2px;
   transition: var(--transition);
}
.article__body p:last-child,
.article__body ul:last-child,
.article__body ol:last-child {
   padding-bottom: 0;
}
.article__body a:hover {
   border-color: var(--color-primary);
}
.article figure {
   position: relative;
}
.article figcaption {
   font-style: italic;
   text-align: center;
   margin-top: var(--spacing-s);
   display: block;
   color: var(--color-text)
}

/* ARTICLE CONTENT -- QUOTE */
blockquote {
   font-family: var(--font-family-title);
   font-size: 2rem;
   line-height: 1em;
   text-transform: uppercase;
   color: var(--color-title);
   position: relative;
   padding-left: 4rem;
   margin: var(--spacing-markup) 0 calc(2*var(--spacing-markup)) 0;
   max-width: 80%;
}
blockquote::before {
   content: url("../images/icon-quote.svg");
   opacity: .5;
   position: absolute;
   left: .75rem;
   top: .5rem;
   z-index: 2;
}
blockquote::after {
   content: "";
   background: var(--color-primary);
   display: inline-block;
   width: 3rem;
   height: 3rem;
   border-radius: var(--border-radius);
   text-align: center;
   position: absolute;
   left: 0;
   top: 0;
}
/* ARTICLE CONTENT -- BOOKMARK */
.kg-bookmark-card {
   background: var(--color-bg-700);
   border: var(--border);
   border-radius: var(--border-radius);
   margin-bottom: var(--spacing-markup);
}
.kg-bookmark-container {
   display: grid;
   grid-template-columns: 70% 30%;
}
.kg-bookmark-card a {
   color: var(--color-title);
   border: 0;
}
.kg-bookmark-content {
   padding: var(--spacing-grid);
}
.kg-bookmark-title {
   font-family: var(--font-family-title);
   text-transform: uppercase;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
}
.kg-bookmark-title::after {
   content: '';
   width: 1.5rem;
   height: 1rem;
   display: inline-block;
   -webkit-mask: url("../images/icon-link.svg") no-repeat 50% 50%;
   mask: url("../images/icon-link.svg") no-repeat 50% 50%;
   -webkit-mask-size: cover;
   mask-size: cover;
   background: var(--color-primary);
   margin-left: 0;
   opacity: 0;
   transition: var(--transition);
}
.kg-bookmark-card:hover .kg-bookmark-title::after {
   opacity: 1;
   margin-left: 1rem;
}
.kg-bookmark-description {
   color: var(--color-text);
   margin-bottom: 2rem;
}
.kg-bookmark-metadata {
   display: flex;
   align-items: center;
   gap: 1rem;
   color: var(--color-text);
}
.kg-bookmark-metadata .kg-bookmark-icon {
   width: 2rem;
   height: 2rem;
}
.kg-bookmark-thumbnail img {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ARTICLE CONTENT -- IMAGES, VIDEO & GALLERIES */
.kg-image-card {
   margin: calc(2*var(--spacing-markup)) 0;
}
.kg-embed-card {
   border-radius: var(--border-radius);
   margin: calc(2*var(--spacing-markup)) 0;
}
.kg-embed-card iframe {
   width: 100%;
   min-height: 40vh;
   border-radius: var(--border-radius);
}
p + .kg-gallery-card,
ul + .kg-gallery-card,
.kg-gallery-card + p,
.kg-gallery-card + ul {
   margin-top: calc(2*var(--spacing-markup));
}
.kg-image-card + .kg-gallery-card,
.kg-gallery-card + .kg-image-card,
.kg-gallery-card + .kg-gallery-card {
   margin: var(--spacing-grid) 0;
}
.kg-gallery-container {
   position: relative;
}
.kg-gallery-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
}
.kg-gallery-image img {
   display: block;
   margin: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.kg-gallery-row:not(:first-of-type) {
   margin: var(--spacing-grid) 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
   margin: 0 0 0 var(--spacing-grid);
}

/* ARTICLE CONTENT -- CODE BLOCK */
pre {
   white-space:pre-wrap;
}
.kg-code-card {
   font-size: 1rem;
   background: var(--color-bg-700);
   padding: var(--spacing-grid);
   border-radius: var(--border-radius);
   color: var(--color-title);
   margin-bottom: var(--spacing-markup);
}
.kg-code-card figcaption {
   position: initial;
   padding: 0;
   background: none;
   margin-top: var(--spacing-grid);
   color: var(--color-text);
   opacity: .5;
}

/* SUBSCRIBER'S NOTIFICATION */
.gh-post-upgrade-cta, .gh-post-upgrade-cta-content {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   color: white;
   font-size: 1rem;
   font-family: var(--font-family-text);
   border-radius: var(--border-radius);
   background: var(--color-accent) !important;
}
.article .gh-post-upgrade-cta-content {
   padding: var(--spacing-grid);
   border: var(--border-glow);
}
.article .gh-post-upgrade-cta a.gh-btn {
   font-family: var(--font-family-title);
   font-size: 1.25rem;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: var(--spacing-grid);
   padding: .75rem 1.5rem;
   border-radius: 3rem;
   border: var(--border-width) solid transparent;
   color: var(--color-accent) !important;
   margin-top: var(--spacing-m);
}
.article .gh-post-upgrade-cta p {
   margin-top: var(--spacing-grid);
}
.article .gh-post-upgrade-cta a {
   text-decoration: none;
   font-weight: bold;
   border-color: rgba(255,255,255,.3);
}
.article .gh-post-upgrade-cta a:hover {
   border-color: white;
   text-decoration: none;
   opacity: 1;
}
.gh-post-upgrade-cta::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: -100%;
   left: 0;
   background: var(--color-bg-900);
   z-index: -1;
   -webkit-mask-image: -webkit-gradient( linear, left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
   mask-image: linear-gradient(left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

/* NEXT & PREVIOUS POST */
.article__related {
   margin: var(--spacing-l) 0;
}
.article__related .container {
   display: grid;
   gap: var(--spacing-grid);
}
.article__related .backgroundCard {
   padding: 0;
}
.article__related .backgroundCard > a {
   box-sizing: border-box;
   padding: var(--spacing-m) 0;
}

/* MEDIA QUERIES */
@media only screen and (min-width: 800px) {
   .article__related .container {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
}
@media only screen and (max-width: 800px) {
   .articleContainer,
   .article h1 {
      width: 100%;
   }

   /* ARTICLE CONTENT */
   .article figcaption {
      bottom: 1rem;
      left: 1rem;
      padding: .5rem 1rem;
      max-width: calc(100vw - 4rem);
   }
   blockquote {
      max-width: 100%;
   }

   /* ARTICLE CONTENT -- IMAGES, VIDEO & GALLERIES */
   .kg-image-card {
      margin: 1rem 0;
   }

   /* ARTICLE CONTENT -- BOOKMARK */
   .kg-bookmark-content {
      padding: 1rem;
   }
   .kg-bookmark-title::after {
      -webkit-mask: initial;
      mask: initial;
      background: none;
   }
   /* ARTICLE CONTENT -- CODE BLOCK */
   .kg-code-card { 
      padding: 1rem;
   }
   .kg-code-card figcaption {
      margin-top: 1rem;
      padding: 0;
   }
}