.calendar__item {
  width: 100%;
  margin-block-start: 6rem;
}

.calendar__item:nth-of-type(1) {
  margin-block-start: 2rem;
}

.calendar__month {
  margin-block-end: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.calendar__dayOfWeek {
  font-size: var(--vvS_16-20);
}

html[lang="en"] .calendar__dayOfWeek {
  font-size: .875rem;
}

.calendar__item th,
.calendar__item td {
  width: 14.286%;
}

.calendar__sunday {
  color: var(--clr_red-accent3);
}

.calendar__saturday {
  color: var(--clr_blue-saturday);
}

.calendar__body td {
  height: min(13.333vw, 5rem);
  padding: .25rem 0 0 .25rem;
  position: relative;
  border: 1px solid var(--clr_text-pale);
  border-radius: .5rem;
  background-color: var(--clr_text-pale);
  color: var(--clr_green-main);
  font-size: var(--vvS_16-24);
  line-height: 1;
  text-align: left;
  vertical-align: top;
}

.calendar__item .calendar__avoid {
  background-color: var(--clr_green-main);
  color: var(--clr_text-dark);
}

.calendar__item .calendar__close {
  border: none;
  background-color: var(--clr_text-dark2);
  color: var(--clr_text-pale);
}

.calendar .calendar__close::after {
  content: "Close";
  position: absolute;
  bottom: .25rem;
  right: .25rem;
  font-family: var(--ff_en);
  font-size: var(--vvS_12-18);
  letter-spacing: 0;
}

.calendar .calendar__live {
  background-image: linear-gradient(to bottom, var(--clr_green-main), var(--clr_green-accent1), var(--clr_green-main));
  color: var(--clr_yellow-accent3);
  text-shadow:
    0 0 .125rem var(--clr_green-main),
    0 0 .5rem var(--clr_green-main),
    0 0 .75rem var(--clr_green-main);
}

.calendar .calendar__live::after {
  content: 'Live';
  position: absolute;
  bottom: .25rem;
  right: .25rem;
  font-family: var(--ff_en);
  font-size: var(--vvS_16-20);
  letter-spacing: 0;
}

.calendar .calendar__live.BN {
  background-image: linear-gradient(to bottom, var(--clr_red-main), var(--clr_red-accent1), var(--clr_red-main));
  color: var(--clr_yellow-accent3);
  text-shadow:
    0 0 .125rem var(--clr_red-main),
    0 0 .5rem var(--clr_red-main),
    0 0 .75rem var(--clr_red-main);
}

.calendar__item .calendar__event {
  background-image: linear-gradient(to bottom, var(--clr_yellow-main), var(--clr_yellow-accent2), var(--clr_yellow-main));
  color: var(--clr_yellow-accent3);
  text-shadow: 
    0 0 .125rem var(--clr_green-sidebar),
    0 0 .5rem var(--clr_green-sidebar),
    0 0 .75rem var(--clr_green-sidebar);
}

.calendar .calendar__event::after {
  content: "Event";
  position: absolute;
  bottom: .25rem;
  right: .25rem;
  font-family: var(--ff_en);
  font-size: var(--vvS_12-18);
  letter-spacing: 0;
}

@media screen and (min-width: 60rem) {
.calendar__month {
  font-size: 2rem;
}

.calendar__dayOfWeek,
html[lang="en"] .calendar__dayOfWeek,
.calendar .calendar__close::after,
.calendar .calendar__live::after,
.calendar .calendar__event::after {
  font-size: 1.5rem;
}

.calendar__body td {
  font-size: 1.75rem;
}
}