* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}


/* ---- grid ---- */

.grid {
    /* background: #EEE; */
    width: 80%;
    margin: 0 auto;
}


/* clearfix */

.grid:after {
    content: '';
    display: block;
    clear: both;
}


/* ---- grid-item ---- */

.grid-sizer {
    width: calc(33% - 3.4px)
}

.gutter-sizer {
    width: 0.6vw;
}

.grid-item {
    width: calc(33% - 0.3vw);
    height: calc(32vw * 0.5625);
    float: left;
    /* background: #D26; */
    /* border: 2px solid #333; */
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
    position: relative;
    margin-top: 0.6vw;
    /* margin-left: 0.5%;
    margin-right: 0.5%; */
}

.grid-item img {
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
}

.grid-item--width2 {
    width: 320px;
}

.grid-item--width3 {
    width: 480px;
}

.grid-item--width4 {
    width: 640px;
}

.grid-item--height2 {
    height: calc(2*(33vw * 0.5625) - 6.8px);
}

.grid-item--height3 {
    height: 260px;
}

.grid-item--height4 {
    height: 360px;
}

@media screen and (orientation: portrait) and (max-width: 1280px) {
    .grid {
        width: 100%;
        left: 1vw;
    }
    .grid-sizer {
        width: calc(50% - 2vw)
    }
    .gutter-sizer {
        width: 2vw;
    }
    .grid-item {
        width: calc(50% - 2vw);
        height: calc(50vw * 0.5625);
        margin-top: 2vw;
    }
    .grid-item--height2 {
        height: calc(2*(52vw * 0.5625));
    }
}

@media screen and (orientation: landscape) and (max-width: 1280px) {
    .grid {
        width: 100%;
        left: 1vw;
    }
    .grid-sizer {
        width: calc(50% - 2vw)
    }
    .gutter-sizer {
        width: 2vw;
    }
    .grid-item {
        width: calc(50% - 2vw);
        height: calc(50vw * 0.5625);
        margin-top: 2vw;
    }
    .grid-item--height2 {
        height: calc(2*(50vw * 0.5625) + 2vw);
    }
}