/* ==============================
   ABOUT PAGE 
================================ */

/*TABS*/

.about__tabs {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--colour-primary);
  padding-left: 1em;
}

.about__tab {
  border: 1px solid var(--colour-primary);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--colour-background-white);

  color: var(--colour-primary);
}

.about__tab--active {
  background: var(--colour-primary);
  color: var(--colour-text-light);
  border-color: var(--colour-primary);
}

/* The 2 panels*/
.about__panel {
  display: none;
}

.about__panel--active {
  display: block;
}

/* company panel*/

.about__image {
  width: 100%;
  height: 100%;
  max-height: none;
  margin-bottom: 0;
  object-fit: cover;
  display: block;
}

/*Team panel*/

.about__team {
  gap: 2rem;
}

/* team cards */

.about__member {
  flex: 1;
  perspective: 1000px;
}

.about__member-inner {
  position: relative;
  width: 100%;
  height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.about__member:hover .about__member-inner {
  transform: rotateY(180deg);
}

.about__member-front,
.about__member-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  padding: 1rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.about__member-front {
  background: var(--colour-background-white);
}

.about__member-front img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.about__member-back {
  background: var(--colour-primary);
  color: var(--colour-text-light);
  text-align: center;
  transform: rotateY(180deg);
}

/* responsive */

@media (width <= 900px) {
  .about__member {
    flex: 0 0 calc(50% - 1rem);
  }
}

@media (width <= 500px) {
  .about__team {
    flex-direction: column;
  }

  .about__member {
    flex: 1;
  }
}

.about__row {
  display: flex;
  align-items: stretch;
}

.about__box {
  display: flex;
  flex: 1;
  border-radius: var(--border-radius-l);
  overflow: hidden;
  margin: 8px;
}

.about__text {
  padding: 3rem;
  background-color: var(--colour-secondary);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.about__text--location {
  background-color: var(--colour-primary);
  color: white;
}

.about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}