/* stylelint-disable */
/* stylelint-enable */
:root {
  --grid-max-width: calc(1300px + 2 * var(--grid-padding));
  --grid-padding: 16px;
}
@media screen and (min-width: 1440px) {
  :root {
    --grid-padding: 40px;
  }
}

.button-back-to-top {
  text-align: center;
}

.button-back-to-top__container {
  display: inline-block;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
  background-color: transparent;
}
.button-back-to-top__container:focus {
  outline: none;
}

.button-back-to-top__arrow {
  display: inline-flex;
  align-items: center;
  background-color: var(--white);
  border-radius: 100%;
  box-shadow: 0 2px 4px 0 var(--shadow-colour);
  height: 48px;
  justify-content: center;
  transition: 0.3s all;
  width: 48px;
}
.button-back-to-top__arrow:hover {
  transform: scale(1.05);
}

.button-back-to-top__title {
  font-size: var(--heading-4-font-size);
  line-height: var(--heading-4-line-height);
  padding-top: 16px;
}

.header-hero {
  background-color: var(--white);
  margin-top: -40px;
  padding-top: 40px;
  padding-bottom: 16px;
}
@media screen and (min-width: 651px) {
  .header-hero {
    margin-top: -64px;
    padding-top: 64px;
  }
}
@media screen and (min-width: 1025px) {
  .header-hero {
    padding-bottom: 0;
    background-color: var(--factory-white);
    margin-top: -94px;
    padding-top: 94px;
  }
}

.header-hero__main {
  padding-top: 32px;
  padding-bottom: 24px;
}
@media screen and (min-width: 1025px) {
  .header-hero__main {
    background-color: var(--white);
    padding: 32px 48px 24px;
    border-radius: var(--border-radius-medium);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.header-hero__intro {
  text-align: center;
}

.header-hero__title {
  font-size: var(--heading-bold-font-size);
  line-height: var(--heading-bold-line-height);
  font-family: var(--font-family-headlines);
  text-transform: var(--heading-text-transform);
  letter-spacing: var(--heading-bold-letter-spacing);
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: 0;
}

.header-hero__title--long {
  font-size: var(--heading-1-font-size);
  line-height: var(--heading-1-line-height);
  font-weight: var(--bold);
  font-family: var(--font-family-headlines);
  text-transform: var(--heading-text-transform);
  letter-spacing: var(--heading-1-letter-spacing);
}

.header-hero__desc {
  margin-top: 0;
  margin-bottom: 0;
}

.header-hero__actions-inner {
  margin-top: 16px;
}
@media screen and (min-width: 651px) {
  .header-hero__actions-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: center;
  }
}

@media screen and (max-width: 650px) {
  .header-hero__actions-inner > .btn {
    width: 100%;
  }
}

@media screen and (max-width: 650px) {
  .header-hero__actions-inner > .btn + .btn {
    margin-top: 12px;
  }
}

.header-hero__confidence-strip {
  justify-self: center;
  margin-top: 16px;
}
@media screen and (min-width: 651px) {
  .header-hero__confidence-strip {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1025px) {
  .header-hero__confidence-strip {
    align-self: center;
  }
}

@media screen and (min-width: 1025px) {
  .header-hero--media .header-hero__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .header-hero--media .header-hero__main {
    flex-grow: 1;
    flex-basis: 75%;
  }
}

@media screen and (min-width: 1025px) {
  .header-hero__media {
    display: block;
    flex-basis: 25%;
  }
}

.header-hero__image-wrap {
  height: 100%;
}

.header-hero__image {
  display: block;
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--border-radius-medium);
}

.header-hero--article .header-hero__main {
  padding-bottom: 48px;
}
@media screen and (min-width: 1025px) {
  .header-hero--article .header-hero__main {
    flex-basis: 65%;
  }
}
.header-hero--article .header-hero__title {
  font-size: var(--heading-2-font-size);
  line-height: var(--heading-2-line-height);
  font-weight: var(--bold);
  font-family: var(--heading-2-font-family);
  letter-spacing: var(--heading-2-letter-spacing);
  font-family: var(--font-family-body);
  text-transform: none;
  margin-bottom: 16px;
}
@media screen and (min-width: 1025px) {
  .header-hero--article .header-hero__media {
    flex-basis: 35%;
  }
}

@media screen and (max-width: 650px) {
  .header-hero--breadcrumbs {
    margin-top: -88px;
    padding-top: 88px;
  }
}
@media screen and (min-width: 651px) {
  .header-hero--breadcrumbs {
    margin-top: -112px;
    padding-top: 112px;
  }
}
@media screen and (min-width: 1025px) {
  .header-hero--breadcrumbs {
    margin-top: -142px;
    padding-top: 142px;
  }
}
.header-hero--breadcrumbs .header-hero__inner {
  margin-top: -48px;
}
.header-hero--breadcrumbs .header-hero__main {
  padding-top: 80px;
}

body:has(.header-hero--breadcrumbs) .breadcrumb {
  background-color: transparent;
}
@media screen and (min-width: 651px) {
  body:has(.header-hero--breadcrumbs) .breadcrumb__container {
    padding-left: calc(var(--grid-padding) + 16px);
  }
}

.related-articles {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px 7.4229717578%;
}
@media screen and (min-width: 651px) {
  .related-articles {
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px 2.3576520234%;
  }
}

.related-articles__item--featured {
  grid-row: 1/2;
  grid-column: 1/3;
}
@media screen and (min-width: 651px) {
  .related-articles__item--featured {
    grid-row: 1/3;
  }
}

.pros-and-cons__container {
  max-width: 944px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;
}

.pros-and-cons__title {
  margin-bottom: 24px;
}
@media screen and (min-width: 651px) {
  .pros-and-cons__title {
    text-align: center;
  }
}

.pros-and-cons__list {
  display: grid;
  gap: 32px 24px;
}
@media screen and (min-width: 651px) {
  .pros-and-cons__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pros-and-cons__list-item-title,
.pros-and-cons__list-item-desc {
  margin: 0;
}

.pros-and-cons__list-item-title {
  margin-bottom: 8px;
}

.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) {
  max-width: 740px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h2,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h3,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p {
  margin-top: 32px;
  margin-bottom: 0;
}
@media screen and (min-width: 651px) {
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h2,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h3,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p {
    margin-top: 48px;
  }
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h2 + h3,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h3 + h3,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4 + h3,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p + h3 {
  margin-top: 24px;
}
@media screen and (min-width: 651px) {
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h2 + h3,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h3 + h3,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4 + h3,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p + h3 {
    margin-top: 32px;
  }
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h2 + h4,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h3 + h4 {
  margin-top: 8px;
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4 + h4,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p + h4 {
  margin-top: 16px;
}
@media screen and (min-width: 651px) {
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4 + h4,
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p + h4 {
    margin-top: 24px;
  }
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p {
  font-size: var(--body-large-font-size);
  line-height: var(--body-large-line-height);
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h2 + p,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h3 + p,
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) h4 + p {
  margin-top: 8px;
}
.content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p + p {
  margin-top: 16px;
}
@media screen and (min-width: 651px) {
  .content-block:not(:has(.expandable-section__container, .pros-and-cons__container)) p + p {
    margin-top: 24px;
  }
}

.content-block--centered {
  text-align: center;
  margin: auto;
}
.content-block--centered .expandable-content {
  text-align: left;
}

.electric-cars-compare {
  padding-top: 32px;
  padding-bottom: 48px;
  background-color: var(--grey-extra-light);
}
@media screen and (min-width: 651px) {
  .electric-cars-compare {
    padding-top: 48px;
    padding-bottom: 64px;
  }
}

.content-block .electric-cars-compare__intro-section-title {
  margin-top: 0;
}

.electric-cars-compare__section {
  padding-top: 48px;
}
@media screen and (min-width: 651px) {
  .electric-cars-compare__section {
    padding-top: 72px;
  }
}
@media screen and (min-width: 1025px) {
  .electric-cars-compare__section {
    padding-top: 96px;
  }
}

.electric-cars-compare__back-to-top {
  margin-top: 80px;
}