.device-wrapper {
  max-width: 300px;
  width: 100%;
}

.device {
  position: relative;
  width: 100%;
  padding-bottom: 197.5%;
}

.device .screen {
  position: absolute;
  top: 11.7%;
  left: 13.8%;
  width: 72.3%;
  height: 76.1%;
  border-radius: 3px;
  overflow: hidden;
}

.device[data-device="iPhoneX"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 198.898%;
  background-image: url('https://startbootstrap.github.io/startbootstrap-new-age/assets/img/portrait_black.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}