.dateDisplay {
  line-height: 1;
  text-align: center;
  display: inline-block;
  padding: 0;
  margin-bottom: 2em;
  cursor: default;
}
.dateDisplay * {
  cursor: default;
}
.dateDisplay div {
  display: grid;
  letter-spacing: 0;
  margin-bottom: 0;
  grid-template-columns: max-content auto;
  grid-column-gap: 0.5em;
}
.dateDisplay div:hover > aside, .dateDisplay div:hover .dateDisplay__year, .dateDisplay div:hover .dateDisplay__year .dateDisplay__day-and-month {
  color: #424242;
}
.dateDisplay div > aside {
  color: #9e9e9e;
  align-self: center;
}
.dateDisplay div .dateDisplay__year {
  color: #bdbdbd;
  background-color: #f5f5f5;
  padding-right: 0.6em;
  display: inline-block;
  border-radius: 0.35em;
}
.dateDisplay div .dateDisplay__year .dateDisplay__day-and-month {
  display: inline-block;
  color: #9e9e9e;
  background-color: #eeeeee;
  border: 1px solid #e0e0e0;
  padding: 0.3em 0.6em;
  margin-right: 0.2em;
  border-radius: 0.35em;
}

.controlPanel {
  position: sticky;
  padding: 0.5rem 0.7rem;
  background-color: white;
  box-shadow: 2px 2px 4px #e0e0e0;
  border-radius: 0.5rem;
  border: 1px solid #eeeeee;
  z-index: 2;
}
.controlPanel > div, .controlPanel > button {
  padding: 0.3rem 0.7rem;
}
@media screen and (min-width: 640px) {
  .controlPanel > div, .controlPanel > button {
    display: block;
  }
}
.controlPanel > div > i, .controlPanel > button > i {
  font-size: 2rem;
}
.controlPanel > div > div, .controlPanel > button > div {
  text-align: center;
  line-height: 1;
  font-size: 0.8em;
}
.controlPanel > div:hover, .controlPanel > button:hover {
  cursor: pointer;
}
.controlPanel > div *, .controlPanel > button * {
  color: #424242;
}
@media screen and (min-width: 1200px) {
  .controlPanel > div *, .controlPanel > button * {
    color: #9e9e9e;
  }
}
@media screen and (min-width: 640px) {
  .controlPanel > div + div, .controlPanel > div + button, .controlPanel > button + div, .controlPanel > button + button {
    margin-top: 0.5em;
  }
}
@media screen and (min-width: 1px) and (max-width: 639px) {
  .controlPanel .timeToRead {
    display: inline-flex;
    gap: 5px;
    align-items: center;
  }
}
.controlPanel .timeToRead:hover {
  cursor: default;
}
.controlPanel:hover div * {
  color: #424242;
}
.controlPanel:hover {
  box-shadow: 4px 4px 6px #9e9e9e;
}

/**
	Для телефонов -> --bottom, чтобы Контрольную панель поместить в конец контейнера
	чтобы добиться адекватной работы position: sticky
	и "прибить" блок к нижней части экрана.
*/
.controlPanel--top {
  top: 1rem;
}
@media screen and (min-width: 1px) and (max-width: 639px) {
  .controlPanel--top {
    display: none !important;
  }
}

.controlPanel--bottom {
  display: flex;
  bottom: 1rem;
  box-shadow: 4px 4px 6px #9e9e9e;
}
@media screen and (min-width: 640px) {
  .controlPanel--bottom {
    display: none !important;
  }
}

.post-title {
  text-align: left;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 1px) and (max-width: 639px) {
  .post-title {
    margin-top: 1em;
  }
}

.postBody {
  display: grid;
  grid-template-areas: "text" "panel";
  grid-template-rows: auto max-content;
  grid-row-gap: 20px;
}
@media screen and (min-width: 640px) {
  .postBody {
    grid-template-columns: max-content auto;
    grid-template-areas: "panel text";
    grid-column-gap: 20px;
    align-items: start;
  }
}
.postBody > aside {
  grid-area: "panel";
}
.postBody > span.postBody_text {
  grid-area: "text";
  display: block;
}
@media screen and (min-width: 640px) {
  .postBody > span.postBody_text {
    font-size: 1.15em;
  }
}
.postBody > span.postBody_text p:first-child {
  margin-top: 0;
}