

@media (max-width: 900px) {

  .uxav2 .shared-case-hero :is(.site-delivered-figure, .delivered-figure) > figcaption {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    justify-items: start;

    align-items: start;

    gap: 8px;

    width: 100%;

    max-width: none;

    height: auto;

    margin: 16px 0 0;

    text-align: left;

    font-size: 12px;

    line-height: 1.6;

  }



  .uxav2 .shared-case-hero :is(.site-delivered-figure, .delivered-figure) > figcaption > span {

    display: block;

    min-width: 0;

    max-width: none;

    height: auto;

    margin: 0;

    text-align: left;

  }



  .uxav2 .shared-case-hero :is(.site-delivered-figure, .delivered-figure) > figcaption > div {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    justify-items: start;

    align-items: start;

    gap: 0;

    width: 100%;

    min-width: 0;

    margin: 0;

    text-align: left;

  }



  .uxav2 .shared-case-hero :is(.site-delivered-figure, .delivered-figure) > figcaption a {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    justify-self: start;

    min-width: 0;

    max-width: 100%;

    min-height: 44px;

    height: auto;

    margin: 0;

    padding: 8px 0;

    text-align: left;

    white-space: normal;

    overflow-wrap: break-word;

    font-size: 12px;

    line-height: 1.6;

  }



  .uxav2 .shared-case-hero .hero-motion-controls {

    display: grid;

    grid-template-columns: minmax(0, 1fr);

    justify-content: start;

    justify-items: start;

    align-items: start;

    gap: 4px;

    width: 100%;

    min-width: 0;

    margin-top: 12px;

    text-align: left;

    font-size: 11px;

    line-height: 1.6;

  }



  .uxav2 .shared-case-hero .hero-motion-controls > span {

    display: block;

    min-width: 0;

    max-width: 100%;

    margin: 0;

    text-align: left;

    white-space: normal;

  }



  .uxav2 .shared-case-hero .hero-motion-controls > .hero-motion-toggle {

    justify-content: flex-start;

    justify-self: start;

    width: auto;

    max-width: 100%;

    min-height: 44px;

    margin: 0;

    padding: 8px 0;

    text-align: left;

    white-space: normal;

    line-height: 1.6;

  }



  .uxav2 .shared-case-hero .guide-disclosure {

    display: block;

    width: auto;

    max-width: 70ch;

    margin: 20px 0 0;

    padding-top: 16px;

    text-align: left;

  }



  .uxav2 .shared-case-hero .guide-hero-label {

    justify-content: flex-start;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 6px 16px;

    text-align: left;

  }



  .uxav2 .guide-progress-wrap > .guide-location {

    justify-content: flex-start;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 4px 12px;

    text-align: left;

  }



  .uxav2 .guide-progress-wrap > .guide-location > :is(strong, span) {

    min-width: 0;

    margin: 0;

    white-space: normal;

    text-align: left;

    line-height: 1.6;

  }



  .uxav2 .guided-page .guide-progress > .guide-location {

    display: flex;

    position: static;

    grid-column: 1;

    grid-row: 1;

    justify-self: start;

    justify-content: flex-start;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 4px 12px;

    width: 100%;

    min-width: 0;

    max-width: none;

    height: auto;

    margin: 0;

    padding: 0;

    text-align: left;

  }

}



