.container:after,.control,.gap,.mix,.mix:before{display:inline-block}body,html{height:100%;/*background:#f2f2f2*/}*,:after,:before{box-sizing:border-box}.controls{padding:1rem;background:#333;font-size:.1px}.control{position:relative;width:2.7rem;height:2.7rem;background:#444;cursor:pointer;font-size:.1px;color:#fff;transition:background 150ms}.control[data-filter]:after,.control[data-sort]:after{position:absolute;width:10px;height:10px;top:calc(50% - 6px);left:calc(50% - 6px);content:''}.control:hover{background:#3f3f3f}.control[data-filter]:after{border:2px solid currentColor;border-radius:2px;background:currentColor;transition:background-color 150ms,border-color 150ms}.control[data-sort]:after{border-top:2px solid;border-left:2px solid;transform:translateY(1px) rotate(45deg)}.control[data-sort*=":desc"]:after{transform:translateY(-4px) rotate(-135deg)}.mixitup-control-active,.mixitup-control-active[data-filter]:after{background:0 0}.control:first-of-type{border-radius:3px 0 0 3px}.control:last-of-type{border-radius:0 3px 3px 0}.control[data-filter]+.control[data-sort]{margin-left:.75rem}.control[data-filter=".green"]{color:#91e6c7}.control[data-filter=".blue"]{color:#5ecdde}.control[data-filter=".pink"]{color:#d595aa}.control[data-filter=none]{color:#2f2f2f}.container:after{content:'';width:100%}.gap,.mix{vertical-align:top;width:calc(100%/2 - (((2 - 1) * 1rem)/ 2))}.mix{background:#fff;border-top:.5rem solid currentColor;border-radius:2px;margin-bottom:1rem;position:relative}.mix:before{content:'';padding-top:56.25%}.mix.green{color:#91e6c7}.mix.pink{color:#d595aa}.mix.blue{color:#5ecdde}@media screen and (min-width:541px){.gap,.mix{width:calc(100%/3 - (((3 - 1) * 1rem)/ 3))}}@media screen and (min-width:961px){.gap,.mix{width:calc(100%/4 - (((4 - 1) * 1rem)/ 4))}}@media screen and (min-width:1281px){.gap,.mix{width:calc(100%/5 - (((5 - 1) * 1rem)/ 5))}}