/* =========================================================
   Mágicos Momentos
   Mockups reutilizables de dispositivos
   ========================================================= */

.mm-device {
    position: relative;
    display: inline-grid;
    place-items: center;
    isolation: isolate;
    max-width: 100%;
}

.mm-device__screen {
    position: absolute;
    overflow: hidden;
    background: #08080a;
    z-index: 1;
}

    .mm-device__screen > iframe,
    .mm-device__screen > img,
    .mm-device__screen > video {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }

    .mm-device__screen > iframe {
        background: #08080a;
    }

    .mm-device__screen > img,
    .mm-device__screen > video {
        object-fit: cover;
        object-position: center;
    }

.mm-device__frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .38));
}

/* =========================================================
   iPhone
   Frame original: 520 × 1040
   ========================================================= */

.mm-device--iphone {
    width: min(100%, 320px);
    aspect-ratio: 520 / 1040;
}

    .mm-device--iphone .mm-device__screen {
        left: 12.88%;
        top: 5.19%;
        width: 74.24%;
        height: 89.62%;
        border-radius: 11.5% / 5.9%;
    }

/* =========================================================
   Tablet
   Frame original: 1100 × 820
   ========================================================= */

.mm-device--tablet {
    width: min(100%, 900px);
    aspect-ratio: 1100 / 820;
}

    .mm-device--tablet .mm-device__screen {
        left: 6.82%;
        top: 9.02%;
        width: 86.36%;
        height: 81.95%;
        border-radius: 4.4% / 6.2%;
    }

/* =========================================================
   Navegador
   Frame original: 1400 × 900
   ========================================================= */

.mm-device--browser {
    width: min(100%, 1100px);
    aspect-ratio: 1400 / 900;
}

    .mm-device--browser .mm-device__screen {
        left: 4.29%;
        top: 14.44%;
        width: 91.42%;
        height: 79.11%;
    }

/* =========================================================
   Monitor
   Frame original: 1500 × 1100
   ========================================================= */

.mm-device--desktop {
    width: min(100%, 1100px);
    aspect-ratio: 1500 / 1100;
}

    .mm-device--desktop .mm-device__screen {
        left: 9.47%;
        top: 10.73%;
        width: 81.06%;
        height: 61.09%;
        border-radius: 2%;
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767px) {
    .mm-device--iphone {
        width: min(100%, 280px);
    }

    .mm-device--tablet,
    .mm-device--browser,
    .mm-device--desktop {
        width: 100%;
    }
}