/* BLOGPOST */

.vt22-blog__wrapper {
  padding-inline: 1.875rem;
}

.vt22-blog-content {
  padding-inline: 2.25rem;
  padding-block-end: 2rem;
  border-inline: 2px solid #181919;
}
@media (min-width: 767px) {
  .vt22-blog-content {
    padding-inline: 6rem;
    padding-block-end: 4.4rem;
  }
}
.vt22-blog-content img {
  border: 2px solid #181919;
}
.vt22-blog-content img[src*=".svg"] {
  border: none;
}

.vt22-blog-post__header {
  padding-block: 2rem;
}
@media (min-width: 767px) {
  .vt22-blog-post__header {
    padding-block-start: 7rem;
    padding-block-end: 4.4rem;
  }
}

.vt22-blog-post__tags {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 1rem;
  margin-block-end: 1.8rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  line-height: 130%;
  font-weight: 500;
}

.vt22-blog-post__tags li {
  background-color:  #FAECE2;
  padding: 0.44rem 0.67rem;
}
.vt22-blog-post__tags li a {
  text-decoration: none;
}

.vt22-blog-post__title {
  font-size: 2.5rem;
}
.vt22-blog-post__meta {
  display: flex;
  gap: 1rem;
}
.vt22-blog-post__meta__seperator {
  display: block;
}
@media (max-width: 767px) {
  .vt22-blog-post__meta {
    flex-wrap: wrap;
  }
  .vt22-blog-post__meta__seperator {
    display: none;
  }
}

.vt22-blog-post__featured-image {
  margin-top: 2rem;
  max-width: 100%;
  border: 2px solid #181919;
}

@media screen and (min-width: 767px) {
  .vt22-blog-post__featured-image {
    margin-top: 4.4rem;
  }
}

.vt22-blog-post__body {
  max-width: 65ch;
}

.vt22-blog-subscribe {
  border-inline: 2px solid #181919;
  padding: 2.25rem 1rem;
  background-color: #ECE2FA;
}

@media screen and (min-width: 600px) {
  .vt22-blog-subscribe {
    padding: 5rem 1rem;
  }
}

.vt22-blog-subscribe__wrapper {
  margin-inline: auto;
  max-width: 720px;
}

.vt22-blog-post__body p:first-of-type {
  font-size: 1.5rem;
}

.vt22-blog-post__body p:last-of-type {
  margin-block-end: 0;
}

/* AUTHOR */

.vt22-blog-author {
  border-block-start: 2px solid #181919;
  background-color: #FAECE2;
}

.vt22-blog-author__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding-inline: 1rem;
  padding-block: 4.4rem;
  border-inline: 2px solid #181919;
}

@media (min-width: 767px) {
  .vt22-blog-author__wrapper {
    padding-inline: 6rem;
  }
}

@media (max-width: 767px) {
  .vt22-blog-author__wrapper {
    flex-wrap: wrap;
  }
}

.vt22-blog-author__name {
  font-size: 1.33rem;
  font-weight: 500;
}

.vt22-blog-author__image {
  flex-shrink: 0;
  width: 270px;
  height: 270px;
  object-fit: cover;
  border-radius: 9999px;
  border: 2px solid #181919;
}

.vt22-reference-header__wrapper {
  padding-inline: 1.875rem;
}

.vt22-reference-header {
  display: flex;
  flex-direction: column-reverse;
  margin-inline: auto;
  border-inline: 2px solid #181919;
  padding: 3.5rem 2.25rem 4rem 2.25rem;
}

@media screen and (min-width: 768px) {
  .vt22-reference-header {
    flex-direction: row;
    justify-content: space-between;
    gap: 4rem;
    padding: 8rem 7.5rem;
  }
}

.vt22-reference-header__figure {
  max-width: 600px;
  margin: -3rem 0 0 0; // margin top due to strange blockquote spacing
}

@media screen and (min-width: 768px) {
  .vt22-reference-header__figure {
    margin-top: -5.3rem; // margin top due to strange blockquote spacing
  }
}

.vt22-reference-header__customer-logo {
  margin-bottom: 2rem;
}

.vt22-reference__tag {
  width: fit-content;
  margin-bottom: 2.25rem;
  background-color:  #E2ECFA;
  padding: 0.44rem 0.67rem;
  text-transform: uppercase;
  font-size: 1.125rem;
}

.vt22-blog-post__body blockquote,
.vt22-reference-header__blockquote {
  display: inline;
  padding: 0;
  background-color: #FAECE2;
  line-height: 2;
  font-size: 1.75rem;
  font-weight: 500;
}
.vt22-blog-post__body blockquote p {
  display: inline;
}
.vt22-blog-post__body blockquote p,
.vt22-reference-header__blockquote span {
  padding: 0.2rem;
  box-shadow: 0.2rem 0 0 #FAECE2, -0.2rem 0 0 #FAECE2;
  background-color: #FAECE2;
}

.vt22-reference-header__quotee-name {
  margin-top: 2.25rem;
}

/* BLOGLISTING PAGE */

.vt22-bloglisting-header {
  max-width: 1120px;
  margin-inline: auto;
}