/* blog hero */

.blog-hero {
  width: 100%;
  height: 70vh;
  padding-top: 25vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.blog-hero h1 {
  margin: 0.35em 0;
  font-size: 12vw;
  line-height: 0.8;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .blog-hero h1 {
    font-size: 20vw;
  }
}

/* blog content */

.blog-wrapper {
  margin: 5em 0;
  width: 100%;
}

.blog-wrapper .blog-content {
  display: flex;
  gap: 5em;
}

.blog-wrapper .blog-content .blog-img {
  flex: 2;
  border-radius: 10px;
  border: 2px solid var(--text-color);
  overflow: hidden;
}

.blog-wrapper .blog-content .blog-copy {
  flex: 2;
}

.blog-wrapper .blog-content h3 {
  margin-bottom: 0.5em;
  font-family: "Neue Montreal";
}

@media (max-width: 900px) {
  .blog-wrapper .blog-content {
    flex-direction: column;
  }
}

.blog-wrapper .blog-content img {
  width: 100%;
  object-fit: contain;
}

/* blog subheader */

.blog-subheader {
  width: 100%;
  margin: 10em 0;
}

.blog-subheader h3 {
  font-family: "Canopee";
  font-size: 7vw;
  font-weight: 500;
}

/* next  */

.next-btn {
  width: 100%;
  padding: 10em 0 20em 0;
}

.next-btn .next {
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-btn .next a {
  text-decoration: none;
  color: var(--text-color);
  position: relative;
  top: -0.5vw;
  margin: 0 0.5em;
}

.next-icon {
  width: 4vw;
  height: 4vw;
}