:root {
  --tomato: #ff4027;
  --cream: #fdefdd;
  --black: #000000;
  --baseline: 16px;
  --columns: 12;
  --gutter: 16px;
  --margin: 40px;
}

html,
body {
  background-color: var(--cream);
  background-image: none;
  width: 100%;
}

main {
  display: block;
  width: 100%;
}

.post-hero {
  position: relative;
  height: auto;
  width: 100%;
  overflow: hidden;
  display: block;
}


@media (max-width: 767px) {
  .post-hero {
    height: auto;
    /* let height adjust to image */
  }
}

.post-hero img,
.post-hero video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {

  .post-hero img,
  .post-hero video {
    width: 100%;
    max-width: 100%;
    height: auto;

  }
}


.content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  margin: 0 var(--margin);
  position: relative;
  height: 100vh;
}

@media (max-width: 767px) {
  .content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gutter);
    margin: 0 var(--margin);
    position: relative;
    height: 100vh;
  }
}

/* Post Content */
.post-content {
  grid-column: 4 / 10;
  padding: 0 1.5rem;

  line-height: 1.6;
  font-family: 'elza text', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
}

@media (max-width: 767px) {
  .post-content {
    grid-column: 1 / 5;
    padding-left: 0rem;
    padding-right: 0rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .post-content {
    grid-column: 2 / 12;
    font-size: 1.2rem;
  }
}

.post-content h2 {
  color: var(--tomato);
  line-height: 88.2%;
  letter-spacing: -5%;
  font-family: "plantin", serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.8rem;
}

.post-title {
  color: var(--tomato);
  margin-bottom: 5rem;
  font-size: 7rem;
  line-height: 80%;
  font-family: "terminal_grotesque";
  font-weight: normal;
}

@media (max-width: 767px) {
  .post-title {
    margin-bottom: 1rem;
    font-size: 5rem;
    line-height: 80%;
    font-family: "terminal_grotesque";
    font-weight: normal;
    position: relative;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
  }
}


.post-content img {
  width: 100%;
  height: auto;
}

/* Tags */
.post-tags {
  margin-top: 5rem;
  padding-bottom: 6rem;
}

.post-tags .tag {
  margin-right: 0.5rem;
  color: var(--tomato);
  text-decoration: underline;
  font-size: 0.9rem;
}

.post-content a {
  color: #ff4027;
}

.figure {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

.figure figcaption {
  width: 100%;
}

.post-content em {
  opacity: 60%;
  text-align: center;
}