* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.first-event span,
.second-event span,
.third-event span,
.picnic span,
.blood-donate75 span,
.blood-donate76 span,
.memEdu span{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: #000;
    border-bottom: 1px solid #000;
}

/* .first-event a,
.second-event a,
.third-event a, */
.view {
    background-color: #69c469;
    border-radius: 8px;
    color: #000;
    padding: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.yearly img,
.orientation img,
.financial img,
.picnic77 img,
.blood75 img,
.blood76 img,
.mem-events img,
.other-prog img,
.blood img,
.misc img,
.mem-edu img,
.fin-ed img,
.voc-training img,
.gallery-teej img{
    max-height: 125px;
    height: auto;
    max-width: 100%;
    width: auto;
}

.yearly div:nth-child(3),
.yearly div:nth-child(4),
.orientation div:nth-child(3),
.orientation div:nth-child(4),
.financial div:nth-child(3),
.financial div:nth-child(4),
.picnic77 div:nth-child(3),
.picnic77 div:nth-child(4),
.blood75 div:nth-child(3),
.blood75 div:nth-child(4),
.blood76 div:nth-child(3),
.blood76 div:nth-child(4),
.mem-events div:nth-child(3),
.mem-events div:nth-child(4),
.other-prog div:nth-child(3),
.other-prog div:nth-child(4),
.blood div:nth-child(3),
.blood div:nth-child(4),
.misc div:nth-child(3),
.misc div:nth-child(4),
.mem-edu div:nth-child(3),
.mem-edu div:nth-child(4),
.fin-ed div:nth-child(3),
.fin-ed div:nth-child(4),
.voc-training div:nth-child(3),
.voc-training div:nth-child(4),
.gallery-teej div:nth-child(3),
.gallery-teej div:nth-child(4){
    display: none;
}
.yearly div,
.orientation div,
.financial div,
.picnic77 div,
.blood75 div,
.blood76 div,
.mem-events div,
.other-prog div,
.blood div,
.misc div,
.mem-edu div,
.fin-ed div,
.voc-training div,
.gallery-teej div{
    text-align: center;
}

@media(min-width: 500px) {

    .yearly img,
    .orientation img,
    .financial img,
    .picnic77 img,
    .blood75 img,
    .blood76 img,
    .mem-events img,
    .other-prog img,
    .blood img,
    .misc img,
    .mem-edu img,
    .fin-ed img,
    .voc-training img,
    .gallery-teej img{
        max-height: 145px;
        height: auto;
        max-width: 100%;
        width: auto;
    }
}

@media(min-width: 576px) {

    .yearly div:nth-child(3),
    .orientation div:nth-child(3),
    .financial div:nth-child(3),
    .picnic77 div:nth-child(3),
    .blood75 div:nth-child(3),
    .blood76 div:nth-child(3),
    .mem-events div:nth-child(3),
    .other-prog div:nth-child(3),
    .blood div:nth-child(3),
    .misc div:nth-child(3),
    .mem-edu div:nth-child(3),
    .fin-ed div:nth-child(3),
    .voc-training div:nth-child(3),
    .gallery-teej div:nth-child(3){
        display: block;
    }
}

@media(min-width: 768px) {

    .yearly div:nth-child(4),
    .orientation div:nth-child(4),
    .financial div:nth-child(4),
    .picnic77 div:nth-child(4),
    .blood75 div:nth-child(4),
    .blood76 div:nth-child(4),
    .mem-events div:nth-child(4),
    .other-prog div:nth-child(4),
    .blood div:nth-child(4),
    .misc div:nth-child(4),
    .mem-edu div:nth-child(4),
    .fin-ed div:nth-child(4),
    .voc-training div:nth-child(4),
    .gallery-teej div:nth-child(4){
        display: block;
    }
}

@media(min-width: 1024px) {

    .yearly img,
    .orientation img,
    .financial img,
    .picnic77 img,
    .blood75 img,
    .blood76 img,
    .mem-events img,
    .other-prog img,
    .blood img,
    .misc img,
    .mem-edu img,
    .fin-ed img,
    .voc-training img,
    .gallery-teej img{
        max-height: 155px;
        height: auto;
        max-width: 100%;
        width: auto;
    }
}