.calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-primary-1);
}
.calendar__title {
  color: var(--color-neutral-4);
  margin-top: 3rem;
  margin-bottom: 4rem;
  text-align: center;
}
.calendar__title h1 {
  margin-bottom: 0;
}
.calendar__title time {
  text-transform: capitalize;
}
.calendar__wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.calendar__view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  width: 100%;
}
.calendar__header {
  padding: 1.5rem 0.75rem 0 0.75rem;
}
.calendar__content {
  padding: 0 0.75rem 1.5rem 0.75rem;
}
.calendar__header,
.calendar__content {
  max-width: 307px;
  width: 100%;
  position: relative;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
}
.calendar__header h3 {
  margin: 0;
  text-transform: capitalize;
}
.calendar__header nav {
  position: absolute;
  width: 100%;
  padding: 0 .75rem;
}
.calendar__header nav ul {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.calendar__header nav li.pager__item--next a,
.calendar__header nav li.pager__item--previous a {
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
}
.calendar__header nav li.pager__item--previous a {
  background-image: url('../images/calendar_prev.svg');
}
.calendar__header nav li.pager__item--next a {
  background-image: url('../images/calendar_next.svg');
}
.calendar__header .pager__item a:hover,
.calendar__header .pager__item a:focus {
  background-color: unset;
  color: unset;
  border: none;
}
.calendar-calendar {
  padding: 0 0.75rem 1.5rem 0.75rem;
  background: var(--color-primary-1);
}
.calendar-calendar table {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.calendar-calendar th.days {
  font-weight: 400;
}
.calendar-calendar tr,
.calendar-calendar th.days,
.calendar-calendar div.day,
.calendar-calendar .mini,
.calendar-calendar tr td.today {
  background-color: transparent;
  color: var(--color-neutral-4);
}
.calendar-calendar tbody {
  gap: .5px;
  display: flex;
  flex-direction: column;
}
.calendar-calendar tr {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}
.calendar-calendar th.days {
  border: none;
}
.calendar-calendar td div.day {
  border: none;
  padding: 0;
}
.calendar-calendar td.mini {
  min-width: unset;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
}
.calendar-calendar td.mini a {
  width: 100%;
  height: 100%;
  display: block;
}
.calendar-calendar td.has-events {
  text-align: center;
}
.calendar-calendar td .mini-day-on {
  width: 100%;
}
.calendar-calendar td .mini-day-off {
  cursor: default;
  padding: 3.5px 5px;
}
.calendar-calendar td a {
  background-color: var(--color-secondary-2);
  border-radius: 29px;
  color: var(--color-neutral-4);
  padding: 3.5px 5px;
  transition: all .2s ease;
}
.calendar-calendar td a:hover {
  text-decoration: none;
  background-color: var(--color-secondary-3);
}
table .mini-day-on a {
  text-decoration: none;
}
.calendar__attachment {
  width: 100%;
  margin-bottom: 4rem;
}
.calendar__attachment ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(305px, 305px));
  width: 100%;
  gap: 2rem;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.calendar__more {
  margin: 2rem;
}
@media all and (min-width: 800px) {
  .calendar__wrapper {
    flex-direction: row;
  }
}
@media all and (min-width: 1100px) {
  .calendar__view {
    width: fit-content;
  }
}