expandable-banner {
  width: 100vw;
  background: var(--petrol-blue-50);
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  @media (min-width: 993px) {
    padding: 6rem 0;
    border-radius: 0;
  }
  @media (min-width: 1441px) {
    padding: 7.5rem 0;
  }

  > content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 28.125rem;
    margin: auto;
    position: relative;
    @media (min-width: 993px) {
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: flex-start;
      gap: 4rem;
      max-width: 56.25rem;
    }
    @media (min-width: 1441px) {
      max-width: 75rem;
    }

    > picture {
      flex-shrink: 0;
      display: flex;
      align-items: flex-end;
      width: 100%;
      height: 10rem;
      border-radius: 0.75rem;
      background: var(--pricefox-primary-color);
      @media (min-width: 993px) and (max-width: 1440px){
        width: 23rem;
        height: 35.125rem;
        background: none;
        position: sticky;
        top: 0;
      }
      @media (min-width: 1441px) {
        width: 27.5rem;
        height: 41.75rem;
        background: none;
      }
    }
      img {
        width: 100%;
        height: 9rem;
        border-radius: 0.75rem;
        object-fit: contain;
        object-position: bottom;
        @media (min-width: 993px) {
          height: 100%;
        }
      }

      > info {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        @media (min-width: 993px) {
          gap: 2rem;
        }
        @media (min-width: 1441px) {
          max-width: 36.125rem;
        }

        > hgroup {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          @media (min-width: 993px) {
            gap: 1rem;
          }
          > p {
            margin: 0;
          }
        }

        > info {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;

          > steps {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;

            ol {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;
              list-style-type: none;
              padding: 0;
              margin: 0;
              @media (min-width: 993px) {
                gap: 0.75rem;
              }

              > li {
                padding: 1rem;
                border-radius: 0.75rem;
                background: var(--white-500);

                > details {
                  > summary {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    @media (min-width: 993px) {
                      pointer-events: none;
                    }

                    > step {
                      display: flex;
                      align-items: center;
                      gap: 0.5rem;

                      > number {
                        flex-shrink: 0;
                        display: flex;
                        justify-content: center;
                        width: 1.5rem;
                        border-radius: 50%;
                        color: var(--white-500);
                        background: var(--pricefox-primary-color);

                        > p {
                          margin: 0;
                        }
                      }
                    }

                    > arrow {
                      display: flex;
                      align-items: center;
                      width: 1.5rem;
                      height: 1.5rem;
                      padding: 0.25rem;
                      border-radius: 0.5rem;
                      background: var(--petrol-blue-50);
                      @media (min-width: 993px) {
                        display: none;
                      }
                    }
                  }

                  > p {
                    margin: 0;
                  }

                  &[open] {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    @media (min-width: 993px) {
                      gap: 0.5rem;
                    }

                    svg {
                      transform: rotate(180deg);
                    }
                  }
                }
              }
            }

            > p {
              display: none;
              margin: 0;
              @media (min-width: 993px) {
                display: block;
              }
            }
          }

          > a:has(toggle-token):hover {
            background: var(--petrol-blue-600);
          }
        }
      }
    }
  }