* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background-color: #f5e0c6;
}


/* =========================
   CONTAINER UTAMA
========================= */

.media-container {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}


/* =========================
   SEMUA GAMBAR
========================= */

.gambar {
    display: block;
    width: 960px;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border: none;
}


/* =========================
   CANVA
   960 x 720 PX
========================= */

.canva-container {
    width: 960px;
    height: 720px;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

.canva-container iframe {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: none;
}


/* =========================
   YOUTUBE
========================= */

.youtube-container {
    width: 960px;
    max-width: 100%;

    aspect-ratio: 16 / 9;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

.youtube-container iframe {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: none;
}


/* =========================
   SCRATCH
   TAMPIL BESAR
========================= */

.scratch-container {
    width: 960px;
    max-width: 100%;

    height: 650px;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

.scratch-container iframe {
    display: block;

    width: 100%;
    height: 650px;

    margin: 0;
    padding: 0;

    border: none;
}


/* =========================
   WORDWALL
   960 x 720 PX
========================= */

.wordwall-container {
    width: 960px;
    height: 720px;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

.wordwall-container iframe {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: none;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 960px) {

    .media-container {
        width: 100%;
    }

    .gambar {
        width: 100%;
    }


    /* CANVA */

    .canva-container {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 3;
    }


    /* YOUTUBE */

    .youtube-container {
        width: 100%;

        aspect-ratio: 16 / 9;
    }


    /* SCRATCH */

    .scratch-container {
        width: 100%;
        height: auto;

        aspect-ratio: 960 / 650;
    }

    .scratch-container iframe {
        width: 100%;
        height: 100%;
    }


    /* WORDWALL */

    .wordwall-container {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 3;
    }

}