.main {
  margin: 0 auto;
}

/* Calendar Grid */

.calendar__wrapper {
  display: grid;
  background-color: var(--light-golden);
  font-family: Arial, sans-serif;
  font-size: 1.125rem;
  color: var(--black-gold);
  font-weight: 700;
  margin-left: 2rem;
  max-width: 1750px;
  margin-right: 10px;
  max-height: calc(100vh - 188px);
  overflow-y: scroll; /* Vertical scroll */
  margin-bottom: 10px;
  border: 2px solid var(--dark-red);
}

.calendar__wrapper > div:last-child > div:last-child {
  margin-bottom: 0;
}

.calendar__month {
  display: grid;
}

.calendar__past {
  position: relative;
}

.calendar__past::after {
  position: absolute;
  inset: 0;
  background: #0002;
  content: "";
}

.calendar__month > div {
  border-bottom: 2px solid var(--Golden);
}

.calendar__month > div:last-child {
  border-bottom: 2px solid var(--Golden);
}

.calendar__event {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
}

.calendar__event > div {
  margin-left: 1rem;
}

.calendar__month > div:nth-child(odd) {
  background-color: var(--light-golden);
}

.calendar__month > div:nth-child(even) {
  background-color: var(--white-golden);
}

.calendar__month > div:first-child {
  background-color: var(--Golden);
  color: var(--dark-red);
  font-family: Arial Black;
  font-size: 1.25rem;
  padding: 0.2rem 0 0.2rem 0.3rem;
}

@media screen and (max-width: 1024px) {
  .calendar__wrapper {
    font-size: 0.66rem;
    margin-left: 0.8rem;
  }

  .calendar__event > div {
    margin-left: 0.75rem;
  }

  .calendar__month > div:first-child {
    font-size: 1rem;
    padding: 0.1rem 0 0.1rem 0.2rem;
  }
}

@media screen and (max-width: 415px) {
  .calendar__wrapper {
    font-size: 0.75rem;
    margin-left: 0.5rem;
  }

  .calendar__event {
    grid-template-columns: 1.8fr 1fr 4fr;
  }

  .calendar__event > div {
    margin-left: 0.4rem;
  }
}