body {
    background-color: cornsilk;
}

div {
    display: none;
}

.mezo {
    background-color: lightsalmon;
    border-radius: 5%;
    display: flex;
    padding: 0;
}

.kulso {
    display: flex;
    justify-content: center;
    padding: 10px
}

#vege {
    color: blue;
    margin: 5px;
    text-align: center;
    visibility: hidden;
}

.col {
    padding: 0;
}

.row .col .mezo {
    min-height: 40px;
    max-height: 40px;
}

.col {
    min-width: 40px;
    max-width: 40px;
}

.front {
    height: 40px;
    width: 40px;
}

.mezo img {
    height: 40px;
    width: 40px;
    align-self: center;
    margin: 0;
}

@media (min-width: 375px) and (min-height:370px) {
    .row .col .mezo {
        min-height: 75px;
        max-height: 75px;
    }

    .col {
        min-width: 75px;
        max-width: 75px;
    }


    .mezo img {
        height: 75px;
        width: 75px;
    }
}

@media (min-width: 670px) and (min-height:640px) {
    .row .col .mezo {
        min-height: 150px;
        max-height: 150px;
    }

    .col {
        min-width: 150px;
        max-width: 150px;
    }

    .mezo img {
        height: 150px;
        width: 150px;
    }
}