@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff"), url("../fonts/roboto/Roboto-Regular.otf") format("opentype"), url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff"), url("../fonts/roboto/Roboto-Bold.otf") format("opentype"), url("../fonts/roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Turret 1853";
  src: url("../fonts/turret/Turret1853-Bold.woff2") format("woff2"), url("../fonts/turret/Turret1853-Bold.woff") format("woff"), url("../fonts/turret/Turret1853-Bold.otf") format("opentype"), url("../fonts/turret/Turret1853-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin-top: 0;
  padding-top: 0;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media screen and (width < 768px) {
  :root {
    --size-01: 0.0625rem;
    --size-02: 0.125rem;
    --size-04: 0.25rem;
    --size-06: 0.5rem;
    --size-08: 0.75rem;
    --size-09: 0.85rem;
    --size-1: 1rem;
    --size-1a: 1.125rem;
    --size-2: 1.25rem;
    --size-2a: 1.375rem;
    --size-3: 1.5rem;
    --size-3a: 1.625rem;
    --size-4: 1.75rem;
    --size-4a: 1.875rem;
    --size-5: 2rem;
    --size-6: 2.25rem;
    --size-7: 2.5rem;
    --size-8: 2.75rem;
    --size-9: 3rem;
    --size-10: 3.25rem;
    --size-11: 3.5rem;
    --size-12: 3.75rem;
    --size-13: 4rem;
    --size-14: 4.25rem;
    --size-15: 4.5rem;
    --size-20: 5.75rem;
    --size-25: 7rem;
    --size-30: 8.25rem;
    --size-35: 9.5rem;
    --size-40: 10.75rem;
    --size-45: 12rem;
    --size-50: 13.25rem;
    --size-75: 19rem;
    --size-100: 25.75rem;
    --size-200: 50.75rem;
    --size-300: 75.75rem;
    --size-400: 100.75rem;
  }
}
@media screen and (width >= 768px) {
  :root {
    --size-01: 0.0625rem;
    --size-02: 0.125rem;
    --size-04: 0.3125rem;
    --size-06: 0.5625rem;
    --size-08: 0.875rem;
    --size-09: 0.9775rem;
    --size-1: 1.125rem;
    --size-1a: 1.3125rem;
    --size-2: 1.4375rem;
    --size-2a: 1.5625rem;
    --size-3: 1.75rem;
    --size-3a: 1.875rem;
    --size-4: 2rem;
    --size-4a: 2.1875rem;
    --size-5: 2.3125rem;
    --size-6: 2.5625rem;
    --size-7: 2.875rem;
    --size-8: 3.1875rem;
    --size-9: 3.4375rem;
    --size-10: 3.75rem;
    --size-11: 4rem;
    --size-12: 4.3125rem;
    --size-13: 4.625rem;
    --size-14: 4.875rem;
    --size-15: 5.1875rem;
    --size-20: 6.625rem;
    --size-25: 8.0625rem;
    --size-30: 9.5rem;
    --size-35: 10.9375rem;
    --size-40: 12.375rem;
    --size-45: 13.8125rem;
    --size-50: 15.25rem;
    --size-75: 22.4375rem;
    --size-100: 29.625rem;
    --size-200: 58.375rem;
    --size-300: 87.125rem;
    --size-400: 115.875rem;
  }
}
.sbs--heading {
  line-height: 1.25;
}
h1.sbs--heading, .sbs--heading.h1 {
  margin-bottom: var(--size-4);
  transform: translateY(0);
  color: #1E1F29;
  font-family: "Turret 1853", sans-serif;
  font-size: var(--size-6);
  font-weight: 700;
}

h2.sbs--heading, .sbs--heading.h2 {
  margin-bottom: calc(var(--size-09) + var(--size-09));
  transform: translateY(var(--size-09));
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-4a);
  font-weight: 900;
}

h3.sbs--heading, .sbs--heading.h3 {
  margin-bottom: calc(var(--size-09) + var(--size-09));
  transform: translateY(var(--size-09));
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-3a);
  font-weight: 900;
}

h4.sbs--heading, .sbs--heading.h4 {
  margin-bottom: calc(var(--size-09) + var(--size-09));
  transform: translateY(var(--size-09));
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-2a);
  font-weight: 900;
}

h5.sbs--heading, .sbs--heading.h5 {
  margin-bottom: calc(var(--size-09) + var(--size-09));
  transform: translateY(var(--size-09));
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1a);
  font-weight: 900;
}

h6.sbs--heading, .sbs--heading.h6 {
  margin-bottom: calc(var(--size-09) + var(--size-09));
  transform: translateY(var(--size-09));
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 700;
}

.sbs--paragraph {
  margin-bottom: var(--size-09);
  transform: translateY(0rem);
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 400;
  line-height: 1.5;
}
.sbs--paragraph.lead {
  font-size: var(--size-1a);
  font-weight: 400;
  margin-bottom: var(--size-1a);
}
.sbs--paragraph.small {
  font-size: var(--size-09);
  font-weight: 400;
}

.sbs--link:not(.as-button) {
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 700;
  line-height: 1.5;
  text-decoration-color: #0062A8;
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.25em;
  white-space: normal;
}
.sbs--link:not(.as-button):hover {
  cursor: pointer;
  text-decoration-color: #003b66;
}
.sbs--link:not(.as-button):focus {
  background-color: #FEC639;
  outline: none;
  text-decoration-color: #1E1F29;
}

.sbs--heading > .sbs--link:not(.as-button) {
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 700;
  line-height: 1.5;
  text-decoration-color: #0062A8;
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.25em;
  white-space: normal;
}
.sbs--heading > .sbs--link:not(.as-button):hover {
  cursor: pointer;
  text-decoration-color: #003b66;
}
.sbs--heading > .sbs--link:not(.as-button):focus {
  background-color: #FEC639;
  outline: none;
  text-decoration-color: #1E1F29;
}
.sbs--heading > .sbs--link {
  font-size: inherit !important;
}

.sbs--paragraph.lead > .sbs--link:not(.as-button) {
  color: #1E1F29;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 700;
  line-height: 1.5;
  text-decoration-color: #0062A8;
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.25em;
  white-space: normal;
}
.sbs--paragraph.lead > .sbs--link:not(.as-button):hover {
  cursor: pointer;
  text-decoration-color: #003b66;
}
.sbs--paragraph.lead > .sbs--link:not(.as-button):focus {
  background-color: #FEC639;
  outline: none;
  text-decoration-color: #1E1F29;
}
.sbs--paragraph.lead > .sbs--link {
  font-size: inherit !important;
}

.sbs--button {
  align-items: center;
  border-style: solid;
  border-width: var(--size-04);
  display: inline-flex;
  flex-direction: row;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 700;
  gap: var(--size-06);
  justify-content: center;
  line-height: 1.5;
  padding: var(--size-09) var(--size-2a) var(--size-09) var(--size-2a);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em;
}
.sbs--button:hover:not(:disabled) {
  cursor: pointer;
}
.sbs--button:focus:not(:disabled) {
  border-color: #1E1F29;
  outline-color: #FEC639;
  outline-offset: 0rem;
  outline-style: solid;
  outline-width: var(--size-04);
}
.sbs--button:disabled {
  cursor: not-allowed;
}
.sbs--button.primary {
  background-color: #0062A8;
  border-color: #0062A8;
  border-radius: 9999rem;
  color: #FFFFFE;
  text-decoration-color: transparent;
}
.sbs--button.primary:hover:not(:disabled) {
  background-color: #003b66;
  border-color: #003b66;
  color: #FFFFFE;
  text-decoration-color: #FFFFFE;
}
.sbs--button.primary:focus:not(:disabled) {
  border-color: #1E1F29;
  outline-color: #FEC639;
  outline-offset: 0rem;
  outline-style: solid;
  outline-width: var(--size-04);
}
.sbs--button.primary:disabled {
  background-color: #f0f0f4;
  border-color: #bbbdcd;
  color: #898ca9;
}

.sbs--jacket {
  background-color: #FAF6F3;
  border-radius: var(--size-2a);
}

.sbs--base-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--size-1a);
  padding: var(--size-2a);
}
.sbs--base-card-content .header {
  display: flex;
  flex-direction: column;
  gap: var(--size-06);
}
.sbs--base-card-content .header .sbs--heading {
  margin-bottom: 0;
  transform: translateY(0);
  font-size: var(--size-2a);
  line-height: 1.25;
}
.sbs--base-card-content .body > .sbs--paragraph:last-of-type {
  margin-bottom: 0;
}
.sbs--base-card-content .actions {
  margin-bottom: calc(0rem + var(--size-06));
  transform: translateY(var(--size-06));
}

.sbs--editorial-card {
  margin-bottom: calc(var(--size-4) + var(--size-09));
  transform: translateY(var(--size-09));
  container: sbs--editorial-card/inline-size;
  border-radius: var(--size-2a);
}
.sbs--editorial-card.image-top {
  display: flex;
  flex-direction: column;
}
.sbs--editorial-card.image-top .sbs--base-card-content {
  order: 2;
}
.sbs--editorial-card.image-top .image {
  order: 1;
}

.sbs--icon-card img.icon {
  margin-bottom: 0;
  transform: translateY(0);
  margin-left: var(--size-2a);
  margin-top: var(--size-2a);
  height: var(--size-5);
  width: auto;
}

.sbs--card-group {
  margin-bottom: calc(var(--size-4) + var(--size-09));
  transform: translateY(var(--size-09));
  container: sbs--card-group/inline-size;
  display: flex;
  gap: var(--size-09);
}
.sbs--card-group.article {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@container (width < 500px) {
  .sbs--card-group.article > .sbs--jacket {
    width: 100%;
  }
}
@container (width >=500px) and (width < 768px) {
  .sbs--card-group.article > .sbs--jacket {
    flex-shrink: 1;
    width: calc(50% - var(--size-09) / 2);
  }
}
@container (width >=768px) {
  .sbs--card-group.article > .sbs--jacket {
    flex-shrink: 1;
    width: calc(33.333% - var(--size-09) * 2 / 3);
  }
}
.sbs--card-group > .sbs--jacket {
  margin-bottom: 0;
  transform: translateY(0);
}

html,
body {
  height: 100%;
}

body {
  background-color: #FFFFFE;
  color: #1E1F29;
  display: flex;
  flex-direction: column;
  font-family: Roboto, sans-serif;
  font-size: var(--size-1);
  font-weight: 400;
  line-height: 1.5;
}

header {
  background-color: #0062A8;
}
header .inner {
  margin: 0 auto;
  max-width: 1280px;
  padding: var(--size-1a) var(--size-2a);
}
header .inner a {
  display: block;
  width: 200px;
}
header .inner a:focus-visible {
  outline: var(--size-04) solid #FEC639;
}
header .inner a img {
  display: block;
  height: auto;
  width: 200px;
}

main {
  margin: 0 auto;
  max-width: 1280px;
  padding: var(--size-5) var(--size-2a);
  width: 100%;
}
main .cards {
  margin-top: var(--size-5);
}

footer {
  background-color: #1E1F29;
  margin-top: auto;
}
footer .inner {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--size-2a);
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--size-4) var(--size-2a);
}
footer .inner img {
  height: 35px;
}
footer .inner .sbs--paragraph {
  margin-bottom: 0;
  transform: translateY(0);
  color: #FFFFFE;
}

/*# sourceMappingURL=style.css.map */