/* blog styling */

.blog main #hero {
    margin: 0;
    padding: 0;
  }

.blog main div.template-list-wrapper + div {
  padding-top: 60px;
}

.blog main .section:has(.image-list) > div {
  margin: auto;
  max-width: 1200px;
  padding: 0;
}

.blog main div>h3:first-child {
  margin-top: 0px;
}

.blog .section:not(:has(.faq), :has(.blog-posts)) > div:first-child:not(.banner, .sticky-promo-bar, .ribbon-banner){
  padding-top: 60px;
}

.blog .section > .content p:has(.con-button) {
  margin-bottom: 0;
}

.blog .section h1, .blog .section h2, .blog .section h3, .blog .section h4, .blog .section h5 {
  margin: 0;
}

.blog main .section > div > h2 {
  margin: 80px 0 0;
}



.blog main .section > .content {
  margin: auto;
  max-width: 375px;
}

  .blog main .section > div > p {
    font-family: var(--body-serif-font-family);
  }

  .blog main .section > div > p .button, .blog .section > div > p .con-button {
    font-family: var(--body-font-family);
  }

  .blog main #hero > div {
    margin: auto;
    max-width: 1000px;
    width: 100%;
  }

  .blog main #hero {
    color: black;
  }

  .blog main #hero .blog-header .eyebrow {
    margin: 0;
    margin-bottom: 12px;
    font-weight: 700;
    color: #696969;
    line-height: 20px;
    font-size: var(--body-font-size-s);
    text-transform: capitalize;
  }

  .blog main #hero .blog-header .author {
    margin-top: 24px;
    display: flex;
    align-items: center;
    font-size: var(--body-font-size-s);
  }

  .blog main #hero .blog-header .author div.author-social {
    flex-grow: 1;
    text-align: right;
  }

  .blog main #hero .blog-header .author div.author-social svg {
    margin: 0 0 6px 6px;
    height: 18px;
    width: 18px;
  }

  .blog main #hero .blog-header img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 20px;
  }

  .blog main #hero .blog-header h1 {
    text-align: left;
    font-size: var(--heading-font-size-l);
  }

  .blog main #hero .blog-header {
    font-family: var(--body-serif-font-family);
  }

  .blog main #hero .blog-header h1 {
    font-family: var(--body-font-family);
  }

  .blog main #hero .blog-header p.subheading {
    text-align: left;
    font-size: var(--body-font-size-l);
    margin-left: 0;
  }

  .blog main #hero .blog-header {
    text-align: left;
    margin: 80px 32px 32px;
    background-image: url(/express/code/icons/cc-express-logo.svg);
    padding-top: 58px;
    background-repeat: no-repeat;
    background-size: min(311px, 100%);
  }

  .blog main div.section {
    /*text-align: left;*/
    margin: 0;
  }

  .blog main .content p.action-area {
    text-align: center;
  }

  .blog-article div.section > div > p:not(.button-container, .action-area), .blog-article div.section > div > h2,
  .blog-article div.section > div > h3, .blog-article div.section > div > h4,
  .blog-article div.section > div > h5, .blog-article div.section > div > ul,
  .blog-article div.section > div > ol, .blog-article div.section > div > .ax-table-of-contents {
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }




  .blog main div.section.fullwidth > div {
    margin: auto;
    max-width: 1200px;
    padding: 0;
  }


  .blog main div.section h2, .blog div.section h3,
  .blog main div.section h2 + p:not(.button-container), .blog div.section h3 + p:not(.button-container)  {
    text-align: left;
  }

  .blog main .section h3 {
    font-size: 36px;
    line-height: 40px;
    margin-top: 64px;
    text-align: left;
  }

  .blog main .section h4 {
    text-align: left;
  }

  .blog main .hero-animation p {
    font-family: var(--body-serif-font-family);
  }

  .blog main .banner {
    margin-top: 64px;
  }

  .blog main .banner > div > div > h2 {
    text-align: center;
  }

  .blog main svg.copy-success {
    fill: var(--color-info-accent);
  }

  .blog main svg.copy-failure {
    fill: var(--color-gray-400);
  }

  .blog main div.sticky-promo-bar {
    text-align: center;
  }

@media (min-width: 600px) {
  .blog main #hero .blog-header p.subheading {
    font-size: var(--body-font-size-xl);
  }

  .blog main #hero .blog-header h1 {
    font-size: var(--heading-font-size-xl);
  }

  .blog main #hero .blog-header {
    padding-top: 66px;
  }

  .blog main #hero .blog-header .eyebrow {
    margin-bottom: 24px;
  }
  .blog main #hero .blog-header .author {
    margin-top: 32px;
  }
}

@media (min-width: 900px) {
  .blog main div.section > div > p.intro-text {
    max-width: unset;
    margin-top: 0;
    }

  .blog main .section > .content {
    max-width: 830px;
  }
}

@media (min-width:1200px) {
  .blog main .section > .content {
    max-width: 1024px;
  }
}

/* Japanese font styles */
:lang(ja) .blog main .section h3 {
  font-size: var(--heading-font-size-m);
}

:lang(ja) .blog main .hero-animation p {
  font-family: var(--body-font-family);
}

:lang(ja) .blog main .section > div > p {
  font-family: var(--body-font-family);
}

:lang(ja) .blog main #hero .blog-header {
  font-family: var(--body-font-family);
}