h1 {
  text-align: center;
}
.content > .buttons {
  width: calc(50% - 5px);
  display: inline-block;
}
.presentation {
  min-height: 100px;
}
.mail {
  margin-top: 25px;
}
.contact {
  margin: 10px;
}
.membership, .courses {
  width: 100%;
  position: relative;
  display: flex;
}
.membership > div, .courses > a {
  margin: 0 auto;
  background: #fafafa;
  border-radius: 7px;
  border: 2px solid #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
}
.membership > div {
  width: 30%;
}
.membership .category, .courses .title {
  padding: 7px;
  border-bottom: 2px solid #d1d1d1;
}
.membership .category-content, .courses .data {
  font-size: 1em;
  padding: 15px;
  text-align: left;
  max-width: 75%;
  flex: 1;
}
.membership .button {
  width: fit-content;
  margin: 5px auto;
}

.indexes {
  display: flex;
  text-align: center;
  flex-basis: fit-content;
  margin: 6px auto 0;
  width: fit-content;
  border: 1px solid #aaa;
  border-radius: 5px;
}
.indexes > * {
  padding: 2px 6px;
  color: #000;
}
.indexes > *:not(:first-child) {
  border-left: 1px solid #aaa;
}
.indexes > a:hover:not(.current) {
  background: #c2daff;
  cursor: pointer;
}
.indexes > .current {
  pointer-events: none;
  background: #c8c8c8;
}

#thumbnail {
  position: relative;
}
#thumbnail .video {
  cursor: pointer;
  max-width: 100%;
  max-height: min(50vh, 720px);
}
#thumbnail .play {
  position: absolute;
  top: 37.5%; /* 50% - 25% / 2 */
  left: 37.5%;
  z-index: 1;
  cursor: pointer;
}
#thumbnail .video:hover + .play path {
  fill: #fff;
}

@media (max-width: 850px) {
  .membership {
    flex-direction: column;
  }
  .membership > :not(last-child) {
    /* Could be replaced by `gap: 20px` in `.footer` but old web browsers don't support it... */
    margin-bottom: 20px;
  }

  .membership > div {
    width: 100%;
  }
}