/* GRID ##################################### */

.grid {
    display: flex;
    flex-wrap: wrap;
}


/* Grid 01 */

.grid-01 {
    width: 100%;
    padding: 0 400px;
}
.grid-01 img {
    width: 100%;
}
.grid-01 a:hover {
    opacity: .5;
    transition: .9s;
    cursor: pointer;
}
@media screen and (max-width: 1500px) {
    .grid-01 {
        padding: 0 350px;
        }
}
@media screen and (max-width: 1150px) {
    .grid-01 {
        padding: 0 300px;
        }
}
@media screen and (max-width: 1050px) {
    .grid-01 {
        padding: 0 250px;
        }
}
@media screen and (max-width: 850px) {
    .grid-01 {
        padding: 0 200px;
        }
}
@media screen and (max-width: 750px) {
    .grid-01 {
        padding: 0 150px;
        }
}
@media screen and (max-width: 650px) {
    .grid-01 {
        padding: 0 100px;
        }
}
@media screen and (max-width: 550px) {
    .grid-01 {
        padding: 0 50px;
        }
}


/* Grid 02 */

.grid-02 {
    width: 50%;
    padding: 0 80px 30px 80px;
}
.grid-02 img {
    width: 100%;
}
.grid-02 a:hover {
    opacity: .5;
    transition: .9s;
    cursor: pointer;
}
@media screen and (max-width: 1500px) {
    .grid-02 {
        padding: 0 70px 30px 70px;
        }
}
@media screen and (max-width: 1150px) {
    .grid-02 {
        padding: 0 60px 30px 60px;
        }
}
@media screen and (max-width: 1050px) {
    .grid-02 {
        padding: 0 50px 30px 50px;
        }
}
@media screen and (max-width: 850px) {
    .grid-02 {
        padding: 0 40px 30px 40px;
        }
}
@media screen and (max-width: 750px) {
    .grid-02 {
        padding: 0 30px 30px 30px;
        }
}
@media screen and (max-width: 650px) {
    .grid-02 {
        padding: 0 20px 30px 20px;
        }
}
@media screen and (max-width: 550px) {
    .grid-02 {
        width: 100%;
        padding: 0 50px 60px 50px;
        }
}


/* Grid 03 */

.grid-03 {
    width: 33%;
    padding: 0 40px 80px 40px;
}
.grid-03 img {
    width: 100%;
}
.grid-03 a:hover {
    opacity: .5;
    transition: .9s;
    cursor: pointer;
}
@media screen and (max-width: 1500px) {
    .grid-03 {
        width: 50%;
        padding: 0 100px 80px 100px;
        }
}
@media screen and (max-width: 1150px) {
    .grid-03 {
        width: 100%;
        padding: 0 300px 60px 300px;
        }
}
@media screen and (max-width: 1050px) {
    .grid-03 {
        width: 100%;
        padding: 0 250px 60px 250px;
        }
}
@media screen and (max-width: 850px) {
    .grid-03 {
        width: 100%;
        padding: 0 200px 60px 200px;
        }
}
@media screen and (max-width: 750px) {
    .grid-03 {
        width: 100%;
        padding: 0 150px 60px 150px;
        }
}
@media screen and (max-width: 650px) {
    .grid-03 {
        width: 100%;
        padding: 0 100px 60px 100px;
        }
}
@media screen and (max-width: 550px) {
    .grid-03 {
        width: 100%;
        padding: 0 50px 60px 50px;
        }
}
@media screen and (max-width: 400px) {
    .grid-03 {
        width: 100%;
        padding: 0 10px 60px 10px;
        }
}


/* Grid 08 */

.grid-08 {
    width: 12.5%;
    padding: 0 10px 10px 10px;
}
.grid-08 img {
    width: 100%;
}
.grid-08 a:hover {
    opacity: .5;
    transition: .9s;
    cursor: pointer;
}
@media screen and (max-width: 980px) {
    .grid-08 {
        width: 16%;
        }
}
@media screen and (max-width: 500px) {
    .grid-08 {
        width: 25%;
        }
}