:root {
  --bs-blue: #124e8e;
  --bs-deep: #082c54;
  --bs-gold: #b1951b;
  --bs-light: #f5f8fb;
  --bs-ink: #102c4c;
}
.advice-blog,
.article-page {
  background: var(--bs-light);
  color: var(--bs-ink);
}
.advice-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 25, 52, 0.97),
      rgba(18, 78, 142, 0.78) 55%,
      rgba(18, 78, 142, 0.2)
    ),
    url("../img/banner/banner.jpg") center/cover;
}
.advice-hero:after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  right: -180px;
  top: -330px;
  border: 1px solid #ffffff2c;
  border-radius: 50%;
  box-shadow:
    0 0 0 80px #ffffff0a,
    0 0 0 160px #ffffff08;
}
.advice-hero .container {
  position: relative;
  z-index: 2;
}
.advice-hero .eyebrow {
  color: #e2c65b;
}
.advice-hero h1 {
  color: #fff;
}
.advice-hero h1 em {
  color: #e2c65b;
}
.advice-hero p {
  color: #ffffffd6;
}
.advice-hero aside {
  padding: 24px;
  border-left-color: #e2c65b;
  border-radius: 0 10px 10px 0;
  background: #082c548c;
}
.advice-hero aside i {
  color: #e2c65b;
}
.advice-hero aside strong {
  color: #fff;
}
.advice-content {
  background: var(--bs-light);
}
.advice-content .eyebrow {
  color: var(--bs-gold);
}
.advice-content header h2 {
  color: var(--bs-ink);
}
.advice-content label {
  border-color: var(--bs-blue);
  color: var(--bs-blue);
}
.filters button {
  border-color: #d6e1ec;
  color: #53677a;
}
.filters button.active,
.filters button:hover {
  border-color: var(--bs-blue);
  background: var(--bs-blue);
  color: #fff;
}
.advice-grid article {
  border: 1px solid #dbe5ee;
  border-bottom: 3px solid transparent;
  box-shadow: 0 10px 35px #082c540d;
}
.advice-grid article:hover {
  border-bottom-color: var(--bs-gold);
  box-shadow: 0 18px 45px #082c541c;
}
.visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #082c5470, transparent 65%);
}
.visual span {
  z-index: 2;
  color: var(--bs-blue);
}
.copy h2 a {
  color: var(--bs-ink);
}
.copy small,
.read {
  color: var(--bs-blue);
}
.read i {
  color: var(--bs-gold);
}
.article-page {
  padding-top: 75px;
}
.back {
  color: var(--bs-blue);
}
.article-page > div > header span {
  color: var(--bs-gold);
}
.article-page h1 {
  color: var(--bs-ink);
}
.article-page header small {
  color: var(--bs-blue);
  font-weight: 700;
}
.cover {
  border-radius: 14px;
  box-shadow: 0 20px 55px #082c5420;
}
.article-layout article h2 {
  color: var(--bs-ink);
}
.article-layout article h2:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 3px;
  margin-right: 10px;
  background: var(--bs-gold);
  vertical-align: middle;
}
.article-layout aside {
  padding: 25px;
  border-left-color: var(--bs-gold);
  border-radius: 0 10px 10px 0;
  background: #fff;
  box-shadow: 0 10px 30px #082c540d;
}
.article-layout aside strong {
  color: var(--bs-blue);
}
.callout {
  border-left: 4px solid var(--bs-gold);
  background: #eaf2fa;
}
.callout strong {
  color: var(--bs-ink);
}
.callout a {
  background: var(--bs-blue);
}
.callout a:hover {
  background: var(--bs-gold);
}
@media (max-width: 767px) {
  .advice-hero {
    padding: 75px 0;
    background-position: 62% center;
  }
  .advice-hero aside {
    background: #082c54d9;
  }
  .cover {
    border-radius: 8px;
  }
  .article-page {
    padding-top: 45px;
  }
}