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 {

  //@media screen and (min-width: 800px) {
    //background: rgba(255, 255, 255, 0.04);  
    //padding: var(--spacing-2);
  //}
//}

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

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

.accordion-title {
  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; 
}