@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

small {
  font-size: 0.9rem;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1.2;
}

ol, ul {
  padding-inline-start: 1.35rem;
  line-height: 1.5;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 700;
}

h1, .h1 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  margin-bottom: var(--spacer-2);
}

h2, .h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--spacer-2);
}

h3, .h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacer-2);
}

h4, .h4 {
  font-size: clamp(1.15rem, 3vw, 1.25rem);
  margin-bottom: var(--spacer-2);
}

h5, .h5 {
  font-size: clamp(1.1rem, 3vw, 1.15rem);
  margin-bottom: var(--spacer-2);
}

h6, .h6 {
  font-size: 1rem;
}

.fs-1 {
  font-size: 2rem;
}

.fs-2 {
  font-size: 1.5rem;
}

.fs-3 {
  font-size: 1rem;
}

.fs-4 {
  font-size: 0.9rem;
}

.fs-5 {
  font-size: 0.8rem;
}

.fw-normal {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-bolder {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

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

.bg-neutral-100 {
  background-color: #F5F5F5;
}

.bg-neutral-200 {
  background-color: #EBEBEA;
}

.bg-neutral-300 {
  background-color: #D7D7D5;
}

.bg-neutral-400 {
  background-color: #C4C4C0;
}

.bg-neutral-500 {
  background-color: #A6A6A0;
}

.bg-neutral-600 {
  background-color: #888881;
}

.bg-neutral-700 {
  background-color: #696963;
}

.bg-neutral-800 {
  background-color: #4A4A45;
}

.bg-neutral-900 {
  background-color: #1E1E1C;
}

.bg-neutral-full {
  background-color: #0B0B0A;
}

.btn-primary {
  background-color: var(--header-color);
  border: 1px solid var(--header-color);
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}
.btn-primary:hover {
  background-color: color-mix(in srgb, var(--header-color), #fff 25%);
}

.post-title, .post-meta {
  margin-left: var(--spacer-4);
  margin-right: var(--spacer-4);
}

.page {
  display: grid;
  grid-template-columns: var(--spacer-4) 1fr var(--spacer-4);
}

.page > * {
  grid-column: 2;
}

.page > .ad-wrapper-combined, .page > .ad-wrapper {
  grid-column: 1/-1;
}

@media (min-width: 576px) {
  .page {
    display: block;
    margin: 0 var(--spacer-4);
  }
}
@media (min-width: 992px) {
  .post-title, .post-meta {
    margin-left: 0;
    margin-right: 0;
  }
  .page {
    margin: 0;
  }
}
p {
  line-height: 1.8;
  margin-bottom: var(--spacer-3);
}

img[width][height] {
  height: auto;
}

.article-body figure {
  margin: 0;
}

.article-body img {
  aspect-ratio: 4/3;
  display: block;
  width: 100%;
  object-fit: cover;
}

.wp-block-image {
  position: relative;
}

.wp-block-heading {
  position: relative;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

figure {
  margin-bottom: var(--spacer-3);
}

img {
  margin-bottom: var(--spacer-3);
}

.wp-element-caption {
  background-color: rgba(249, 248, 245, 0.67);
  bottom: 0;
  color: #555453;
  display: inline-block;
  font-size: 0.8rem;
  left: 0;
  line-height: 1.5;
  padding: 0.1rem 0.5rem;
  position: absolute;
}

.ad-wrapper {
  align-items: center;
  border-top: 1px solid #e4e2d6;
  border-bottom: 1px solid #e4e2d6;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 0.6rem 0 1.2rem;
  position: relative;
  width: 100%;
  margin-bottom: var(--spacer-3);
}

.ad-wrapper > .ad-label {
  color: #555453;
  display: block;
  font-size: 10px;
  order: 1;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  isolation: isolate;
}
html[lang=ar] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "اعلان";
}
html[lang=bg] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Рекламиране";
}
html[lang=cs] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Reklama";
}
html[lang=da] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "annonse";
}
html[lang=de] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Anzeige";
}
html[lang=el] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Διαφημιστική";
}
html[lang=es] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Publicidad";
}
html[lang=et] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Reklaam";
}
html[lang=fi] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Ilmoittautuminen";
}
html[lang=fr] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Annonce";
}
html[lang=hu] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Hirdetés";
}
html[lang=id] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Iklan";
}
html[lang=it] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Pubblicità";
}
html[lang=ja] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "広告";
}
html[lang=jp] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "広告";
}
html[lang=ko] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "광고";
}
html[lang=kp] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "광고";
}
html[lang=lt] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Skelbimas";
}
html[lang=lv] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Reklāma";
}
html[lang=nl] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Advertentie";
}
html[lang=no] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Annonse";
}
html[lang=pl] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Reklama";
}
html[lang=pt] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Publicidade";
}
html[lang=ro] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Publicitate";
}
html[lang=ru] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Реклама";
}
html[lang=se] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Annons";
}
html[lang=sk] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Reklama";
}
html[lang=sl] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Oglas";
}
html[lang=sv] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Annons";
}
html[lang=tr] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Reklam";
}
html[lang=uk] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "Реклама";
}
html[lang=zh] .ad-wrapper > .ad-label::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: white;
  content: "广告";
}

.ad-wrapper > .ad {
  order: 2;
  overflow: hidden;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.ad--leaderboard {
  height: 250px;
}

.ad-in_article,
.ad-combined_article {
  min-height: 250px;
  position: sticky;
  top: 7rem;
}

.ad-wrapper-combined {
  display: flex;
  gap: 15px;
  width: 100%;
}

.ad-wrapper-combined .ad-wrapper:nth-child(2) {
  display: none;
}

.ad--rightrail-top {
  min-height: 250px;
}

.adhesion-wrapper {
  display: flex;
  align-items: end;
  background: #fff;
  height: 72px;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 100;
}
.adhesion-wrapper ~ .adhesion,
.adhesion-wrapper .adhesion {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 992px) {
  .adhesion-wrapper ~ .adhesion,
  .adhesion-wrapper .adhesion {
    left: var(--post-left) !important;
    max-width: var(--post-width);
    position: fixed !important;
    bottom: 0 !important;
  }
}
.adhesion-wrapper ~ .adhesion::before,
.adhesion-wrapper .adhesion::before {
  content: "Advertisement";
  position: absolute;
  top: -12px;
  color: #555453;
  font-size: 10px;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 5px;
  z-index: 100;
}
html[lang=ar] .adhesion-wrapper ~ .adhesion::before,
html[lang=ar] .adhesion-wrapper .adhesion::before {
  content: "اعلان";
}
html[lang=bg] .adhesion-wrapper ~ .adhesion::before,
html[lang=bg] .adhesion-wrapper .adhesion::before {
  content: "Рекламиране";
}
html[lang=cs] .adhesion-wrapper ~ .adhesion::before,
html[lang=cs] .adhesion-wrapper .adhesion::before {
  content: "Reklama";
}
html[lang=da] .adhesion-wrapper ~ .adhesion::before,
html[lang=da] .adhesion-wrapper .adhesion::before {
  content: "annonse";
}
html[lang=de] .adhesion-wrapper ~ .adhesion::before,
html[lang=de] .adhesion-wrapper .adhesion::before {
  content: "Anzeige";
}
html[lang=el] .adhesion-wrapper ~ .adhesion::before,
html[lang=el] .adhesion-wrapper .adhesion::before {
  content: "Διαφημιστική";
}
html[lang=es] .adhesion-wrapper ~ .adhesion::before,
html[lang=es] .adhesion-wrapper .adhesion::before {
  content: "Publicidad";
}
html[lang=et] .adhesion-wrapper ~ .adhesion::before,
html[lang=et] .adhesion-wrapper .adhesion::before {
  content: "Reklaam";
}
html[lang=fi] .adhesion-wrapper ~ .adhesion::before,
html[lang=fi] .adhesion-wrapper .adhesion::before {
  content: "Ilmoittautuminen";
}
html[lang=fr] .adhesion-wrapper ~ .adhesion::before,
html[lang=fr] .adhesion-wrapper .adhesion::before {
  content: "Annonce";
}
html[lang=hu] .adhesion-wrapper ~ .adhesion::before,
html[lang=hu] .adhesion-wrapper .adhesion::before {
  content: "Hirdetés";
}
html[lang=id] .adhesion-wrapper ~ .adhesion::before,
html[lang=id] .adhesion-wrapper .adhesion::before {
  content: "Iklan";
}
html[lang=it] .adhesion-wrapper ~ .adhesion::before,
html[lang=it] .adhesion-wrapper .adhesion::before {
  content: "Pubblicità";
}
html[lang=ja] .adhesion-wrapper ~ .adhesion::before,
html[lang=ja] .adhesion-wrapper .adhesion::before {
  content: "広告";
}
html[lang=jp] .adhesion-wrapper ~ .adhesion::before,
html[lang=jp] .adhesion-wrapper .adhesion::before {
  content: "広告";
}
html[lang=ko] .adhesion-wrapper ~ .adhesion::before,
html[lang=ko] .adhesion-wrapper .adhesion::before {
  content: "광고";
}
html[lang=kp] .adhesion-wrapper ~ .adhesion::before,
html[lang=kp] .adhesion-wrapper .adhesion::before {
  content: "광고";
}
html[lang=lt] .adhesion-wrapper ~ .adhesion::before,
html[lang=lt] .adhesion-wrapper .adhesion::before {
  content: "Skelbimas";
}
html[lang=lv] .adhesion-wrapper ~ .adhesion::before,
html[lang=lv] .adhesion-wrapper .adhesion::before {
  content: "Reklāma";
}
html[lang=nl] .adhesion-wrapper ~ .adhesion::before,
html[lang=nl] .adhesion-wrapper .adhesion::before {
  content: "Advertentie";
}
html[lang=no] .adhesion-wrapper ~ .adhesion::before,
html[lang=no] .adhesion-wrapper .adhesion::before {
  content: "Annonse";
}
html[lang=pl] .adhesion-wrapper ~ .adhesion::before,
html[lang=pl] .adhesion-wrapper .adhesion::before {
  content: "Reklama";
}
html[lang=pt] .adhesion-wrapper ~ .adhesion::before,
html[lang=pt] .adhesion-wrapper .adhesion::before {
  content: "Publicidade";
}
html[lang=ro] .adhesion-wrapper ~ .adhesion::before,
html[lang=ro] .adhesion-wrapper .adhesion::before {
  content: "Publicitate";
}
html[lang=ru] .adhesion-wrapper ~ .adhesion::before,
html[lang=ru] .adhesion-wrapper .adhesion::before {
  content: "Реклама";
}
html[lang=se] .adhesion-wrapper ~ .adhesion::before,
html[lang=se] .adhesion-wrapper .adhesion::before {
  content: "Annons";
}
html[lang=sk] .adhesion-wrapper ~ .adhesion::before,
html[lang=sk] .adhesion-wrapper .adhesion::before {
  content: "Reklama";
}
html[lang=sl] .adhesion-wrapper ~ .adhesion::before,
html[lang=sl] .adhesion-wrapper .adhesion::before {
  content: "Oglas";
}
html[lang=sv] .adhesion-wrapper ~ .adhesion::before,
html[lang=sv] .adhesion-wrapper .adhesion::before {
  content: "Annons";
}
html[lang=tr] .adhesion-wrapper ~ .adhesion::before,
html[lang=tr] .adhesion-wrapper .adhesion::before {
  content: "Reklam";
}
html[lang=uk] .adhesion-wrapper ~ .adhesion::before,
html[lang=uk] .adhesion-wrapper .adhesion::before {
  content: "Реклама";
}
html[lang=zh] .adhesion-wrapper ~ .adhesion::before,
html[lang=zh] .adhesion-wrapper .adhesion::before {
  content: "广告";
}
.adhesion-wrapper > .close-adhesion {
  color: #555453;
  font-size: 10px;
  position: absolute;
  right: 1rem;
  top: 4px;
}
@media (min-width: 768px) {
  .adhesion-wrapper {
    height: 112px;
  }
}
@media (min-width: 992px) {
  .adhesion-wrapper {
    height: 104px;
  }
}

.foothesion {
  border-top: 2px solid #e4e2d6;
  bottom: 0;
}

.tophesion {
  border-bottom: 2px solid #e4e2d6;
  top: 0;
}
.tophesion .adhesion:has([id^=google_ads_iframe]),
.tophesion .adhesion [id^=fallback_ads_iframe] {
  display: flex;
  justify-content: center;
}

.adhesion {
  z-index: 2147483647 !important;
}

#video-player {
  aspect-ratio: 16/9;
  margin-bottom: var(--spacer-3);
  width: 100%;
}

@media (min-width: 768px) {
  .ad-in_article {
    min-height: 90px;
  }
  .ad-wrapper-combined .ad-wrapper:nth-child(2) {
    display: flex;
  }
  .ad-wrapper {
    min-height: auto;
  }
  .ad-in_article,
  .ad-combined_article {
    position: static;
    top: auto;
  }
}
@media (min-width: 980px) {
  .ad--leaderboard {
    height: 90px;
  }
}
:root {
  --font-family-sans-serif: Montserrat, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
  --spacer-0: 0;
  --spacer-1: 0.25rem;
  --spacer-2: 0.5rem;
  --spacer-3: 1rem;
  --spacer-4: 1.5rem;
  --spacer-5: 3rem;
  --neutral-100: #F5F5F5;
  --neutral-200: #EBEBEA;
  --neutral-300: #D7D7D5;
  --neutral-400: #C4C4C0;
  --neutral-500: #A6A6A0;
  --neutral-600: #888881;
  --neutral-700: #696963;
  --neutral-800: #4A4A45;
  --neutral-900: #1E1E1C;
  --neutral-full: #0B0B0A;
}

.hide-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hidden {
  display: none;
}

.p-0 {
  padding: 0;
}

.ps-0 {
  padding-left: 0;
}

.pe-0 {
  padding-right: 0;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.p-1 {
  padding: 0.25rem;
}

.ps-1 {
  padding-left: 0.25rem;
}

.pe-1 {
  padding-right: 0.25rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.ps-2 {
  padding-left: 0.5rem;
}

.pe-2 {
  padding-right: 0.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.ps-3 {
  padding-left: 1rem;
}

.pe-3 {
  padding-right: 1rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.p-4 {
  padding: 1.5rem;
}

.ps-4 {
  padding-left: 1.5rem;
}

.pe-4 {
  padding-right: 1.5rem;
}

.pt-4 {
  padding-top: 1.5rem;
}

.pb-4 {
  padding-bottom: 1.5rem;
}

.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.p-5 {
  padding: 3rem;
}

.ps-5 {
  padding-left: 3rem;
}

.pe-5 {
  padding-right: 3rem;
}

.pt-5 {
  padding-top: 3rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

.px-5 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.m-0 {
  margin: 0;
}

.ms-0 {
  margin-left: 0;
}

.me-0 {
  margin-right: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mb-n0 {
  margin-bottom: -0;
}

.m-1 {
  margin: 0.25rem;
}

.ms-1 {
  margin-left: 0.25rem;
}

.me-1 {
  margin-right: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mb-n1 {
  margin-bottom: -0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.ms-2 {
  margin-left: 0.5rem;
}

.me-2 {
  margin-right: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mb-n2 {
  margin-bottom: -0.5rem;
}

.m-3 {
  margin: 1rem;
}

.ms-3 {
  margin-left: 1rem;
}

.me-3 {
  margin-right: 1rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mb-n3 {
  margin-bottom: -1rem;
}

.m-4 {
  margin: 1.5rem;
}

.ms-4 {
  margin-left: 1.5rem;
}

.me-4 {
  margin-right: 1.5rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mx-4 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mb-n4 {
  margin-bottom: -1.5rem;
}

.m-5 {
  margin: 3rem;
}

.ms-5 {
  margin-left: 3rem;
}

.me-5 {
  margin-right: 3rem;
}

.mt-5 {
  margin-top: 3rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.mx-5 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.mb-n5 {
  margin-bottom: -3rem;
}

body {
  font-family: "Montserrat", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 20px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
}

.sticky {
  --top: 0;
  position: sticky;
  top: var(--top);
}

nav.container {
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 992px) {
  nav.container {
    margin-left: auto;
    margin-right: auto;
  }
}

.main-nav {
  box-sizing: border-box;
  display: flex;
  padding-left: var(--spacer-4);
  list-style: none;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  overflow-x: scroll;
  width: 100%;
}
@media (min-width: 992px) {
  .main-nav {
    padding-left: 0;
  }
}
.main-nav li {
  display: flex;
  flex: 0 0 auto;
}
.main-nav .main-nav-link {
  position: relative;
  text-decoration: none;
  display: inline-flex;
  padding: var(--spacer-3);
  color: inherit;
}
.main-nav .main-nav-link:hover {
  background-color: white;
}
.main-nav .main-nav-link:hover::after {
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--header-color);
}

.site-header {
  background-color: var(--header-color);
}
.site-header svg {
  height: 40px;
  max-width: 80vw;
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container {
  margin-left: var(--spacer-4);
  margin-right: var(--spacer-4);
}
@media (min-width: 992px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
}

.base-container .articles-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacer-4);
}
@media (min-width: 576px) {
  .base-container .articles-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .base-container .articles-container .pagination {
    grid-column: 1/3;
  }
}
@media (min-width: 992px) {
  .base-container .articles-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .base-container .articles-container .pagination {
    grid-column: 1/4;
  }
}

.sidebar-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacer-4);
}
@media (min-width: 1200px) {
  .sidebar-container {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 992px) {
  .post-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .post-container {
    max-width: 1140px;
  }
}

.post-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacer-4);
}
@media (min-width: 992px) {
  .post-container {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1200px) {
  .post-container {
    grid-template-columns: 2fr 1fr;
  }
}
.post-container .post-featured-image-wrapper {
  aspect-ratio: 4/3;
}
.post-container .post-featured-image-wrapper .post-featured-image {
  height: 100%;
  object-fit: cover;
}
.post-container > .article-sidebar {
  display: none;
}
@media (min-width: 1200px) {
  .post-container > .article-sidebar {
    display: block;
  }
}

.home-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacer-4);
}
@media (min-width: 768px) {
  .home-container {
    grid-template-columns: 2fr 1fr;
  }
}
.home-container .articles-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacer-4);
}
@media (min-width: 768px) {
  .home-container .articles-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-container .articles-container article:nth-of-type(1) {
    grid-column: 1/3;
  }
  .home-container .articles-container .pagination {
    grid-column: 1/3;
  }
}

.article-card-main {
  position: relative;
}
.article-card-main .article-thumbnail-wrapper {
  --aspect-ratio: 16 / 9;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
}
.article-card-main .article-thumbnail-wrapper .article-thumbnail {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.article-card-main .article-title {
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .article-card-main .article-title {
    font-size: 2rem;
  }
}
.article-card-main:hover .article-thumbnail {
  transform: scale(1.1);
}
.article-card-main:hover .article-title {
  text-decoration: underline;
}

.article-card-base {
  position: relative;
}
.article-card-base .article-thumbnail-wrapper {
  --aspect-ratio: 16 / 9;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
}
.article-card-base .article-thumbnail-wrapper .article-thumbnail {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.article-card-base .article-title {
  font-size: 1.2rem;
}
.article-card-base:hover .article-thumbnail {
  transform: scale(1.1);
}
.article-card-base:hover .article-title {
  text-decoration: underline;
}

.img-fluid {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.stretched-link {
  position: absolute;
  inset: 0;
}

.featured-link {
  font-size: 1rem;
  font-weight: normal;
  color: inherit;
  text-decoration: none;
}
.featured-link:hover {
  text-decoration: underline;
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.aside-list {
  list-style: none;
  padding-left: 0;
}
.aside-list li:not(:last-of-type) {
  margin-bottom: var(--spacer-3);
}
.aside-list-item {
  position: relative;
}
.aside-list-item article {
  display: flex;
}
.aside-list-item:hover .aside-list-item-img {
  transform: scale(1.1);
}
.aside-list-item:hover .aside-list-item-title {
  text-decoration: underline;
}
.aside-list-item-title {
  font-size: 1rem;
  line-height: 1.2;
}
.aside-list-item-img-wrapper {
  --img-height: 100px;
  flex: 0 0 var(--img-height);
  height: var(--img-height);
  overflow: hidden;
}
.aside-list-item-img {
  --img-height: 100px;
  height: var(--img-height);
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.pagination {
  text-align: center;
}

#site-footer,
.site-footer {
  background-color: var(--footer-color);
  color: var(--footer-text-color);
  font-size: 0.9rem;
  padding-bottom: 100px;
}
@media (min-width: 768px) {
  #site-footer,
  .site-footer {
    padding-bottom: 145px;
  }
}
#site-footer .footer-logo svg,
.site-footer .footer-logo svg {
  max-height: 60px;
}
#site-footer .footer-container,
.site-footer .footer-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}
@media (min-width: 768px) {
  #site-footer .footer-container,
  .site-footer .footer-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
#site-footer .footer-navigation,
.site-footer .footer-navigation {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#site-footer .footer-navigation a,
.site-footer .footer-navigation a {
  color: var(--footer-link-color);
  text-decoration: none;
}
#site-footer .footer-navigation a:hover,
.site-footer .footer-navigation a:hover {
  text-decoration: underline;
}
@media (max-width: 767.98px) {
  #site-footer .footer-navigation,
  .site-footer .footer-navigation {
    justify-content: center;
  }
}
#site-footer .attribution svg,
.site-footer .attribution svg {
  max-width: 175px;
}