Bản mẫu:BKTT:Toàn bộ/styles.css

.group-layout {
    display: flex;
    flex-wrap: wrap;
}

.group-layout .group {
    flex: 0 0 calc(33.33% - 13.34px);
    margin-top: 20px;
}

.group-layout .group:nth-child(3n+1) {
    margin-right: 20px;
}
.group-layout .group:nth-child(3n+2) {
    margin-right: 20px;
}

@media only screen and (max-width: 1500px) {

   .group-layout .group {
        flex: 0 0 calc(50% - 10px);
    }
   .group-layout .group:nth-child(3n+1) {
        margin-right: 0px;
   }
   .group-layout .group:nth-child(3n+2) {
        margin-right: 0px;
   }
   .group-layout .group:nth-child(2n+1) {
        margin-right: 20px;
   }

}

@media only screen and (max-width: 850px) {

    .group-layout .group {
        flex: 0 0 100%;
    }

}

.article-text {
    padding-bottom: 6px;
    padding-left: 6px;
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    width: calc(100% - 5px);
}

.p1 {padding-left: 10px;}
.p2 {color:white;text-align: justify;padding-left: 10px;padding-right: 16px;}

.q1 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/92/Isotoxal_octagon_rhombic_dissection.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q2 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ea/CSIRO_ScienceImage_2212_CSIRO_Parkes_Telescope_This_photo_taken_in_1969_shows_the_telescope_as_it_was_around_the_time_of_the_first_manned_Moon_landing.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q3 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/85/Aerogel_nasa.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q4 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/54/Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstra%C3%9Fe-Odenwald.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q5 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ef/Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q6 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ee/Part_of_the_world_%288483222118%29.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q7 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e6/Vietnam%27s_Mekong_Delta_ESA219993.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q8 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q9 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/29/Hydroponic_Farming.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.q10 {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e1/Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}
.qN {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
    background-size: cover;
    width: 100%;
    padding-top: 100%; 
    position: relative; 
}