/**********************

	  ABOUT

***********************/
body.a_propos section h2 {
  font-size: var(--tiny-font-size);
}

/* ABOUT */
section.about {
  padding-top: var(--big-margin);
}

section.about > figure {
  margin: 0;
}

section.about > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.about article {
  padding-top: var(--big-margin);
}

section.about article > h1 {
  font-size: var(--subtitle);
}

/* TEAM */
section.team .teamList {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--med-margin);
}

section.team .member > figure {
  border-color: var(--blue);
}

section.team .member > div {
  padding: 14px 18px 18px;
  border-left: 1px solid var(--blue);
}

section.team .member .name {
  font-size: var(--small-font-size);
  margin-bottom: 6px;
}

section.team .member p {
  font-size: var(--tiny-font-size);
}

section.teamText,
section.chart {
  max-width: 72ch;
  font-size: var(--base-font-size);
}

/* PARTNERSHIPS */
.partnerList {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.partnerList > li {
  max-width: calc(50% - 9px);
  flex-basis: calc(50% - 9px);
}

.partnerList > li > a {
  display: block;
}

.partnerList > li > a > figure {
  display: flex;
}

.partnerList > li > a > figure > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* RESPONSIVE*/
@media screen and (min-width: 580px) {
  body.a_propos section h2,
  body.a_propos section p {
    font-size: var(--small-font-size);
  }
}

@media screen and (min-width: 768px) {
  section.team .member {
    display: flex;
    align-items: start;
  } 

  section.team .member figure {
    flex-basis: 30%;
    flex-shrink: 0;
    aspect-ratio: 2/3
  } 

  section.team .member figure > img {
    height: 100%;
    object-fit: cover;
  }

  section.team .member div {
    flex-grow: 1;
    background-color: transparent;
    border-left: 0;
    border-top: 1px solid var(--blue);
  } 

  .partnerList > li {
    max-width: 150px;
    flex-basis: 150px;
  }
}

@media screen and (min-width: 1024px) {
  section.about {
    padding: 0 var(--med-margin);
  }

  section.team {
    padding: 0 var(--med-margin);
  }

  section.team .teamList{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1366px) {
  section.about {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--med-margin);
    padding: var(--big-margin) var(--med-margin) 148px;
  }

  section.about > figure {
    position: sticky;
    top: var(--big-margin);
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
  }

  section.about > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  section.about article {
    padding-top: 0;
  }
}