: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;
  }
}
.history {
  background-color: #F4F4F4;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 2rem 2rem auto 2rem 2rem;
  grid-template-rows: repeat(4, auto);
  /*margin-top: 4rem;*/
  padding: 2rem;
}

.history-caption,
.history-caption-mobile {
  font-size: 1.4rem;
  grid-area: 1/1/2/-1;
  line-height: 2rem;
  opacity: 0.8;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.history-caption b,
.history-caption-mobile b {
  opacity: 1;
}

.history-caption {
  display: none;
}

.history-button {
  align-self: center;
  background-color: transparent;
  background-image: url(/images/icons/arrow-down-digital-blue.svg);
  background-repeat: no-repeat;
  border: 0 none;
  cursor: pointer;
  display: block;
  grid-area: 3/2/4/3;
  height: 2rem;
  padding: 0 1rem;
  transform: rotate(90deg);
  width: 2rem;
}
.history-button:disabled {
  opacity: 0.3;
}
.history-button:last-of-type {
  grid-area: 3/-3/4/-2;
  transform: rotate(-90deg);
}

.history-wrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.2rem;
  grid-area: 2/1/3/-1;
  justify-content: initial;
  overflow: hidden;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.history-text {
  align-items: center;
  background-color: var(--primary-white);
  border-radius: 2rem;
  box-shadow: 0px 3px 2px #DFDFFF;
  color: #2E3B41;
  display: flex;
  font-size: 1.4rem;
  grid-area: 4/1/5/-1;
  height: 0;
  justify-content: start;
  line-height: 2rem;
  margin: auto;
  opacity: 0.3;
  padding: 1rem 2rem;
  transition: height 300ms ease, opacity 400ms linear;
  visibility: collapse;
  width: 100%;
}
.history-text.show {
  height: auto;
  opacity: 1;
  visibility: visible;
}
.history-text.show.dimmed {
  opacity: 0.1;
}
.history-text > p {
  margin: 0;
  padding: 0;
}

.history-year {
    align-items: center;
    background-color: var(--primary-corporate-blue);
    border-radius: 50%;
    color: var(--primary-white);
    cursor: pointer;
    display: flex;
    height: 6.2rem;
    justify-content: center;
    margin: 0 1.5rem;
    min-width: 6.2rem;
    position: relative;
    text-align: center;
}
.history-year.current {
  background-color: #757575;
  box-shadow: 0px 3px 5px var(--primary-corporate-blue-semitransparent);
}
.history-year:first-child {
  margin-left: 0;
}
.history-year:first-child::before {
  display: none;
}
.history-year:last-child {
  margin-right: 0;
}
.history-year:last-child::after {
  display: none;
}
.history-year::before, .history-year::after {
  background-color: #B3B3B3;
  content: "";
  display: block;
  height: 0.6rem;
  overflow: hidden;
  position: absolute;
  width: 1.5rem;
}
.history-year::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.3rem 50%, 0 0);
  right: 100%;
}
.history-year::after {
  clip-path: polygon(0 0, 1.2rem 0, 1.5rem 50%, 1.2rem 100%, 0 100%, 0 0);
  left: 100%;
}

@media screen and (min-width: 768px) {
  .history {
    grid-template-rows: repeat(3, auto);
  }
  .history-caption {
    display: initial;
  }
  .history-caption-mobile {
    display: none;
  }
  .history-button {
    grid-area: 2/1/3/2;
  }
  .history-button:last-of-type {
    grid-area: 2/-2/3/-1;
  }
  .history-wrapper {
    grid-area: 2/2/3/-2;
  }
  .history-text {
    grid-area: 3/1/4/-1;
  }
  .history-text.show {
    min-height: 16rem;
  }
  .history-year {
    height: 7.3rem;
    margin: 0 3rem;
    min-width: 7.3rem;
  }
  .history-year::before, .history-year::after {
    width: 3rem;
  }
  .history-year::after {
    clip-path: polygon(0 0, 2.7rem 0, 3rem 50%, 2.7rem 100%, 0 100%, 0 0);
  }
}