device-frame {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background-size: cover;
    }

    > * {
        position: relative;
        z-index: -1;
    }
}

device-frame[device="dell-xps"] {
    width: 2486px;
    height: 1482px;

    &::after {
        background-image: url('/device-frames/dell-xps.png');
    }

    > * {
        width: 1920px;
        height: 1200px;
        display: block;
        background-color: black;
    }
}

device-frame[device="macbook"] {
    width: 1972px;
    height: 1282px;

    &::after {
        background-image: url('/device-frames/macbook.png');
    }

    > * {
        width: 1512px;
        height: 982px;
        display: block;
        background-color: black;
    }
}

device-frame[device="iphone-375x812"] {
    width: 513px;
    height: 944px;

    &::after {
        background-image: url('/device-frames/iphone-375x812.png');
    }

    > * {
        width: 375px;
        height: 812px;
        background: black;
        display: block;
        outline: 2px solid black; /* hide jagged edges */
    }
}

device-frame[device="android-360x640"] {
    width: 480px;
    height: 920px;

    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;

        background-image: url('/device-frames/android-360x640.png');
        background-size: cover;
    }

    > * {
        display: block;

        position: relative;

        background-color: black;
        width: 360px;
        height: 640px;

        outline: 2px solid black; /* hide jagged edges */
    }
}