/* colors */
/* easing */
/* styles for project accordion block */
.accordion-container {
  padding-top: 70px;
}
.accordion-container .column-headings {
  display: flex;
  font-size: 1.125rem;
  column-gap: 17.5px;
  justify-content: space-between;
  padding: 8.75px 0;
}
@media screen and (min-width : 50em) {
  .accordion-container .column-headings {
    font-size: 1.125rem;
  }
}
.accordion-container .column-headings div:nth-child(2) {
  display: none;
}
@media screen and (min-width : 50em) {
  .accordion-container .column-headings div:nth-child(2) {
    display: block;
  }
}
.accordion-container .column-headings div:nth-child(3) {
  text-align: right;
}
@media screen and (min-width : 50em) {
  .accordion-container .column-headings div {
    flex: 0 0 calc(calc((100% - 87.5px) / 6) * 2 + 17.5px);
    max-width: calc(calc((100% - 87.5px) / 6) * 2 + 17.5px);
  }
}
@media screen and (min-width : 64.063em) {
  .accordion-container .column-headings div {
    flex: 0 0 calc(calc((100% - 175px) / 6) * 2 + 35px);
    max-width: calc(calc((100% - 175px) / 6) * 2 + 35px);
  }
}

.item-accordion {
  width: 100%;
  opacity: 40%;
  font-size: 1.125rem;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media screen and (min-width : 50em) {
  .item-accordion {
    font-size: 1.125rem;
  }
}
.item-accordion button:hover {
  opacity: 1;
}
.item-accordion:hover {
  opacity: 1;
  border-top: solid 1px #564E44;
  border-bottom: solid 1px #564E44;
}
.item-accordion:hover:has(+ .item-accordion.active) {
  border-bottom: solid 1px transparent;
}
.item-accordion.active {
  opacity: 1;
  border-top: solid 1px #564E44;
  border-bottom: solid 1px #564E44;
}
.item-accordion.active + .item-accordion:hover {
  border-top: solid 1px transparent;
}
.item-accordion button {
  display: flex;
  width: 100%;
  border: none;
  border-radius: none;
  padding: 8.75px 0;
  column-gap: 17.5px;
  justify-content: space-between;
}
@media screen and (min-width : 64.063em) {
  .item-accordion button {
    column-gap: 35px;
    padding: 17.5px 0;
  }
}
.item-accordion button h3, .item-accordion button .item-cat, .item-accordion button .item-year {
  font-size: 1.125rem;
  font-weight: 500;
}
@media screen and (min-width : 50em) {
  .item-accordion button h3, .item-accordion button .item-cat, .item-accordion button .item-year {
    flex: 0 0 calc(calc((100% - 87.5px) / 6) * 2 + 17.5px);
    max-width: calc(calc((100% - 87.5px) / 6) * 2 + 17.5px);
    font-size: 1.125rem;
  }
}
@media screen and (min-width : 64.063em) {
  .item-accordion button h3, .item-accordion button .item-cat, .item-accordion button .item-year {
    flex: 0 0 calc(calc((100% - 175px) / 6) * 2 + 35px);
    max-width: calc(calc((100% - 175px) / 6) * 2 + 35px);
  }
}
.item-accordion button h3, .item-accordion button .item-cat {
  text-align: left;
}
.item-accordion button .item-year {
  text-align: right;
}
.item-accordion .item-cat {
  display: none;
}
@media screen and (min-width : 50em) {
  .item-accordion .item-cat {
    display: block;
  }
}
.item-accordion .accordion-content {
  padding-bottom: 17.5px;
}
@media screen and (min-width : 50em) {
  .item-accordion .accordion-content {
    display: flex;
    column-gap: 17.5px;
  }
}
@media screen and (min-width : 64.063em) {
  .item-accordion .accordion-content {
    column-gap: 35px;
  }
}
@media screen and (min-width : 50em) {
  .item-accordion .content-col {
    flex: 0 0 calc(calc((100% - 87.5px) / 6) * 3 + 35px);
    max-width: calc(calc((100% - 87.5px) / 6) * 3 + 35px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
  }
}
@media screen and (min-width : 64.063em) {
  .item-accordion .content-col {
    flex: 0 0 calc(calc((100% - 175px) / 6) * 3 + 70px);
    max-width: calc(calc((100% - 175px) / 6) * 3 + 70px);
  }
}
.item-accordion .content-col .button {
  margin-top: 17.5px;
  display: inline-block;
}
@media screen and (min-width : 50em) {
  .item-accordion .image-col {
    flex: 0 0 calc(calc((100% - 87.5px) / 6) * 3 + 35px);
    max-width: calc(calc((100% - 87.5px) / 6) * 3 + 35px);
  }
}
@media screen and (min-width : 64.063em) {
  .item-accordion .image-col {
    flex: 0 0 calc(calc((100% - 175px) / 6) * 2 + 35px);
    max-width: calc(calc((100% - 175px) / 6) * 2 + 35px);
  }
}
.item-accordion .image-col img {
  width: 100%;
  margin-bottom: 17.5px;
  max-width: 450px;
}
@media screen and (min-width : 50em) {
  .item-accordion .image-col img {
    margin-bottom: initial;
  }
}
@media screen and (min-width : 64.063em) {
  .item-accordion .image-col img {
    max-width: 350px;
  }
}