.athlete-landing-block {
  &:not(:last-child) {
    margin-bottom: var(--sp-16);
  }
}

@media screen and (min-width: 768px) {
  .athlete-landing-block {
    &:not(:last-child) {
      margin-bottom: var(--sp-20);
    }
  }
}

/* Testimonial */
.athlete-testimonial {
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.athlete-testimonial-content {
  width: 90%;
  margin-inline: auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-14);
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  background-color: #E0F275;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;

  svg {
    width: var(--sp-12);
    height: var(--sp-12);
  }

  h3 {
    max-width: 800px;
    line-height: 1.2;
  }

  p {
    font-size: var(--text-h5);
  }
}

@media screen and (min-width: 768px) {
  .athlete-testimonial-content {
    padding: var(--sp-14) var(--sp-5) var(--sp-20);
    gap: var(--sp-7d5);

    svg {
      width: var(--sp-16);
      height: var(--sp-16);
    }
  }
}

/* Bio */
.athlete-bio {
  padding-block: var(--sp-10);
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.athlete-bio-grid {
  width: 90%;
  margin-inline: auto;
  gap: var(--sp-6);
}

.athlete-bio-socials {
  max-width: 390px;
  display: flex;
  border: 2px solid currentColor;

  a {
    padding: var(--sp-4);
    flex-grow: 1;
    display: flex;
    justify-content: center;

    & + a {
      border-left: 2px solid currentColor;
    }

    &:hover {
      background-color: #E0F275;
    }
  }
}

.athlete-bio-content {
  font-weight: var(--font-medium);
  font-size: 1.125rem;
  line-height: 1.2;

  p {
    & + p {
      margin-top: 1em;
    }
  }
}

@media screen and (min-width: 768px) {
  .athlete-bio {
    padding-block: var(--sp-16);
  }
}

@media screen and (min-width: 1024px) {
  .athlete-bio-grid {
    grid-template: "title content" "socials content";
    grid-template-columns: 42% 52%;
    grid-template-rows: 1fr auto;
    column-gap: var(--sp-10);
  }

  .athlete-bio-title {
    grid-area: title;
    max-width: 390px;
  }

  .athlete-bio-content {
    grid-area: content;
  }

  .athlete-bio-socials {
    grid-area: socials;
  }
}

@media screen and (min-width: 1280px) {
  .athlete-bio-title {
    font-size: var(--text-h0);
  }

  .athlete-bio-content {
    font-size: 1.375rem;
  }

  .athlete-bio-socials {
    a {
      padding: var(--sp-6);
    }
  }
}

/* Video */
.athlete-video {
  padding: var(--sp-3);
  margin-inline: auto;
  border: 2px solid currentColor;

  video-media {
    .play-button {
      background: #E0F275 !important;
      height: var(--sp-12);
      width: var(--sp-12);

      .icon {
        width: var(--sp-4);
        height: var(--sp-4);
      }
    }

    &:not([playing]) {
      .play-button {
        inset-inline-end: 50%;
        inset-block-start: 50%;
        transform: translate(50%, -50%);
      }
    }

    &[host="youtube"][loaded] {
      button.deferred-poster {
        display: none;
      }
    }
  }
}

@media screen and (min-width: 640px) {
  .athlete-video {
    padding: var(--sp-5);
  }
}

@media screen and (min-width: 1024px) {
  .athlete-video {
    width: 90%;
    padding: var(--sp-7d5);

    video-media {
      &:not([playing]) {
        .play-button {
          width: 150px;
          height: 150px;

          .icon {
            width: var(--sp-13);
            height: var(--sp-13);
          }
        }
      }
    }
  }
}

/* Media */
.athlete-gallery {
  .item {
    min-height: 100%;
    margin-inline-end: var(--sp-3);
    width: 68%;

    img {
      display: block;
      height: 100%;
      width: 100%;
      aspect-ratio: 480 / 270;
      border: 2px solid currentColor;
      object-fit: cover;
    }
  }

  .indicators {
    margin-block-start: var(--sp-8);
  }
}

@media screen and (min-width: 768px) {
  .athlete-gallery {
    .item {
      margin-inline-end: var(--sp-5);
      width: calc(var(--page-container) / 2.4);
    }

    .indicators {
      margin-block-start: var(--sp-8);
    }
  }
}


@media screen and (min-width: 1280px) {
  .athlete-gallery {
    .item {
      width: calc(var(--page-container) / 3.4);
    }
  }
}