@charset 'utf=8';
*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

ul,li{
    list-style: none;
}
a{
    color: inherit;
    text-decoration: none;
}
img{
    max-width: 100%;
    vertical-align: bottom;
}

body{
    color: #333333;
    font-size: 16px;
    line-height: 1.0;
}
.container{
    margin :30px auto;
    padding: 0 20px;
}

.gallery{
    display: grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.gallery li:first-child{
    grid-column:1 / 3;
    grid-row:1 / 3;
}

.gallery li > img{
    object-fit: cover;
}

/* ------------------------
layout
------------------------*/
@media screen and (min-width:768px){ 
.container{
    max-width:1200px;
    margin:30px auto;
    padding: 0 20px;
}

.gallery{
    display: grid;
    grid-template-columns: 40% 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:10px;
}

.gallery li:first-child{
    grid-column:1 / 2;
    grid-row:1 / 3;
    }
.gallery li > img{
    object-fit: cover;
}

}