@media screen and (max-width: 920px) {
    section {
    max-width: 100%;
    padding-bottom: 0 !important;
    }
 
    .content {
        border-radius: 0;
        height: auto;
    }
    
        .img, .loadmore {
    width: calc(100% / 4 - 20px);
    padding-bottom: calc(100% / 4 - 20px);
}

.needs .support li {
    width: calc(100%/3 - 10px);
}
}

@media screen and (max-width: 800px) {
.trands .trand img {
    width: 100%;
    margin-bottom: 30px;
}

.brinfo {
    flex-direction: column;
}
}

@media screen and (max-width: 600px) {
    .img, .loadmore {
    width: calc(100% / 3 - 20px);
    padding-bottom: calc(100% / 3 - 20px);
}
.needs .support li {
    width: calc(100%/2 - 10px);
}

.content {
    padding: 25px 10px 25px 10px;
}

.header {
    padding: 0 20px 0 20px;
}

.nav, .navd {
    padding: 25px 25px 25px 25px;
}

.title .wrapper {
    padding: 15px 20px;
}
}

@media screen and (max-width: 560px) {
    .nav, .navd {
       padding-bottom: 10px;
       flex-direction: column-reverse;
    }
    
    .options {
        flex-direction: column;
        padding-bottom: 10px;
    }
    
    .options a {
        margin-bottom: 10px;
    }
    
    .nav .button, .navd .button {
        margin: 0 0 10px 0;
    }

}

@media screen and (max-width: 500px) {
    .img, .loadmore {
    float: left;
    width: calc(100% / 2 - 20px);
    padding-bottom: calc(100% / 2 - 20px);
}
}