@import url('../../../components/heros/hero-with-media.css');
.hero-with-media {
  .hero-with-media-content {
    h1 {
      width: calc(var(--column) * 10 + var(--gap) * 9);
    }
  }
  @media (max-width: 580px) {
    .hero-with-media-media {
      aspect-ratio: 390 / 240;
      object-fit: cover;
    }
  }
}
#intro {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin: 64rem var(--margin);
  margin-top: 100rem;
  padding-bottom: 64rem;
  position: relative;
  hr {
    width: 100%;
    height: 1px;
    background: currentColor;
    border: none;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    margin-bottom: 16rem;
    opacity: 0.3;
    transform-origin: 0% 50%;
    transition: transform 2s var(--in-out);
    &:not(.show) {
      transform: scaleX(0.01);
    }
  }
  h2 {
    width: calc(var(--column) * 4 + var(--gap) * 3);
  }
  .right {
    width: calc(var(--column) * 8 + var(--gap) * 7);
    .description, .paper-button {
      max-width: 760rem;
    }
    .description {
      margin: 0;
      p {
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
  .paper-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-top: 32rem;
    padding: 14rem 24rem;
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      background: currentColor;
      opacity: 0.05;
      border-radius: var(--radius);
      transform: translate(-50%, -50%);
      transition: width 1s var(--curve), height 1s var(--curve);
    }
    .paper-button-left {
      display: flex;
      align-items: center;
      svg {
        width: auto;
        height: 1em;
        flex-shrink: 0;
        fill: currentColor;
        margin-right: 24rem;
      }
    }
    & > svg {
      width: auto;
      height: 0.7em;
      flex-shrink: 0;
      fill: currentColor;
      transition: transform 1s var(--curve);
    }
    &:hover {
      &::before {
        width: calc(100% + 10rem);
        height: calc(100% + 10rem);
      }
      & > svg {
        transform: rotate(45deg);
      }
    }
  }
  @media (max-width: 740px) {
    flex-direction: column;
    gap: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    h2 {
      width: 100%;
      margin-bottom: 24px;
    }
    .right {
      width: 100%;
    }
    .paper-button {
      line-height: 1;
    }
  }
}
#quiz {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin: 0 var(--margin);
  position: relative;
  hr {
    width: 100%;
    height: 1px;
    background: currentColor;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    margin-bottom: 16rem;
    opacity: 0.3;
    transform-origin: 0% 50%;
    transition: transform 2s var(--in-out);
    &:not(.show) {
      transform: scaleX(0.01);
    }
  }
  h3 {
    width: calc(var(--column) * 4 + var(--gap) * 3);
  }
  .right {
    width: calc(var(--column) * 8 + var(--gap) * 7);
  }
  .quiz-question {
    width: calc(var(--column) * 7 + var(--gap) * 6);
    display: flex;
    align-items: flex-start;
    padding-bottom: 60rem;
    position: relative;
    hr {
      bottom: 0;
      top: auto;
    }
    .quiz-question-number {
      width: 32rem;
      opacity: 0.5;
      margin-right: 18rem;
    }
    .quiz-question-right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    strong {
      font-weight: 900;
      margin-bottom: 40rem;
    }
    .option {
      display: inline-flex;
      align-items: flex-start;
      position: relative;
      input {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        z-index: 1;
        cursor: pointer;
        margin: 0;
      }
      .option-icon {
        width: 18rem;
        height: 18rem;
        flex-shrink: 0;
        border: 1px solid currentColor;
        border-radius: 5rem;
        position: relative;
        top: 0.3em;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rem;
        will-change: transform;
        transition: transform 1s var(--curve), background 1s var(--curve);
        svg {
          width: 70%;
          height: auto;
          fill: var(--white);
          transition: transform 1s var(--curve);
          transform: scale(0);
        }
      }
      &:not(:last-child) {
        margin-bottom: 32rem;
      }
      input:checked + .option-icon {
        background: currentColor;
        svg {
          transform: scale(1);
        }
      }
      &:hover {
        .option-icon {
          transform: scale(1.1);
        }
      }
    }
    &:not(:last-child) {
      margin-bottom: 60rem;
    }
  }
  @media (max-width: 740px) {
    flex-direction: column;
    gap: 0;
    margin-top: 60px;
    margin-bottom: 60px;
    h3 {
      width: 100%;
      margin-bottom: 60px;
    }
    .right {
      width: 100%;
    }
    .quiz-question {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
    }
  }
  @media (max-width: 580px) {
    h3 {
      font-size: 24px;
    }
    .quiz-question {
      .quiz-question-number, strong {
        font-size: 20px;
      }
      .quiz-question-number {
        width: auto;
        display: block;
        margin-right: 0;
        margin-bottom: 16px;
      }
      strong {
        margin-bottom: 40px;
      }
      .option {
        .option-icon {
          top: 0.2em;
        }
        &:not(:last-child) {
          margin-bottom: 32px;
        }
      }
    }
  }
}
#fail-modal, #success-modal {
  .modal-header {
    p {
      a {
        text-decoration: underline;
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
  .modal-footer {
    a {
      text-decoration: underline;
      &:hover {
        text-decoration: none;
      }
    }
  }
}