.stepped-how-to {
  padding: var(--space-14) var(--space-8);

  .grid--peek .grid__item {
    min-width: 75%;
  }

  .pretitle {
    color: rgb(var(--color-base-text));
    font-size: var(--text-size-s);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--space-11);
    margin-bottom: 0;
  }

  .title {
    color: rbg(var(--color-base-brand-secondary));
    font-size: calc(var(--text-size-2xl) + 2px);
    font-weight: var(--font-weight-bold);
    line-height: var(--space-17);
    margin-bottom: 0;
  }

  .multicolumn-card__summary {
    margin: 0;
    padding: var(--space-8) 0;
  }

  .multicolumn-card__details {
    border-bottom: solid 1px rgb(var(--color-grey-light));
  }

  .slider-buttons {
    padding: var(--space-11) 0;
  }

  .multicolumn-card:not(.text-banner--desktop) {
    .multicolumn-card__info {
      .rte {
        p {
          font-size: var(--text-size-xs);
        }

        p:first-child {
          font-size: var(--text-size-base);
        }

        p:not(:empty, :last-child) {
          margin-bottom: var(--space-6);
        }
      }
    }
  }

  .text-banner {
    audio {
      width: 100%;
    }

    .button {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--space-4);

      &.button--outline {
        color: rgb(var(--color-white));
        border-color: rgb(var(--color-white));

        :hover {
          background-color: rgb(var(--color-white));
          color: rgb(var(--color-base-brand-secondary));
        }
      }

      &.button--secondary {
        background-color: rgb(var(--color-white));
        color: rgb(var(--color-base-brand-secondary));

        &:hover {
          background-color: rgb(var(--color-white)) !important;
          color: rgb(var(--color-base-brand-secondary)) !important;
        }

        svg path {
          stroke: rgb(var(--color-base-brand-secondary)) !important;
        }
      }

      &.button--link {
        padding: 0;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .title-wrapper-multicol {
      gap: var(--space-8);
    }

    .pretitle {
      font-size: var(--text-size-xl);
    }

    .title {
      font-size: var(--text-size-3xl);
    }

    slider-component {
      padding: var(--space-24) 0;
    }

    .stepped_how_to--desktop-aside {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }
  }

  .text-banner--desktop {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: rgb(var(--color-base-brand-secondary));
    padding: var(--space-15) var(--space-6);

    * {
      color: rgb(var(--color-white));
    }

    a.button {
      flex-wrap: nowrap;
    }

    a.button:hover {
      color: rgb(var(--color-white)) !important;
    }

    a.button--link:hover {
      text-decoration: underline;
    }

    .multicolumn-card__info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-8);
      font-size: var(--text-size-s);

      .rte {
        font-weight: var(--font-weight-normal);
      }

      .inline-richtext {
        font-size: var(--text-size-2xl);
      }
    }
  }

  .text-banner--mobile {
    .multicolumn-card__details[open] {
      .multicolumn-card__summary {
        span svg {
          rotate: 270deg;
        }
      }
    }

    .multicolumn-card__summary {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: rgb(var(--color-base-brand-secondary));
      font-style: normal;
      font-weight: var(--font-weight-normal);
      line-height: var(--space-15);

      span svg {
        rotate: 90deg;
        transition: rotate 0.2s ease-in-out;

        path {
          stroke-width: 1;
        }
      }
    }

    .multicolumn-card__info {
      color: rgb(var(--color-base-text));
      font-size: var(--text-size-s);
      font-style: normal;
      font-weight: var(--font-weight-medium);
      line-height: var(--space-12);

      .button {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-4);

        &.button--link {
          background-color: transparent;
          color: rgb(var(--color-base-brand-secondary));
          padding: 0;
        }

        &.button--secondary {
          border: solid 1px rgb(var(--color-base-brand-secondary)) !important;
        }
      }
    }
  }
}