.main-article-custom {
  background-color: rgb(var(--color-background));
  --main-article-custom-header-offset: 0px;
}

html[data-template="article.perspectives"],
body[data-template="article.perspectives"] {
  overscroll-behavior-y: none;
}

.main-article-custom .text-align-desktop-left {
  text-align: start;
}

.main-article-custom .text-align-desktop-center {
  text-align: center;
}

.main-article-custom .text-align-desktop-right {
  text-align: end;
}

.main-article-custom__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(
    var(--hero-min-height-desktop, 520px) + var(--card-radius, 24px)
  );
  color: rgb(var(--hero-title-color, 255, 255, 255));
}

.main-article-custom__hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.main-article-custom__hero-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  opacity: var(--hero-overlay-opacity, 0.45);
  background-color: rgb(0 0 0 / 45%) !important;
  background-color: color-mix(
    in oklab,
    rgb(var(--color-foreground)) 50%,
    #000000
  );
}

.main-article-custom__hero-image,
.main-article-custom__hero-media img,
.main-article-custom__hero-media svg {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-article-custom__hero-content {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 64rem;
}

.main-article-custom__title {
  margin: 0;
  font-family: var(--main-article-custom-title-font-family, var(--sort-title-font));
  font-size: var(--main-article-custom-title-font-size, var(--hero-title-size, 56px));
  font-style: var(
    --main-article-custom-title-font-style,
    var(--sort-title-font-style)
  );
  font-weight: var(
    --main-article-custom-title-font-weight,
    var(--sort-title-font-weight)
  );
  line-height: 1.1;
  color: inherit;
}

.main-article-custom__body {
  margin-block-start: calc(-1 * var(--card-offset, 80px));
}

.main-article-custom__card {
  position: relative;
  margin-inline: auto;
  background-color: rgb(var(--card-background, 255, 255, 255));
  color: rgb(var(--card-text-color, 24, 24, 24));
  border-radius: var(--card-radius, 24px);
}

.main-article-custom__content {
  font-size: 16px;
  line-height: 1.7;
  width: auto;
}

.main-article-custom__extras {
  color: rgb(var(--card-text-color, 24, 24, 24));
  background-color: rgb(23 23 23 / .025);
  width: auto;
  border-radius: var(--card-radius, 24px);
}

.main-article-custom__extras-inner {
  display: flex;
  flex-direction: column;
}

.main-article-custom__extras-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.main-article-custom__social {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 0px;
}

.main-article-custom__social-label {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.main-article-custom__social-items {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-article-custom__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.main-article-custom__social-icon {
  width: 18px;
  height: 18px;
}

.main-article-custom__social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-article-custom__social-text {
  font-size: 14px;
  line-height: 1.2;
}

.main-article-custom__comments-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.main-article-custom__comments-summary svg {
  width: 18px;
  height: 18px;
}

.main-article-custom__article-nav {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.main-article-custom__article-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid rgb(var(--card-text-color, 24, 24, 24) / 10%);
  background-color: rgb(var(--card-background, 255, 255, 255));
  color: inherit;
  text-decoration: none;
  min-height: 72px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.main-article-custom__article-link:hover {
  border-color: rgb(var(--card-text-color, 24, 24, 24) / 18%);
}

.main-article-custom__article-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.main-article-custom__article-icon svg,
.main-article-custom__article-icon-image,
.main-article-custom__article-icon-image img {
  width: var(--main-article-custom-article-nav-icon-width, 18px);
  height: var(--main-article-custom-article-nav-icon-height, 16px);
}

.main-article-custom__article-icon-image img {
  object-fit: contain;
}

.main-article-custom__article-link--prev .main-article-custom__article-icon svg {
  transform: rotate(180deg);
}

.main-article-custom__article-title {
  font-size: 16px;
  line-height: 1.4;
}

.main-article-custom__extras-nav {
  width: 100%;
}

.main-article-custom__article-link {
  justify-content: center;
}

@media (max-width: 959px) {
  .main-article-custom .text-align-mobile-left {
    text-align: start;
  }

  .main-article-custom .text-align-mobile-center {
    text-align: center;
  }

  .main-article-custom .text-align-mobile-right {
    text-align: end;
  }

  .main-article-custom__hero {
    min-height: calc(
      var(--hero-min-height-mobile, 360px) + var(--card-radius, 24px)
    );
  }

  .main-article-custom__hero-content {
    padding-block: 80px 60px;
  }

  .main-article-custom__title {
    font-size: var(
      --main-article-custom-title-font-size-mobile,
      var(--hero-title-size-mobile, 32px)
    );
  }

  .main-article-custom__body {
    margin-block-start: calc(-1 * var(--card-offset-mobile, 40px));
    padding-block-end: 60px;
  }

  .main-article-custom__extras-top {
    align-items: flex-start;
  }

  .main-article-custom__social {
    gap: 12px;
  }

  .main-article-custom__article-nav {
    grid-template-columns: 1fr;
  }

  .main-article-custom__article-link {
    padding: 16px 18px;
  }
}

@media (min-width: 960px) {
  .main-article-custom__social {
    padding-left: 60px;
  }

  .main-article-custom__comments-summary {
    padding-right: 60px;
  }
}

@media screen and (min-width: 1024px) {
  .main-article-custom__hero-content {
    min-width: 45rem;
  }

  .main-article-custom__extras-inner {
    align-items: start;
  }

  .main-article-custom__content {
    font-size: 18px;
  }

  .main-article-custom__article-title {
    font-size: 18px;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .main-article-custom__hero-content {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .main-article-custom__title {
    padding-inline: var(--page-padding);
  }

  .main-article-custom__card {
    padding-inline: var(--page-padding);
  }

  .main-article-custom__extras {
    padding-inline: var(--page-padding);
  }

  .main-article-custom__extras-inner {
    max-width: none;
  }

  .main-article-custom__extras-top {
    min-width: 0;
    max-width: none;
  }
}