@media only screen and (min-width: 700px) {
    .more-info {
        max-width: 50%;
        height: auto;
        margin-left: 25%;
        margin-right: 25%;
        border-radius: 20px;
        opacity: 80%;
    }

}

/* 1024px to 1200px */
@media only screen and (max-width: 1100px) {
    
}

/* 768px to 1023px */
@media only screen and (max-width: 1023px) {
    

}

/* 481px to 767px */
@media only screen and (max-width: 767px) {
    
}

/* 0px to 480px */
@media only screen and (max-width: 480px) {
    .p1,
    .p2,
    .p3,
    .p4,
    .p5,
    .p6,
    .p7 {
        height: 25%;
    }
}