.blog-archive {
  padding-top: 40px;
  padding-bottom: 80px;
}
.blog-archive .inner-row {
  width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
.blog-archive .inner-row .blog-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.blog-archive .inner-row .blog-grid .blog-card {
  width: calc(33.33% - 20px);
  margin-bottom: 24px;
  position: relative;
}
.blog-archive .inner-row .blog-grid .blog-card .blog-date {
  color: #0D0D0D;
  font-size: 16px;
}
.blog-archive .inner-row .blog-grid .blog-card .blog-thumb {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.blog-archive .inner-row .blog-grid .blog-card .blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}
.blog-archive .inner-row .blog-grid .blog-card .blog-thumb:hover img {
  transform: scale(1.1);
  transition: all 0.4s ease;
}
.blog-archive .inner-row .blog-grid .blog-card .blog-title a {
  font-size: 50px;
  line-height: 1.1em;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin-bottom: 24px;
  color: #0D0D0D;
  font-family: BBModernPro;
  font-size: 35px;
}
.blog-archive .inner-row .blog-grid .blog-card .blog-title a:first-letter {
  margin-left: 4em;
}
@media (max-width: 900px) {
  .blog-archive .inner-row .blog-grid .blog-card .blog-title a {
    font-size: 35px;
  }
}
@media (max-width: 768px) {
  .blog-archive .inner-row .blog-grid .blog-card .blog-title a {
    font-size: 30px;
  }
}
@media (max-width: 520px) {
  .blog-archive .inner-row .blog-grid .blog-card .blog-title a {
    font-size: 34px;
  }
}
.blog-archive .inner-row .blog-grid .blog-card .primary-link {
  margin-top: 24px;
}
@media (max-width: 980px) {
  .blog-archive .inner-row .blog-grid .blog-card {
    width: calc(50% - 12px);
  }
}
@media (max-width: 520px) {
  .blog-archive .inner-row .blog-grid .blog-card {
    width: 100%;
  }
}

@media (max-width: 580px) {
  .blog-archive .inner-row .blog-grid .blog-card {
    width: calc(100% - 24px);
  }
  .blog-archive .inner-row .blog-grid {
    flex-direction: column;
  }
  .hero-paragraph .inner-row .paragraph-subtitle p {
    margin: 40px auto 0 auto;
  }
}