/*=====================================================================================================================
    MOBILE
=======================================================================================================================*/

* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 62.5%;
}

body {
    background-color: #fff;
}

main {
    width: 300px;
    height: 300px;
    margin: auto;
    
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
}

.red {
    background-color: red;
    opacity: 90%;
    grid-column: 1;
    grid-row: 1/3;
}

.blue {
    background-color: blue;
    opacity: 90%;
    grid-column: 3/4;
    grid-row: 1/3;
}

.yellow {
    background-color: yellow;
    opacity: 90%;
    grid-column: 2/4;
    grid-row: 2/4;

}