/*
*,
*:before,
*:after {
  box-sizing: border-box;
}

*/


/*
body {
  background-color: #eee;
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
*/


/*
main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
}
*/

.card {
  /* margin: 1rem; */
  margin: 0 auto;
  padding: 1rem;
  background-color: white;
  /* width: 20%; */
  border-radius: 3px;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.ds-1 {
  /* box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.24), 0 3px 8px rgba(0, 0, 0, 0.05); */
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.15);
}

.ds-2 {
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.23), 0 8px 25px rgba(0, 0, 0, 0.05);
}

.ds-3 {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3), 0 10px 50px rgba(0, 0, 0, 0.12);
}

.ds-4 {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.28), 0 15px 60px rgba(0, 0, 0, 0.18);
}

.ds-5 {
  box-shadow: 0 16px 20px rgba(0, 0, 0, 0.29), 0 20px 65px rgba(0, 0, 0, 0.18);
}

/*
.card:last-child {
  margin-right: 0;
}

main:after,
.card:after {
  display: table;
  content: '';
  clear: both;
}
*/