@media (max-width: 575.98px) {
    .view {
        width: 100%;
    }
}

@media (min-width: 576px) {
    .view {
        width: 100%;
        max-width: 576px;
    }
}

@media (min-width: 0) {
    .view {font-size: 12px;}
}
@media (min-width: 325px) {
    .view {font-size: 13px;}
}
@media (min-width: 350px) {
    .view {font-size: 14px;}
}
@media (min-width: 375px) {
    .view {font-size: 15px;}
}
@media (min-width: 400px) {
    .view {font-size: 16px;}
}
@media (min-width: 425px) {
    .view {font-size: 17px;}
}
@media (min-width: 450px) {
    .view {font-size: 18px;}
}
@media (min-width: 475px) {
    .view {font-size: 19px;}
}
@media (min-width: 500px) {
    .view {font-size: 20px;}
}
@media (min-width: 525px) {
    .view {font-size: 21px;}
}
@media (min-width: 550px) {
    .view {font-size: 22px;}
}
@media (min-width: 575px) {
    .view {font-size: 23px;}
}
@media (min-width: 600px) {
    .view {font-size: 24px;}
}

.circle {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: red;
    text-align: center;
    line-height: 1.5em;
    border-radius: 3em;
    color: #fff;
}