.swiper {
  width: 100%;
}

/* Только календарь месяцев имеет фикс. высоту — столько, чтобы поместились
   6 строк (ноябрь). Reviews-слайдер использует autoHeight и подстраивается
   под высоту видео сами (см. form.css). */
.mySwiper {
  height: 410px;
}


.swiper-slide {
  text-align: center;
  font-size: 12px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.calendar {
  display: grid;
  width: 95%;
  /* На ПК без max-width один месяц растягивался на всю ширину слайда,
     ячейки разъезжались. Ограничиваем до комфортного минимума
     (ячейка ~50px, цифры читаются) — чтобы на экране помещалось
     несколько месяцев одновременно. На мобильных width:95% остаётся
     активным, т.к. меньше max-width. */
  max-width: 400px;
  height: 400px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: gainsboro;
  padding: 5px;
  grid-template-columns: repeat(7, 1fr);
  border-radius: 15px;
  align-items: center;
  margin: 0 auto;
}

.calendar .head {
  grid-column: span 7;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 150%;
  color: black;
}

.calendar .head2 {
  font-weight: bold;
  font-size: 150%;
  color: black;
}

.calendar>div {
  padding: 6px;
  text-align: center;
  align-items: center;
  border-radius: 10px;
  color: #555;
  margin: 1px;
}

.calendar .day {
  opacity: 0.6;
  font-size: 150%;
}

.calendar .active {
  opacity: 1;
  background: blueviolet;
  color: white !important;
  cursor: pointer;
  transition: 1s;
}

.calendar .selectable {
  background-color: powderblue;
  cursor: pointer;
  color: black !important;
  font-weight: 900;
}

.calendar .selectable:hover {
  opacity: 1;
}

div.day.selectable.disabled {
  background-color: inherit !important;
  ;
  cursor: inherit !important;
  ;
  color: black !important;
  font-weight: 900;
}

.calendar .selected {
  opacity: 1;
  cursor: pointer;
  color: black !important;
  background-color: #45bced
}

.swiper-button-next {
  font-weight: 900;
  color: #0000ff;
  display: block;
  background-color: #00000033;
  padding: 30px 5px;
  border-radius: 7px;
  border: none;
}

.swiper-button-prev {
  font-weight: 900;
  color: #0000ff;
  display: block;
  background-color: #00000033;
  padding: 30px 5px;
  border-radius: 7px;
  border: none;
}

.swiper-button-prev :hover {
  background-color: #00000066;
}

.swiper-button-next :hover {
  background-color: #00000066;
}



/* На ПК слайды фиксированной ширины — swiper показывает столько месяцев,
   сколько влезет во viewport (slidesPerView: 'auto' в JS). На мобильных
   слайд занимает всю ширину, slidesPerView: 1. */
@media screen and (min-width: 768px) {
  .mySwiper .swiper-slide {
    width: 420px;
  }
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {

  .weekdays li,
  .days li {
    width: 13.1%;
  }

  /* width: 100% вместо 100vw — 100vw включает scrollbar и вызывает
     горизонтальный скролл. height оставляем как в базовом (410px), чтобы
    swiper не обрезал calendar (фикс 400px). */
  .swiper {
    width: 100%;
  }

}

@media screen and (max-width: 420px) {

  .weekdays li,
  .days li {
    width: 12.5%;
  }

  .days li .active {
    padding: 2px;
  }
}

@media screen and (max-width: 290px) {

  .weekdays li,
  .days li {
    width: 12.2%;
  }
}