phantasma/app/static/css/partials/_about.scss

.body--about.animated {
  //background: linear-gradient(to right, #14801c, #1f3164);
}

.about {
 	max-width: var(--container-lg-width);
  margin: 0 auto;
 	padding: var(--spacing-2);

  h1 {
    font-size: 22px;
    margin: 0 0 var(--spacing) 0;
  }

 	h2 {
 		font-size: 22px;
    font-weight: 700;
    margin: var(--spacing-2) 0;
    padding: 0 0 var(--spacing) 0;
 	}

  h3 {
    font-size: 21px;
  }

  a {
    color: #ee0;
    font-weight: 700;
    text-decoration: none;
  }

  > .row {
    @media screen and (max-width: 799px) {
      display: block;
    }
  }
}

.col--about, .col--bios {

  @media screen and (min-width: 800px) {
    width: 50%;
  }
}

.col--bios {
  .about-phantasma-block   {
    width: 100%;
    margin-top: var(--spacing);
  }
}

.about-phantasma-block--zh, .col--bios-zh {
  line-height: 1.3;
}

.accordion-checkbox {
  position: absolute;
  opacity: 0;
}

.about-bios {
  //max-width: 670px;
  padding: var(--spacing-2) 0;
}

.accordion-title {
  font-weight: 700;
  margin: var(--spacing-2) 0;
  padding: 0 0 calc(var(--spacing) / 2) 0;
  cursor: pointer;
  display: flex;
  align-items: center;

  @media screen and (min-width: 800px) {
    width: 50%;
  }

  &:hover, &:focus {
    opacity: 0.8;
  }

  h3 {
    flex: 1;
    padding-right: var(--spacing-2);
  }
}

.accordion-caret {
  font-size: 34px;
  font-family: "icomoon";
  margin-left: auto;
}

.accordion-content {
  display: none;

  @media screen and (max-width: 799px) {
    > .row {
        display: block;
    }
  }
}

.accordion-checkbox:checked + .accordion-content {
  display: block; 
}