body {
    background: #dedbdb;
}

.cat_el {
    width: calc(100% / 6 - 4px);
    float: left;
    height: 80px;
    margin: 2px;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    align-items: center;
    background: white;
    box-sizing: border-box;
    display: grid;
    border-radius: 12px;
    color: black;
    text-decoration: none;
    font-size: large;
}

.prod_el {
    width: calc(100% / 6 - 4px);
    float: left;
    height: 360px;
    margin: 2px;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    align-items: center;
    background: white;
    box-sizing: border-box;
    display: grid;
    border-radius: 12px;
    color: black;
    text-decoration: none;
    font-size: large;
}

.prod_el img {
    max-height: 200px;
    margin: auto;
}

.cat_el:hover,
.prod_el:hover {
    box-shadow: 0px 2px 8px grey;
}

.hlk {
    margin: 20px 0px 40px 0px;
    text-align: center;
    font-size: x-large;
}


@media (max-width: 1280px) {

    .cat_el {
        width: calc(100% / 5 - 4px);
    }

    .prod_el {
        width: calc(100% / 4 - 4px);
    }
}

@media (max-width: 960px) {

    .cat_el {
        width: calc(100% / 4 - 4px);
    }

    .prod_el {
        width: calc(100% / 3 - 4px);
    }
}

@media (max-width: 800px) {

    .cat_el,
    .prod_el {
        width: calc(100% / 2 - 4px);
    }
}

@media (max-width: 420px) {

    .cat_el,
    .prod_el {
        width: calc(100% / 1 - 4px);
    }
}