Адаптивные вкладки (табы) CSS

Сниппет CSS для реализации адаптивных вкладок (табер) с помощью CSS, без использования javascript

HTML

<h1>Гороскоп</h1>
<main>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Вчера</label>
    
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2" title="Windows">Сегодня</label>
    
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3" title="HTML5">Завтра</label>
    
  <input id="tab4" type="radio" name="tabs">
  <label for="tab4" title="CSS3">Неделя</label>
    
  <section id="content1">
    <p>
        21-22 лунные сутки. Сегодня Луна в знаке Козерога помогает сохранить концентрацию на основной цели, актуальной задаче. Пик напряженности постепенно окажется позади, однако эмоциональный фон может оставаться беспокойным и неровным вплоть до ночи. Наиболее приятные тенденции этого дня – возможность исправить ошибки и получить моральную поддержку. Что-то внушит надежду или компенсирует мучения. Могут пригодиться сформированные ранее материальные резервы. Принесет плоды мастерство. В сложной ситуации может обнаружиться неожиданный положительный побочный эффект. Нежелательно поддаваться минутному импульсу, не стоит браться за принципиально новые дела, кардинально менять курс, пытаться отменить полученные результаты.     </p>
    
   
  </section>  
  <section id="content2">
    <p>
      23-24 лунные сутки. День развивает тенденции, сложившиеся накануне, и придает им размах. Луна в знаке Водолея заставляет фокусировать внимание на коллективных делах, или на своей индивидуальной роли в общих процессах. На одном из первых мест останутся темы гуманности и справедливости, в том числе, в их материальном выражении. Возможен повышенный интерес к неформальным сообществам, социальной политике государства, экономическим обновлениям разного масштаба. При наличии благих намерений, есть риск жить вчерашним днем, опираться на морально устаревшие ценности и понятия. Непредвиденные события могут затруднить контроль и соблюдение чувства меры, вести к излишествам и дорогостоящим экспериментам на разных уровнях. 
    </p>
    <p>
     ...

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,cyrillic");
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #eee;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}
.info{
  color:rgba(78, 78, 78, 0.8);
  width:100%;
  margin: 40px auto;
  text-align: center;
  font-weight:300;
}

.info a {
    color: #bbb;
    text-decoration:none;
}
.info a:hover {
    color: #888;
}
/* Базовый контейнер */
main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}
/* Стили секций с содержанием */
section {
  display: none;
  padding: 20px 0 0;
}

input {
  display: none;
}
/* Стили вкладок (табов) */
label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
label[for*='1']:before {
  content: '\f19a';
}

label[for*='2']:before {
  content: '\f17a';
}

label[for*='3']:before {
  content: '\f13b';
}

label[for*='4']:before {
  content: '\f13c';
}
/* Изменения стиля заголовков вкладок при наведении */
label:hover {
  color: #888;
  cursor: pointer;
}
/* Стили для активной вкладки */
input:checked + label {
  color: #555;
}
/* Активация секций с помощью переключателя :checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}
/* медиа запросы для различных типов носителей */
@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }

  label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media...