.device-wrapper {
    max-width: 300px;
    width: 100%;
}
.device {
    position: relative;
    background-size: cover;
}
.device::after, .device::before {
    position: absolute;
    background-size: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: "";
}
.device .screen {
    position: absolute;
    background-size: cover;
    pointer-events: auto;
}
.device[data-device="iPhone7"] {
    padding-bottom: 203.103448276%;
}
.device[data-device="iPhone16"] {
    padding-bottom: 203.0942335%
}
.device[data-device="iPhone7"] .screen {
    top: 11.9977362762%;
    left: 6.2068965517%;
    width: 87.3563218391%;
    height: 76.0611205433%;
}
.device[data-device="iPhone7"] .carousel-inner, .device[data-device="iPhone16"] .screen img {
    border-radius: 3px;
}
.device[data-device="iPhone16"] .screen {
    top: 1.454293629%;
    left: 5.977496484%;
    width: 84.88045007%;
    height: 90.85872576%;
}
.device[data-device="iPhone16"] .carousel-inner, .device[data-device="iPhone16"] .screen img {
    border-radius: 30px;
}
.device[data-device="iPhone7"][data-color="black"]::after {
    background-image: url(iPhone7/portrait_black.png);
}
.device[data-device="iPhone7"][data-color="white"]::after {
    background-image: url(iPhone7/portrait_white.png);
}
.device[data-device="iPhone16"][data-color="black"]::before {
    background-image: url(iPhone16/black.png);
}
.device[data-device="iPhone16"][data-color="black"]::after {
    background-image: url(iPhone16/black_trans.png);
}
.device[data-device="iPhone16"][data-color="white"]::before {
    background-image: url(iPhone16/white.png);
}
.device[data-device="iPhone16"][data-color="white"]::after {
    background-image: url(iPhone16/white_trans.png);
}