.action-block__wrapper {
  margin-top: 2rem;
  display: grid;
  grid-gap: 1.5rem; }
  @media screen and (min-width: 640px) {
    .action-block__wrapper {
      grid-template-columns: repeat(2, 1fr); } }
  @media screen and (min-width: 1024px) {
    .action-block__wrapper.action-block__wrapper--three-col {
      grid-template-columns: repeat(3, 1fr); } }
  @media screen and (min-width: 1024px) {
    .action-block__wrapper.action-block__wrapper--four-col {
      grid-template-columns: repeat(4, 1fr); } }

.action-block {
  background: var(--neutral_light);
  border: 1px solid var(--neutral_dark20);
  border-radius: 4px;
  display: flex;
  align-content: baseline; }
  .action-block.white {
    background: var(--neutral_white); }
  .action-block h3 {
    width: 100%;
    margin: 0 0 0.5em;
    font-size: 1.25rem;
    line-height: 1.4; }
  .action-block figure.video-responsive {
    margin-bottom: 1rem; }
  .action-block ul {
    margin: 0 1rem 1rem; }
  .action-block .video_caption_link {
    display: none; }

.action-block--one-col {
  flex-wrap: wrap;
  flex-direction: column;
  padding: 1.25rem;
  text-align: initial; }
  .action-block--one-col.flex-space-between {
    justify-content: space-between; }
  @media screen and (max-width: 992px) {
    .action-block--one-col {
      height: 100%; } }
  .action-block--one-col img {
    width: 100%;
    margin-bottom: 1rem; }
  .action-block--one-col a.link-button {
    width: 100%;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 1rem 0 0; }

.action-block--two-col {
  flex-wrap: wrap;
  overflow: hidden; }
  @media (max-width: 992px) {
    .action-block--two-col {
      flex-direction: column; } }
  .action-block--two-col .media-wrapper {
    flex: 1; }
    .action-block--two-col .media-wrapper > * {
      margin: 1.25rem;
      width: calc(100% - 1.25rem); }
      @media (max-width: 992px) {
        .action-block--two-col .media-wrapper > * {
          margin: 0;
          width: 100%; } }
    .action-block--two-col .media-wrapper.right > * {
      float: right; }
      html[dir="rtl"] .action-block--two-col .media-wrapper.right > * {
        float: left; }
  .action-block--two-col .text-wrapper {
    padding: 1rem 1.5rem 1.5rem;
    flex: 1; }
  .action-block--two-col figure.video-responsive {
    margin: 0 !important;
    max-width: unset; }
    .action-block--two-col figure.video-responsive > div {
      border: 0; }
  @media screen and (max-width: 640px) {
    .action-block--two-col a.link-button,
    .action-block--two-col button {
      width: 100%;
      text-align: center; } }

figure.video-responsive {
  max-width: 560px;
  /* Can be overridden if needed */
  width: 100%;
  margin: unset; }
  figure.video-responsive > div {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    border: 1px solid #EAEBEB;
    box-sizing: content-box; }
    figure.video-responsive > div iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%; }

nav.choose-guide {
  margin-top: 2rem; }
  nav.choose-guide .button-wrapper {
    justify-content: center; }
  nav.choose-guide a {
    min-width: 132px;
    color: var(--neutral_dark);
    border: 2px solid var(--neutral_dark);
    border-radius: 4px;
    padding: 1rem 1rem 0.875rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; }
    nav.choose-guide a i {
      font-size: 1.5rem; }
    nav.choose-guide a.active {
      color: var(--neutral_white);
      background: var(--neutral_dark);
      border-color: var(--neutral_dark); }
    nav.choose-guide a:is(:hover, :active):not(.active) {
      background: rgba(255, 255, 255, 0.4); }

section.steps {
  position: relative;
  padding: 4rem 2rem 5rem;
  font-size: 16px; }
  section.steps .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 3rem; }
  section.steps p.tag {
    background: var(--brand_primary_light);
    color: var(--brand_primary_dark);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--main-font);
    font-weight: var(--semi-bold-font-weight);
    font-size: 0.65rem;
    line-height: 1.6;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    display: inline-block; }
  section.steps nav.steps-nav {
    width: 28%;
    position: sticky;
    top: 4rem;
    border-right: 1px solid var(--neutral_dark20); }
    html[dir="rtl"] section.steps nav.steps-nav {
      border-left: 1px solid var(--neutral_dark20);
      border-right: 0; }
    @media screen and (max-width: 992px) {
      section.steps nav.steps-nav {
        display: none; } }
    section.steps nav.steps-nav p.tag {
      margin: 10px 0 10px 10px !important; }
      section.steps nav.steps-nav p.tag:first-child {
        margin-top: 0 !important; }
    section.steps nav.steps-nav ul {
      margin: 0;
      padding: 0; }
      section.steps nav.steps-nav ul a {
        display: block;
        font-family: unset;
        text-decoration: none;
        color: var(--neutral_dark);
        padding: 12px 0 12px 12px;
        margin-bottom: 0.5rem; }
        section.steps nav.steps-nav ul a:hover {
          background-color: var(--neutral_light); }
        section.steps nav.steps-nav ul a:last-child {
          margin-bottom: 0; }
      section.steps nav.steps-nav ul li {
        text-indent: 0;
        padding: 0; }
        section.steps nav.steps-nav ul li::before {
          content: ""; }
        section.steps nav.steps-nav ul li.active {
          border-right: 2px solid var(--brand_primary_default); }
          html[dir="rtl"] section.steps nav.steps-nav ul li.active {
            border-left: 2px solid var(--brand_primary_default);
            border-right: 0; }
          section.steps nav.steps-nav ul li.active p.body-two {
            font-family: var(--main-font);
            font-weight: var(--semi-bold-font-weight); }
        section.steps nav.steps-nav ul li p {
          margin-bottom: 0;
          line-height: 1.4; }
          section.steps nav.steps-nav ul li p.overline-one {
            margin-bottom: 0.25rem; }
          section.steps nav.steps-nav ul li p.body-two {
            width: 90%;
            font-weight: var(--regular-font-weight); }
  section.steps div.steps-wrapper {
    width: 70%; }
    @media screen and (max-width: 992px) {
      section.steps div.steps-wrapper {
        width: 100%; } }
    section.steps div.steps-wrapper .step {
      padding: 4rem 0;
      border-top: 1px solid var(--neutral_dark20);
      display: flex;
      align-items: start;
      gap: 1rem;
      position: relative;
      scroll-margin-top: -2px; }
      section.steps div.steps-wrapper .step.divider-accent {
        border-top: 2px solid var(--brand_primary_light);
        scroll-margin-top: 4.5rem; }
      section.steps div.steps-wrapper .step:first-child {
        margin-top: 12px; }
      section.steps div.steps-wrapper .step:last-child {
        padding-bottom: 0.25rem;
        margin-bottom: 0; }
    section.steps div.steps-wrapper p.tag {
      position: absolute;
      top: -14px;
      left: 0;
      font-size: 0.75rem;
      padding: 4px 12px 4px 10px;
      border-radius: 4px 16px 16px 4px; }
      html[dir="rtl"] section.steps div.steps-wrapper p.tag {
        left: unset;
        right: 0;
        padding: 4px 10px 4px 12px;
        border-radius: 16px 4px 4px 16px; }
    section.steps div.steps-wrapper span {
      background: var(--brand_primary_default);
      color: var(--neutral_white);
      display: block;
      width: 2rem;
      height: 2rem;
      border-radius: 100%;
      font-size: 1rem;
      text-align: center;
      line-height: 2.1;
      font-family: var(--main-font);
      font-weight: var(--semi-bold-font-weight); }
    section.steps div.steps-wrapper h3 {
      margin-top: 0; }
    section.steps div.steps-wrapper img {
      border-radius: 4px;
      width: 100%;
      margin-bottom: 1rem; }
    section.steps div.steps-wrapper ul li {
      margin-bottom: 1rem; }

/*# sourceMappingURL=how-to.css.map */