<h2>Календарь Дней Рождений</h2>

<button id="toggleFeature">Подробнее</button>

<ul id="events" class="news">
  <li><h2>6 июня 1799г.</h2><p>Александр Сергеевич Пушкин</p></li>
  <li><h2>7 июня 1848г.</h2><p>Поль Гоген</p></li>
  <li><h2>8 июня 1977г.</h2><p>Канье Уэст</p></li>
  <li><h2>9 июня 1812г.</h2><p>Иоганн Готтфрид Галле</p></li>
</ul>

body {
  padding: 2em;
  font: 1.2em Roboto, 'sans-serif';
}

.news {
  list-style: none;
  padding: 0;
  width: 30em;
  
}

.news li.feature {
  height: 190px;
}

.news li {
  padding: 10px;
  contain: paint;
}

.news li figure {
  float: left;
  height: 200px;
  width: 200px;
  margin: 0 20px;
  background: no-repeat url('https://fruntend.com/storage/photos/1/articles/svoystvo-contain-pomoshch-v-optimizatsii-brauzera/pushkin.jpg') center/cover;
}

.news li:nth-child(odd) {
  background: linear-gradient(to top right, #a7d8ff 0%, transparent 60%);
  border-left: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
}


.news li:nth-child(even) {
  background: linear-gradient(to top left, #ffa7e9 0%, transparent 60%);
  text-align: right;
  border-right: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
}

let toggler = document.querySelector("#toggleFeature");

toggler.onclick = function() {
  let feature = document.querySelector("#events li:first-child");
  if(feature.classList.contains("feature")) {
    feature.classList.remove("feature");
    feature.removeChild(feature.querySelector(".box"));
    feature.querySelector("h2").textContent = "6 июня 1799г.";
    feature.querySelector("p").textContent = "Александр Сергеевич Пушкин";
  } else {
    feature.className = "feature";
    let box = document.createElement("figure");
    box.className = "box";
    feature.prepend(box);
    feature.querySelector("h2").textContent = "Александр Сергеевич Пушкин";
    feature.querySelector("p").textContent = "самый знаменитый русский поэт, драматург и прозаик, заложивший основы современного русского литературного языка";
  }
}