.dot{min-width:44px;min-height:44px;border-radius:50%;background:#ccc;cursor:pointer;transition:all .3s ease;border:none;padding:0;position:relative}.dot::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#5c4033;transition:all .3s ease}.dot.active::before{width:30px;border-radius:5px;background:#5c4033}.dot:hover::before{background:#f4a460}@media (max-width:480px){.dot{min-width:40px;min-height:40px}.dot::before{width:8px;height:8px}.dot.active::before{width:24px}}@media (max-width:360px){.dot{min-width:36px;min-height:36px}}