* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;

}

p {
    margin: 5px;
}

@media print {
    .assign-one {
        font-size: 40px;
    }
}

.Q2,
.Q3 {
    display: flex;
}

.Q2 div,
.Q3 div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #eee;
    border: 1px solid #dddddd;
    font-size: 13px;
    font-weight: bold;
    padding: 5px;
    height: 60px;
    margin-right: 5px;
}

.Q2 div p,
.Q3 div p {
    font-weight: lighter;
    font-size: 10px;
}

@media (max-width : 767px) {

    .Q2,
    .Q3 {
        flex-wrap: wrap;
    }

    .Q2 div,
    .Q3 div {
        width: 100%;
        margin: 10px;
    }
}

@media (min-width : 768px) {

    .Q2,
    .Q3 {
        flex-wrap: wrap;
    }

    .Q2 div {
        width: calc(50% - 10px);
        margin: 5px;
    }

    .Q3 div.pro1 {
        width: 100%;
        margin: 5px;
    }

    .Q3 div.pro2,
    .Q3 div.pro3,
    .Q3 div.pro4 {
        width: calc(100%/3 - 10px);
        margin: 5px;
    }
}

@media (min-width : 992px) {

    .Q2,
    .Q3 {
        flex-wrap: wrap;
    }

    .Q2 div {
        width: calc(25% - 10px);
        margin: 5px;
    }

    .Q3 div.pro1,
    .Q3 div.pro4 {
        width: 100%;
        margin: 5px;
    }

    .Q3 div.pro2,
    .Q3 div.pro3 {
        width: calc(100%/2 - 10px);
        margin: 5px;
    }
}