@charset "UTF-8";

html,body,h1,h2,h3,p,ul,li{
  margin:0;
  padding:0;
  line-height: 1.0;
}
ul,li{
list-style: none;
}
a{text-decoration: none;
color:inherit;
}
img{
  vertical-align: bottom;
  max-width: 100%;
}

body{
  overflow-y:scroll;
}
.container{
max-width:960px;
  margin: 0 auto;
  padding:20px;
  box-sizing: border-box;
  background-color:#acc;
}
.wrapper{
display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  grid-gap:16px;
  background-color: aquamarine;
}
.mix{
  padding:20px;
  background:#ececec;
  border:1px solid #aaa;
}
h2{
margin-bottom:30px;
}
h3{
  margin-bottom:16px;
}
.mix img{
margin-bottom:16px;
}

.mix p{
line-height:1.5;
}

.controls{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-gap:10px;
  width:90%;
  margin:0 auto 20px;
}
.controls>li{
  padding:8px 0;
  text-align:center;
  background:#ececec;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:pointer;
}