.adobexd {
  display: grid;
  position: relative;
  padding-top: 5%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;

  &--iphone {
    width: 60%;
    height: 50%;

    &--mock {
      position: absolute;
      top: 20%;
      left: 10.7%;
      width: 40%;
      height: 60%;
      border-radius: 5px;
    }

    &--star-wars {
      position: absolute;
      top: 20%;
      left: 19.7%;
      width: 22%;
      height: 73%;
      border-radius: 40px;
    }
  }

  &--macbook {
    width: 100%;
    height: 100%;

    &--mock {
      position: absolute;
      top: 5%;
      left: 10%;
      width: 80%;
      height: 90%;
      border-radius: 5px;
    }

    &--star-wars {
      position: absolute;
      top: 15%;
      left: 10%;
      width: 80%;
      height: 90%;
      border-radius: 5px;
    }
  }
}