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

.device {
  position: relative;
  background-size: cover;
}

.device::after {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.device .screen {
  position: absolute;
  background-size: cover;
  pointer-events: auto;
}

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

.device {
  position: relative;
  background-size: cover;
}

.device::after {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.device .screen {
  position: absolute;
  background-size: cover;
  pointer-events: auto;
}

.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 80.4666304938%;
}

.device[data-device="iMac"][data-orientation="portrait"][data-color="black"] .screen {
  top: 5.0573162508%;
  left: 4.0694519805%;
  width: 91.8610960391%;
  height: 64.194200944%;
}

.device[data-device="iMac"][data-orientation="portrait"][data-color="black"]::after {
  content: '';
  background-image: url(iMac/portrait_black.png);
  z-index: -1;
}

.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 57.9470198675%;
}

.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"] .screen {
  top: 6.7142857143%;
  left: 11.8377483444%;
  width: 76.4072847682%;
  height: 82.4285714286%;
}

.device[data-device="MacbookPro"][data-orientation="portrait"][data-color="black"]::after {
  content: '';
  background-image: url(MacbookPro/portrait_black.png);
  z-index: -1;
}