#authors {
  padding: 5rem 0;
  border: 2px solid #000;
  position: relative;
  background-color: oklch(0.879 0.169 91.605);
}
#authors .cubes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
#authors .cubes .cube01 {
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 35px;
  right: 35px;
  rotate: 45deg;
  background-color: #000;
}
#authors .cubes .cube02 {
  width: 8rem;
  height: 8rem;
  position: absolute;
  bottom: 35px;
  left: 35px;
  rotate: -12deg;
  background-color: oklch(0.637 0.237 25.331);
}
#authors .title {
  position: relative;
  text-align: center;
  margin-block-end: 5rem;
}
#authors .title::after {
  content: "";
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 9rem;
  height: 0.5rem;
  background-color: #000;
  rotate: 1deg;
}
#authors .title h3 {
  margin-block-end: 1rem;
}
#authors .title p {
  color: oklch(0.439 0 0);
}
#authors .cards {
  width: 100%;
}
#authors .cards.flex {
  flex-wrap: wrap;
  gap: 2rem;
}
#authors .cards .card {
  background-color: oklch(0.973 0.071 103.193);
  border: 4px solid #000;
  box-shadow: 6px 6px #000;
  padding: 2rem;
  width: 100%;
  transition: transform 0.2s linear;
  display: block;
  position: relative;
}
#authors .cards .card.founder {
  background-color: oklch(0.973 0.071 103.193);
}
#authors .cards .card.lead {
  background-color: oklch(0.962 0.044 156.743);
}
#authors .cards .card.viral {
  background-color: oklch(0.948 0.028 342.258);
}
#authors .cards .card:hover {
  transform: translate(-2px, -2px);
}
#authors .cards .card .label {
  padding: 0.25rem 0.5rem;
  border: 2px solid #000;
  color: #fff;
  position: absolute;
  top: 24px;
  right: 20px;
}
#authors .cards .card.founder .label {
  background-color: oklch(0.637 0.237 25.331);
  rotate: 12deg;
}
#authors .cards .card.lead .label {
  background-color: oklch(0.623 0.214 259.815);
  rotate: -12deg;
}
#authors .cards .card.viral .label {
  background-color: oklch(0.627 0.265 303.9);
  rotate: 45deg;
}
#authors .cards .card .image {
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
  border: 4px solid #000;
  margin-block-end: 1.5rem;
}
#authors .cards .card .image img {
  width: 100%;
}
#authors .cards .card h4 {
  margin-block-end: 0.5rem;
  transition: color 0.2s linear;
}
#authors .cards .card.founder:hover h4 {
  color: oklch(0.577 0.245 27.325);
}
#authors .cards .card.lead:hover h4 {
  color: oklch(0.546 0.245 262.881);
}
#authors .cards .card.viral:hover h4 {
  color: oklch(0.558 0.288 302.321);
}
#authors .cards .card .job {
  color: oklch(0.439 0 0);
  margin-block-end: 1rem;
}
#authors .cards .card p {
  margin-block-end: 1.5rem;
  line-height: 1.625rem;
}
#authors .cards .card .social-media {
  cursor: auto;
}
#authors .cards .card .social-media li {
  width: 3rem;
  height: 3rem;
  border: 2px solid #000;
  display: inline-block;
  margin-inline-end: 1rem;
  background-color: #000;
  transition: background-color 0.2s linear, box-shadow 0.2s linear,
    transform 0.2s linear;
}
#authors .cards .card .social-media li:hover {
  box-shadow: 6px 6px #000;
  transform: translate(-2px, -2px);
}
#authors .cards .card .social-media li.twitter:hover {
  background-color: rgb(29, 161, 242);
}
#authors .cards .card .social-media li.linkedin:hover {
  background-color: oklch(0.546 0.245 262.881);
}
#authors .cards .card .social-media li.instagram:hover {
  background-color: oklch(0.592 0.249 0.584);
}
#authors .cards .card .social-media li a {
  position: relative;
  color: #fff;
  width: 100%;
  height: 100%;
}