{% set rowclass = uikit.section.floatgrid.rowclass %}
{% set columnclass = uikit.section.floatgrid.columnclass %}
{% set cellcolor = uikit.section.floatgrid.cellcolor %}
<style type="text/css">
#renderkit-body .render-grid-content {
    margin-top: 80px;
}

@media only screen and (max-width: {{uikit.breakpoint.medium + 'px'}}) {
    #renderkit-body .render-grid-content {
        margin-top: 40px;
    }
}

#renderkit-body .render-grid-content .{{columnclass}} .content {
    min-height: 80px;
    background-color: {{cellcolor}};
    border-radius: 3px;
    margin-bottom: 30px;
}

#renderkit-body .{{rowclass}} .max-width-count {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #3bccff;
}

#renderkit-body .{{rowclass}} .width-count {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #3bccff;
    margin-top: 10px;
}

#renderkit-body .{{rowclass}} .width-count::before,
#renderkit-body .{{rowclass}} .width-count::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: 10px;
    background-color: inherit;
}

#renderkit-body .{{rowclass}} .width-count::before {
    left: 0;
}

#renderkit-body .{{rowclass}} .width-count::after {
    right: 0;
}
</style>