.teens {
  .title-inner {
    background-image: url(../images/teens/title-bg.jpg);
  }
}

.content-body {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  margin-bottom: max(8cqi, 50px);
}

.teens-define {
  img {
    width: min(100%, 940px);
    margin-inline: auto;
    display: block;
  }
}

.movie {
  figure {
    width: min(100%, 962px);
    margin-inline: auto;
    aspect-ratio: 16/9;
    iframe {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  figcaption {
    text-align: end;
    @media (width < 768px) {
      font-size: 0.9em;
    }
  }
}
.path {
  .lead ~ * {
    margin-top: 35px;
  }
  .cards {
    display: grid;
    grid-auto-flow: row;
    row-gap: 18px;
    grid-template-columns: max-content 1fr;
    @media (width < 768px) {
      grid-template-columns: auto;
    }
    li {
      background-color: #e6ebe0;
      border-radius: 10px;
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
      @media (width < 768px) {
        grid-column: span 1;
      }
      > * {
        padding: 27px 42px;
        @media (width < 768px) {
          padding: 1.6em 1em;
        }
      }
      > p {
        position: relative;
        &::before {
          inset: 25px auto 25px 0;
          position: absolute;
          content: "";
          width: 1px;
          background-color: currentColor;
          @media (width < 768px) {
            inset: 0 1em auto;
            height: 1px;
            width: auto;
          }
        }
      }
    }
    h3 {
      font-size: var(--fz-middle);
      font-weight: 600;
      line-height: 1.6;
      place-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4em;
      span {
        background-color: var(--color-secondary);
        border-radius: 6px;
        padding: 0 0.7em 0.1em;
        line-height: 1.8;
        color: #fff;
        text-autospace: normal;
      }
    }
  }
}

.contact {
  .content-body {
    margin-bottom: 30px;
  }
  iframe {
    width: min(100%, 640px);
    display: block;
    margin-inline: auto;
    height: 2000px;

    @media (width < 768px) {
          height: 2400px;

      width: 100vw;
      margin-inline: calc((100% - 100vw) / 2);
    }
  }
}