iframe {
  max-width: 100%;
}

.article-image {
  --half-article-width: calc(var(--article-width) / 2);
  --padding: 10px;

  background-image: url(/images/image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto; 

  height: var(--article-image-height);
  position: fixed;
  z-index: 1;

  left: calc(var(--border-width) + var(--padding));
  right: calc(var(--border-width) + var(--padding));
  top: calc(var(--navigation-bar-height) + var(--border-width));

  clip-path: polygon(
    0 0, 
    100% 0, 
    100% 100%, 
    calc(50% + var(--half-article-width)) 100%, 
    calc(50% + var(--half-article-width)) var(--cutout-depth), 
    calc(50% - var(--half-article-width)) var(--cutout-depth), 
    calc(50% - var(--half-article-width)) 100%, 
    0 100%);
}

.article-container {
  margin: auto;
  padding: 20px;
  padding-top: 30px;
  position: relative;
  margin-top: calc(var(--cutout-depth) + var(--border-width)  + var(--navigation-bar-height));
}

@media only screen and (max-device-width: 811px) {
  .article-image {
    display: none;
  }

  .article-summary {
    margin-bottom: 20px;
  }

  .article {
    margin-top: 20px;
    padding-top: 0;
  }

  .article-container {
    padding: 28px;
    padding-top: 63px;
    margin-top: 0;
  }

  .article::before {
    background-position: center top;
  }

  .back-link,
  .article-header {
    padding: 20px;
    background: white;
  }

  .back-link {
    padding-top: 30px;
  }
}

@media only screen and (min-device-width: 812px) {
  .article-content {
    padding: 0 40px;
    padding-bottom: 20px;
  }

  .article-container {
    background: white;
    width: var(--article-width);
  }

  .article-summary {
    padding: 0 60px;
    margin: 0 0 40px;
  }
}

.back-link a {
  color: black;
  font-size: 14px;
  text-decoration: none;
}

.article-header {
  font-size: 38px;
  line-height: 46px;
  text-align: center;
  color: #333;
  font-family: 'Rubik', sans-serif;
}

.article-date {
  font-size: 16px;
}

.article-edit-date {
  color: #999;
  font-family: 'Roboto Mono', sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.article-header::after {
  content: '';
  width: 58px;
  height: 1px;
  background: black;
  display: block;
  margin: 30px auto;
}

.article-summary {
  text-align: center;
}

.article-content,
.article-summary {
  font-family: 'Roboto Mono', sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 300;
}