.hwrap {
      position: relative;
      height: 100vh;
      overflow: hidden;
      background: #343223;
      background-repeat:no-repeat;
      color: #fff;
    }
    .track {
      display: flex;
      height: 100%;
      width: calc(var(--panel-count) * 50vw);
    }

    .panel {
    flex: 0 0 100vw;
    height: 100%;
    display: flex;
    place-items: center;
    justify-content: center;
    gap: 1em;
    align-content: center;
    padding: 1em;
    flex-direction: column;
    }

    .panel figure, .panel picture {
      max-width:40em;
    }

     .hrwap-square {
      border: 0.309em solid var(--secondary-tan);
     }

    .panel p {
      margin:0 auto;
    }

    p span {
      font-size: var(--h2);font-family: "cheddar-gothic-rough", sans-serif;color:#fff;font-weight: 400;line-height: 1.5;opacity:0.9 !important;
    }

      .horz-rotate-right {transform: rotate(-2deg);}

  .horz-rotate-left {transform: rotate(2deg);}

@media (min-width:48em) {
  .panel {
    flex: 0 0 50vw;
    align-content: center;
    padding: 1.618em;
  }
  .first-panel {
    margin-left:10vw;
    padding-left:3em;
  }

  .negative-right-margin {margin-right:-30%}

  .negative-left-margin {margin-left:-30%}

  .sm-width {width:75%}
}

@media (max-width:48em) {
  .hwrap {
    height: auto;
    overflow: visible;
    margin: 3.618em auto;
  }
  .hwrap .track {
    display: block;
    width: 100%;
    padding-right: 0.618em;
    padding-left: 0.618em;
  }
  .hwrap .panel {
    flex: none;
    width: 100%;
    min-height: auto;
  }
}

/*.panel:nth-child(odd) > img {
    margin-top:-5em;
}*/