html {
    box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0 auto;
    font-family: NotoSans-Regular;
    font-size: 1em;
  }
  
  main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 728px;
    height: 300px;
    margin: 0 auto;
    background: url(./assets/race_track_728x300_bg_v1.jpg) no-repeat center;
  }
  
  .intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 45%;
    width: 58.6%;
    text-align: center;
  }
  
  .intro h1,
  .intro h3 {
    margin: 0 auto;
  }
  
  .intro h1 {
    height: 23.2%;
    margin-top: 1.6%;
    color: #ffb20c;
    font-family: NotoSans-Bold;
    font-size: 1.65em;
  }
  
  .intro h3 {
    height: 40%;
    color: white;
    line-height: 1.1;
    letter-spacing: 0.05em;
    font-size: 1.285em;
  }

  .jockeys-data {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 73%;
    z-index: 1;
    color: white;
    text-align: center;
    line-height: 1;
    font-family: NotoSans-Bold;
    font-size: 1.25em;
  }

  .left-jockey-data,
  .right-jockey-data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 39%;
    height: 100%;
  }
  
  .left-jockey-name,
  .right-jockey-name,
  .left-jockey-share,
  .right-jockey-share {
    z-index: 1;
    word-break: break-all;
    -webkit-text-stroke: 0.7px black;
  }
  
  .left-jockey-share,
  .right-jockey-share {
    font-size: 1.4em;
  }
  
  .left-jockey-image-container,
  .right-jockey-image-container {
    width: 8.5em;
    height: 8.5em;
  }

  .left-jockey-image-container img,
  .right-jockey-image-container img {
    width: 100%;
  }
  
  .left-jockey-image-container::after {
    content: "";
    background: url(https://assets.cdnppb.net/lac/2020/07/23/521f4dd55179_ds65331_arrow_1_v1.png)
      no-repeat -300% -180%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18%;
    height: 55%;
  }
  
  .right-jockey-image-container:after {
    content: "";
    background: url(https://assets.cdnppb.net/lac/2020/07/23/a128c62a9be0_ds65331_arrow_2_v1.png)
      no-repeat -0.1em -0.85em;
    position: absolute;
    bottom: 87%;
    right: 0;
    width: 17%;
    height: 58%;
  }
  
  .swing-scale-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 55.4%;
    height: 100%;
    overflow: hidden;
  }
  
  .swing-scale {
    position: relative;
    bottom: 4%;
    width: 75%;
    height: 115%;
    background: url(./assets/meter_v1.svg) no-repeat 6.5em;
    transform: rotate(90deg);
    background-size: 113%;
  }
  
  @keyframes swing {
    20% {
      transform: rotate(6deg);
    }
  
    40% {
      transform: rotate(-6deg);
    }
  
    60% {
      transform: rotate(3deg);
    }
  
    80% {
      transform: rotate(-3deg);
    }
  
    to {
      transform: rotate(0deg);
    }
  }
  
  .swing-index-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 0;
    width: 3.65%;
    height: 31%;
    animation: swing ease-in-out 1s alternate;
    transform: rotate(0deg);
    transform-origin: bottom;
  }
  
  .swing-index-container img {
    position: absolute;
    bottom: -15%;
    width: 104%;
    height: 142%;
  }
  
  .black-band {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 14.2%;
    background: url(./assets/black-bg.jpg) no-repeat;
    background-size: 100%;
  }
  
  .logo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
    width: 100%;
    height: 13.7%;
    padding: 0 2% 0 1%;
    background: linear-gradient(transparent 0%, black 100%);
  }
  
  .logo p {
    margin: 1.4% 0;
    color: white;
    font-size: 0.6rem;
  }
  
  .logo-container {
    max-width: 141.5px;
  }
  
  .logo-container img {
    width: 100%;
    height: 100%;
  }

  /* media queries */
  @media (max-width: 728px) {
    body {
      font-size: calc(0.2em + 1.75vw);
    }
  
    .intro {
      width: calc(13rem + 30vw);
    }
  
    .intro h1 {
      height: calc(7% + 3vw);
      margin-top: calc(2.7rem - 5vw);
    }
  
    .intro h3 {
      font-size: calc(2.2em - 2vw);
    }

    .jockeys-data {
      height: calc(30% + 17.72vw);
      font-size: calc(0.75rem + 1.1vw);
    }
  
    .left-jockey-image-container,
    .right-jockey-image-container {
      height: calc(61% + 5vw);
      width: calc(3.5rem + 15.7vw);
    }

    .left-jockey-image-container::after {
      background-position: calc(0.125rem - 2vw) calc(1.6rem - 2vw);
    }
  
    .right-jockey-image-container:after {
      bottom: calc(15.5rem - 10.3vw);
      width: calc(1.82rem + 13vw);
      background-position: 150% -4.3vw;
      background-size: 100%;
    }
    
    .swing-scale-container {
      width: calc(7rem + 40vw);
    }
    
    .swing-scale {
      bottom: calc(2.5rem - 4vw);
      width: 75%;
      height: 115%;
      background-position: calc(9em - 5.5vw) calc(6.0625rem - 13vw);
      background-size: calc(180% - 28vw);
    }
  
    .swing-index-container {
      bottom: calc(4.125rem - 9vw);
      width: calc(0.75rem + 2vw);
      height: calc(14% + 7vw);
    }

    .black-band {
      height: calc(4.3% + 4vw);
    }
    
    .logo {
      height: calc(4% + 4vw);
    }
    
    .logo p {
      margin: calc(20% - 18vw) 0;
    }
    
    .logo-container {
      max-width: calc(4.75rem + 9vw);
    }
  }
  
  @media (device-width: 600px) and (device-height: 450px) {
    body {
      font-size: 1em;
    }
  
    main {
      height: 450px;
      background: url(./assets/race_track_800x600_bg_v1.jpg) center 90%;
    }
  
    .intro h1 {
      height: 17%;
    }
  
    .intro h3 {
      font-size: 1.2em;
    }
  
    .swing-scale-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  
    .swing-scale {
      bottom: unset;
      width: 34%;
      height: 90%;
      transform: rotate(90deg);
      background-position: unset;
      background-size: 200%;
    }
  
    .swing-index-container {
      position: absolute;
      bottom: 32%;
      width: 5.6%;
      height: 33%;
    }
  
    .swing-index-container img {
      width: 100%;
      height: 110%;
      position: absolute;
      bottom: -15%;
    }

    .jockeys-data {
      height: 58%;
      font-size: 1.5em;
    }
  
    .left-jockey-image-container,
    .right-jockey-image-container {
      width: 85%;
      height: 82%;
    }
  
    .left-jockey-image-container::after {
      background-position: 80% 280%;
    }
  
    .right-jockey-image-container::after {
      background-position: 0.5em 140%;
      bottom: 138%;
      width: 16%;
      height: 42%;
      background-size: 100%;
    }
  
    .black-band {
      height: 7.3%;
    }
  
    .logo {
      height: 7%;
    }
  
    .logo p {
      font-size: 0.7em;
    }
  }