@media screen and (orientation: portrait) and (max-width: 576px) {
  .container {
    width: 328px;
  }

  .header,
  .footer {
    height: auto;
    align-items: center;
  }

  .header {
    flex-direction: column-reverse;
    margin-bottom: 20px;
  }

  .footer {
    flex-direction: column;
    margin-top: 20px;
  }

  .header .link.link-img {
    height: 36px;
  }

  .header #source {
    margin-top: 20px;
  }

  .footer #legal-terms {
    margin-bottom: 10px;
    text-decoration: none;
  }

  .footer #legal-terms:hover {
    text-decoration: none;
  }

  .footer #legal-terms a,
  .footer #legal-terms a:visited {
    color: var(--va-small-text);
    text-decoration-line: underline;
    -moz-text-decoration-style: dashed;
    -webkit-text-decoration-style: dashed;
    -o-text-decoration-style: dashed;
    -ms-text-decoration-style: dashed;
    text-decoration-style: dashed;
  }

  .panels {
    display: block;
    height: auto;
    margin: 1rem 0;
  }

  .panel {
    height: auto;
    margin-bottom: 16px;
  }

  .panel__graphics.triangle-corner::after {
    visibility: visible;
  }

  .panel__info .panel__info-title {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 23px;
  }

  .panel__info .panel__info-title .panel__info-title-number {
    display: none;
  }

  /* .panel__info .panel__info-text {
    padding: 0;
    padding-right: 12px;
  } */

  .panel__info .panel__info-text .panel__info-text-column p:last-child,
  .panel__info .panel__info-text .panel__info-text-column .p:last-child {
    margin-bottom: 11px;
  }

  .touchpoint.hoverable {
    text-decoration-line: underline;
    -moz-text-decoration-style: dashed;
    -webkit-text-decoration-style: dashed;
    -o-text-decoration-style: dashed;
    -ms-text-decoration-style: dashed;
    text-decoration-style: dashed;
  }

  .popup-icon:hover::after {
    display: none;
  }

  #panel1,
  #panel2,
  #panel3 {
    flex-direction: column;
  }

  #panel1 .panel__graphics,
  #panel2 .panel__graphics,
  #panel3 .panel__graphics {
    width: 100%;
    height: 426px;
    border-radius: var(--va-top-rounded);
  }

  #panel1 .panel__graphics {
    height: 364px;
  }

  #panel1 .panel__info,
  #panel2 .panel__info,
  #panel3 .panel__info {
    width: 100%;
    height: auto;
    border-radius: var(--va-bottom-rounded);
  }

  /* #panel1 .panel__info,
  #panel3 .panel__info {
    padding-top: 0;
  } */

  #panel1 .panel__caption {
    height: 66px;
    position: static;
  }

  #panel1 .panel__graphics img,
  #panel2 .panel__graphics img,
  #panel3 .panel__graphics img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #panel3 .panel__graphics img {
    order: 3;
  }

  #panel3 .panel__graphics .caption.lower-text {
    order: 2;
  }

  #panel3 .panel__info .panel__info-text {
    display: block;
  }

  #panel3
    .panel__info
    .panel__info-text
    .panel__info-text-column:first-of-type
    p:last-of-type {
    margin-bottom: 23px;
  }

  #panel4 {
    background-color: transparent;
    background-image: none;
    color: var(--va-dictionary-text);
    border: none;
    opacity: 1;
    visibility: visible;
    transition: all 500ms ease;
  }

  #panel4.dictionary-hidden {
    opacity: 0;
    visibility: hidden;
  }

  #panel4,
  .popup {
    position: fixed;
    top: 20px;
    left: calc(50vw - 164px);
    width: 328px;
    height: calc(100vh - 40px);
  }

  #panel4 {
    top: 25vh;
    height: 50vh;
  }

  #panel4::before {
    display: block;
  }

  #panel4 {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
  }

  @supports not (
    (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))
  ) {
    #panel4::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    #panel4.highlighted1::before {
      background: var(--va-popup-gradient1-panel1), var(--va-popup-gradient2),
        var(--va-popup-gradient3), rgba(255, 255, 255, 0.84);
    }

    #panel4.highlighted2::before {
      background: var(--va-popup-gradient1-panel2), var(--va-popup-gradient2),
        var(--va-popup-gradient3), rgba(255, 255, 255, 0.84);
    }

    #panel4.highlighted3::before {
      background: var(--va-popup-gradient1-panel3), var(--va-popup-gradient2),
        var(--va-popup-gradient3), rgba(255, 255, 255, 0.84);
    }
  }

  #panel4 .panel__background {
    display: block;
    position: fixed;
    /* top: 0;
    right: 0;
    bottom: 0;
    left: 0; */
    top: -25vh;
    right: calc(164px - 50vw);
    bottom: -25vh;
    left: calc(164px - 50vw);
    background-color: var(--va-popup-background);
  }

  #panel4 .panel__close {
    display: block;
    top: 1rem;
    right: 1rem;
  }

  #panel4 .panel__content {
    height: 100%;
    padding: 1rem;
    /* background-color: #fff; */
    border: 2px dashed var(--va-popup-border);
    border-radius: var(--va-dashed-border-radius);
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.25);
  }

  #panel4 .panel__info {
    padding: 20px;
  }

  .arrow {
    top: 100%;
    transform: translateY(-100%);
  }

  .popup .popup__controls {
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .popup .popup__content {
    padding: 45px 16px 60px;
  }

  .popup .popup__content .popup__title {
    padding-left: 0px;
    margin-right: 16px;
    margin-left: 24px;
    text-indent: -24px;
  }

  .popup .popup__content .popup__info {
    padding-left: 24px;
    padding-right: 24px;
  }

  .popup .popup__info-body {
    padding-right: 20px;
  }

  .popup__info-image-source {
    width: 100%;
  }

  .popup__info-chart {
    max-width: initial;
  }
}

/* @supports not (text-decoration-style: dashed) {
  .touchpoint.hoverable {
    text-decoration-style: solid;
  }
} */