Media query (consultas de medios) diseño responsivo

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Media query (consultas de medios) diseño responsivo - Tutoriales En Linea</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #f0f0f0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  min-width: 21.25em;
  margin: 0;
}

.passengers {
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 60em;
}

h1 {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 1em;
}

.passenger {
  margin-bottom: 1em;
  padding-right: 1.69492%;
}

@media screen and (min-width: 31em) {
  .passenger {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
    border-right: 1px solid black;
  }
  .passenger:nth-child(3n) {
    float: right;
    margin-right: 0;
    border-right: 0;
  }
}
@media screen and (min-width: 31em) {
  .passenger__label {
    text-align: center;
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 30.99em) {
  .passenger__label {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 10.25em);
  }
}
@media screen and (max-width: 24.5em) {
  .passenger__label span {
    display: block;
  }
}
@media screen and (min-width: 31em) and (max-width: 39.99em) {
  .passenger__label span {
    display: block;
  }
}
.passenger__stepper {
  position: relative;
  display: inline-block;
}
.passenger__stepper > * {
  display: inline-block;
  vertical-align: middle;
}

@media screen and (min-width: 31em) {
  .passenger__stepper {
    display: block;
    max-width: 14em;
    margin: 0 auto;
    width: 100%;
  }
  .passenger__stepper::after {
    content: '';
    display: block;
    clear: both;
  }
}
.stepper {
  border: 0;
  outline: 0;
  cursor: pointer;
  font-size: 1.25em;
  background: black;
  color: white;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0.125em 0.125em 0 0 white, 0.125em 0.125em 0 1px black;
}
.stepper:active {
  box-shadow: 0 0 0 1px white, 0 0 0 1px black;
  -webkit-transform: translate(0.125rem, 0.125rem);
  transform: translate(0.125rem, 0.125rem);
}

.stepper__display {
  font-size: 2em;
  margin: 0 0.5em;
}

@media screen and (min-width: 31em) {
  .stepper__display {
    font-size: 5em;
    float: left;
    line-height: 1.2;
    margin: 0;
    padding-left: 1rem;
  }

.stepper {
    position: absolute;
    right: 1rem;
  }

.stepper__more {
    top: 0;
  }

.stepper__less {
    bottom: 0;
  }
}
</style>
<body>

<div class="passengers">
  <h1>Seleccione numero de pasajeross</h1>
  <div class="passenger">
    <p class="passenger__label">Adulto <span>(años 12 & up)</span></p>
    <div class="passenger__stepper">
      <button type="button" class="stepper stepper__less">-</button>
      <p class="stepper__display">1</p>
      <button type="button" class="stepper stepper__more">+</button>
    </div>
  </div>
  <div class="passenger">
    <p class="passenger__label">Niños <span>(años 2-11yrs)</span></p>
    <div class="passenger__stepper">
      <button type="button" class="stepper stepper__less">-</button>
      <p class="stepper__display">1</p>
      <button type="button" class="stepper stepper__more">+</button>
    </div>
  </div>
  <div class="passenger">
    <p class="passenger__label">Infantil <span>(años 1-23mths)</span></p>
    <div class="passenger__stepper">
      <button type="button" class="stepper stepper__less">-</button>
      <p class="stepper__display">1</p>
      <button type="button" class="stepper stepper__more">+</button>
    </div>
  </div>
</div>

</body>

</html>