/* Content */

article { position: relative; }

article h1 { margin: 0 auto 2rem; max-width: var(--maxwidth); }
.full h2 { position: relative; margin-top: 80px; }
.full h2::before { display: block; position: absolute; top: -35px; left: -10px; background: black; width: 100px; height: 5px; content: ""; }

.bigbutton { display: inline-block; border: 1px solid Crimson; border-radius: 10rem; background: Crimson; padding: 1rem 2rem; color: white; text-decoration: none; }
.bigbutton:hover, .bigbutton:focus { background: white; color: Crimson; }

.cm { margin: 0 auto; padding: 0 var(--mainpadding) 30px; max-width: var(--maxwidth); }
.cm.wide { max-width: var(--maxwidthl); }
.coverimage .cm { position: relative; z-index: 1; background: white; }

@media (max-width: 600px) {
  .cm { padding: 0 30px 30px; max-width: 100vw; }
}

.cm.intro--inline { margin-bottom: 60px; }
.intro--inline h1 { display: inline; font-size: 3.6rem; line-height: 1.4; }
.intro--inline p { display: inline; font-size: 3.6rem; line-height: 1.4; }
.intro--blog h1::after { display: inline; margin: 0 8px; content: "//"; }
.intro--book h1::before { display: inline; margin: 0 8px; content: "//"; }

.cm.teaser { margin-bottom: 48px; }
.teaser .meta__info { margin-bottom: 0.8rem; font-size: 1.6rem; line-height: 1; }
.teaser h2 { position: relative; margin-top: 0; }
.teaser h2::before { display: none; content: ""; }

.video-item iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }

.cm-quote { display: flex; flex-direction: column; gap: 10px; }
.cm-quote-text { padding: 40px 40px 20px 40px; font-size: 3rem; }
.cm-quote-image { position: relative; align-self: flex-start; width: 120px;height: 120px; }
.cm-quote-image::before { display: block; position: absolute; top: -20px; right: -20px; border-width: 40px 20px 0 0; border-style: solid; border-color: Crimson transparent transparent transparent;  width: 0; height: 0; content: ''; }

.cm-divider { margin: 12rem auto; text-align: center; }
.cm-divider svg { width: 8rem; height: 8rem; }

.cm-media img { border: 2px solid #EEE; padding: 2px; }

.cm-two-images--two-captions { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cm-two-images--two-captions figure { background-color: #EEE; }

.cm-two-images--one-caption figure { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cm-two-images--one-caption figcaption { grid-column: 1 / span 2; }

@media screen and (max-width: 900px) {
  .cm-two-images--two-captions { grid-template-columns: 1fr; gap: 2rem; }
  .cm-two-images--one-caption figure { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .cm-two-images--one-caption figcaption { grid-column: 1; }
}


.cm-footnotes { margin-top: 6rem; border-top: 2px solid #EEE; padding-top: 6rem; }
.cm-footnotes { color: var(--textcolor-light); }
.cm-footnotes a { color: inherit; }

/* Blog */
.coverimage > img { margin-bottom: 0; border-radius: 0; width: 100%; height: auto; max-height: 100vh; object-fit: cover; }

body.coverimage .cm.intro--inline { position: relative; margin-top: -240px; margin-bottom: 0; background-color: white; padding-top: 40px; }

@media screen and (max-width: 1000px) {
  body.coverimage .cm.intro--inline { margin-top: -120px; }
}

@media screen and (max-width: 800px) {
  body.coverimage .cm.intro--inline { margin-top: 0px; }
}

.post_info { padding-bottom: 60px; }

.cm.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 var(--mainpadding); max-width: var(--maxwidthl); }
.cm.teaser { color: var(--textcolor); text-decoration: none; }

@media screen and (max-width: 900px) {
  .cm.teaser { grid-template-columns: 1fr; } 
}

/* Blog Teaser */
.cm-highlight { margin: 0 auto 48px; padding: 0 var(--mainpadding); max-width: var(--maxwidthl); }
.blog-highlight { display: grid; color: var(--textcolor); text-decoration: none; }
.blog-highlight picture { grid-row-start: 1; grid-column-start: 1; }
.blog-highlight--intro {grid-row-start: 1; grid-column-start: 1; margin-top: 40px; margin-left: -40px; background: #d1c9bb; padding: 32px; width: 340px; height: fit-content; }
.blog-highlight--intro.right { margin-left: calc(100% - 300px); }
.blog-highlight--intro h2 { position: relative; margin-top: 0; }
.blog-highlight--intro h2::before { display: none; content: ""; }

@media screen and (max-width: 1100px) {
  .blog-highlight { display: block; }
  .blog-highlight--intro, .blog-highlight--intro.right { margin: 0; width: 100%; }
}

/* Now */
.now { position: relative; margin-bottom: 100px; }
.now h2::before { display: none; content: ""; }

.now time { display: flex; position: absolute; top: 0px; left: 50%; flex-direction: column; margin-left: -550px; line-height: 1; text-align: center; }
.now time span { display: block; padding: 8px; }
.now time .month { display: block; background: Crimson; color: White; text-transform: uppercase; }
.now time .day { margin-bottom: 4px; border: 1px solid Crimson; font-weight: bold; font-size: 4rem; }

.now .edit { display: inline-block; }

p.codeinfo { position: relative; margin: 2rem 0 0.4rem 0; border-radius: 0 30rem 0 0; background: #2b2b2b; padding: 1rem 2.4rem 1rem 2.4rem; color: white; }
/* p.codeinfo:before { display: block; position: absolute; top: 20px; left: 10px; background: white; width: 10px; height: 10px; content: ''; } */
p.codeinfo + pre { margin-top: 0.4rem; }