/********** BLOG POSTS LIST **********/

.compsa_section_blog_wrapper {
  background: var(--neutral-1);
}
.compsa_blog {
  max-width: var(--max-width);
  margin: auto;
  padding: var(--padding-regular) 0;
}
.compsa_blog_title {
  color: var(--primary-30);
  font-family: var(--font-headings);
  font-size: var(--text-size-headings);
  font-style: normal;
  font-weight: var(--regular);
  line-height: normal;
}
.compsa_blog_subtitle {
  color: var(--primary-15);
  font-family: var(--font-titles);
  font-size: var(--text-size-leads);
  font-style: normal;
  font-weight: var(--regular);
  line-height: normal;
}
.compsa_blog_post {
  margin-top: var(--padding-regular);
}
.compsa_blog_post_title {
  color: var(--primary-30);
  font-family: var(--font-titles);
  font-size: var(--text-size-title);
  font-style: normal;
  font-weight: var(--bold);
  line-height: normal;
  width: 100%;
  border-bottom: 2px solid var(--primary-5);
  padding-bottom: 2px;
}
.compsa_blog_post_date {
  color: var(--primary-20);
  font-family: var(--font-titles);
  font-size: var(--text-size-content);
  font-style: normal;
  font-weight: var(--bold);
  line-height: var(--line-height-regular);
  text-transform: capitalize;
}
.compsa_blog_post_content {
  color: var(--black);
  font-family: var(--font-titles);
  font-size: var(--text-size-content);
  font-style: normal;
  font-weight: var(--regular);
  line-height: var(--line-height-regular);
}
.compsa_blog_post_button {
  color: var(--primary-5);
  font-family: var(--font-titles);
  font-size: var(--text-size-content);
  font-style: normal;
  font-weight: var(--bold);
  line-height: var(--line-height-regular);
  text-decoration-line: underline;
  padding: 0;
}
.compsa_blog_wrapper {
}
.compsa_blog_pagination {
}
.compsa_pagination_previous {
}
.compsa_pagination_numbers {
}
.compsa_pagination_next {
}

/********** SINGLE BLOG POST **********/

.compsa_blog_single_post_title,
.compsa_blog_single_post_subtitle,
.compsa_blog_single_post_author,
.compsa_blog_single_post {
  max-width: var(--max-width);
  margin: auto;
  width: 100%;
}
.compsa_blog_single_post {
  display: flex;
  gap: var(--padding-big);
  padding-top: var(--text-size-subheading);
}
.compsa_blog_single_post_wrapper {
  padding-top: var(--padding-regular);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--neutral-1);
}
.compsa_blog_single_post_entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-basis: 60%;
}
.compsa_blog_single_post_title {
  color: var(--border-color);
  font-family: var(--font-headings);
  font-size: var(--text-size-headings);
  font-style: normal;
  font-weight: var(--regular);
  line-height: normal;
  text-transform: capitalize;
}
.compsa_blog_single_post_subtitle {
  color: var(--primary-15);
  font-family: var(--font-titles);
  font-size: var(--text-size-leads);
  font-style: normal;
  font-weight: var(--bold);
  line-height: normal;
  text-transform: capitalize;
}
.compsa_blog_single_post_author {
  color: var(--primary-15);
  font-family: var(--font-titles);
  font-size: var(--text-size-subtitles);
  font-style: normal;
  font-weight: var(--bold);
  line-height: normal;
}
.compsa_blog_single_post_content {
  color: var(--black);
  font-family: var(--font-titles);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--regular);
  line-height: var(--line-height-large);
}

.compsa_blog_single_post_image_wrapper {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  flex-basis: 35%;
}
.compsa_blog_single_post_image {
  min-height: 100px;
  image-rendering: -webkit-optimize-contrast;
}
.compsa_blog_single_post_image_title {
  color: var(--primary-30);
  font-family: var(--font-titles);
  font-size: 18px;
  font-style: normal;
  font-weight: var(--bold);
  line-height: var(--text-size-leads);
  text-align: right;
  margin-top: var(--text-size-content);
  text-transform: capitalize;
}
.compsa_blog_single_post_image_subtitle {
  color: var(--primary-30);
  font-family: var(--font-titles);
  font-size: var(--text-size-content);
  font-style: normal;
  font-weight: var(--regular);
  line-height: var(--text-size-leads);
  text-align: right;
}