:root {
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --primary-corporate-blue: #0A2642;
  --primary-corporate-blue-semitransparent: #0A264230;
  --primary-digital-blue: #0200B9;
  --primary-white: #FFFFFF;
  --secondary-blue-lagoon: #006778;
  --secondary-light-grey: #F4F4F4;
  --secondary-medium-grey: #737779;
  --secondary-border-medium-grey: #73777930;
  --secondary-purple: #723AB3;
  --border-color: #C1C1C1;
  --mulish: "Muli", sans-serif;
  --lora: "Lora", serif;
  --font-size: 1.6rem;
  --line-height: 2.4rem;
  --fixed-font-size: 1.8rem;
  --fixed-line-height: 2.4rem;
  --h1-font-size: 3.4rem;
  --h1-line-height: 3.8rem;
  --h2-font-size: 2.8rem;
  --h2-line-height: 3.2rem;
  --h3-font-size: 2.8rem;
  --h3-line-height: 3.2rem;
  --h4-font-size: 2.4rem;
  --h4-line-height: 2.8rem;
  --navbar-height: 6rem;
  --market-prices-and-search-height: 5.5rem;
  --logo-height: 3.4rem;
  --max-width: 118rem;
  --max-width-inner: 126rem;
  --max-width-narrow: 73rem;
  --container-padding: 2rem;
  --container-padding-negative: -2rem;
  --header-padding: 4rem;
  --section-spacing: 3rem;
}

@media screen and (min-width: 768px) {
  :root {
    --h1-font-size: 4.5rem;
    --h1-line-height: 5.0rem;
    --h2-font-size: 3.4rem;
    --h2-line-height: 3.8rem;
    --container-padding: 3.5rem;
    --container-padding-negative: -3.5rem;
    --header-padding: 6rem;
    --section-spacing: 4rem;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --font-size: 1.8rem;
    --line-height: 2.8rem;
    --h1-font-size: 5.0rem;
    --h1-line-height: 6.0rem;
    --h2-font-size: 4.0rem;
    --h2-line-height: 5.0rem;
    --h3-font-size: 3.4rem;
    --h3-line-height: 4.6rem;
    --h4-font-size: 2.8rem;
    --h4-line-height: 3.6rem;
    --header-padding: 7rem;
    --section-spacing: 6rem;
  }
}
.section-schedule {
  align-items: stretch;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  justify-content: space-between;
}
.section-schedule h2 {
  grid-column: 1/-1;
}

.event {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
}

.event-text {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4rem;
}

.event-date,
.event-time {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.event-date {
  color: var(--secondary-medium-grey);
}

.event-time {
  padding-left: 3rem;
  position: relative;
}
.event-time::before {
  content: url(/images/icons/clock.svg);
  display: inline-block;
  left: 0;
  position: absolute;
  top: 2px;
  width: 2.4rem;
}

.event-tag {
  flex: 0 0 5rem;
}
.event-tag-1 {
  background-color: var(--primary-digital-blue);
}
.event-tag-2 {
  background-color: var(--secondary-purple);
}
.event-tag-3 {
  background-color: #DFDFFF;
}
.event-tag-4 {
  background-color: var(--primary-corporate-blue);
}
.event-tag-5 {
  background-color: var(--secondary-blue-lagoon);
}

.calendar-nav {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0 auto 1rem;
}
.calendar-nav .button {
  background-color: transparent;
  border: none 0;
}
.calendar-nav .button img {
  width: 1.5rem;
}
.calendar-nav .button:first-child img {
  transform: rotate(90deg);
}
.calendar-nav .button:last-child img {
  transform: rotate(-90deg);
}
.calendar-nav h6 {
  color: var(--primary-digital-blue);
  margin: 0 2rem;
  text-align: center;
  width: 16.5rem;
}

.calendar {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.calendar th,
.calendar td {
  font-size: 1.6rem;
  font-weight: 500;
  padding: 2rem 0;
  text-align: center;
  vertical-align: center;
}
.calendar td {
  border: 0.3px solid var(--secondary-border-medium-grey);
}
.calendar td.today-tag {
  font-weight: 900;
}
.calendar td.event-tag:not(.event-tag-3) {
  color: var(--primary-white);
}

@media screen and (min-width: 768px) {
  .section-schedule {
    gap: 2rem 4rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .section-schedule {
    gap: 4rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .event {
    gap: 3rem;
  }
  .event-text {
    font-size: 2rem;
    line-height: 2.6rem;
  }
  .event-date,
  .event-time {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  .calendar th,
  .calendar td {
    font-size: 1.8rem;
    font-weight: 400;
  }
}
@media screen and (max-width: 480px) {
  .calendar th,
  .calendar td {
    padding: 1.5rem 0;
  }
}
@media screen and (max-width: 380px) {
  .calendar th,
  .calendar td {
    padding: 1rem 0;
  }
}