$phoneWidth: 300px;
$phoneHeight: 400px;
$pixel: 1;

$phoneWidthLarge: 375px;
$phoneHeightLarge: 600px;

.PhoneUI {
  width: $phoneWidth; 
  height: $phoneHeight;

  background-color: #333;
  position: relative;
  border-radius: 1rem;
  padding: 1rem 1rem 2rem;
  box-sizing: content-box !important;

  &::before {
    content: "";
    width: .8rem;
    height: .8rem;
    background-color: white;
    border-radius: 100%;
    position: absolute;
    bottom: .6rem;
    left: 50%;
    margin-left: -.4rem;
  }

  .phoneinner {
    width: $phoneWidth * $pixel; 
    height: $phoneHeight * $pixel;
    background-color: rgba(white, 0.2);
    overflow: hidden;
    position: relative;
    transform-origin: 0 0;
    transform: scale(1 / $pixel);
    border-radius: .5rem;
  }

  &.large {
    width: $phoneWidthLarge; 
    height: $phoneHeightLarge;

    .phoneinner {
      width: $phoneWidthLarge * $pixel; 
      height: $phoneHeightLarge * $pixel;
    }
  }
}