@use 'src/styles/abstracts' as *;

.IllustrationBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: auto;
  flex-direction: column;

  &__container {
    height: fit-content;
    overflow: hidden;
    padding-bottom: 6 * $space-unit;
  }
  &__title {
    font-size: $text-xl;
    text-align: center;
    .qlAnchor {
      color: $primary-color;
      text-decoration: none;
      margin: 0 $space-xxxs;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  &__hidden {
    display: none;
  }
  &__content {
    font-size: $text-xl;
    text-align: center;
  }
  &__small {
    &__title {
      font-weight: $font-500;
      font-size: $text-md;
    }
    &__content {
      font-weight: $font-500;
      font-size: $text-md;
    }
    &__img {
      padding: $space-xs;
      img {
        width: toRem(50px);
        height: toRem(57px);
        margin: 0 auto;
        display: block;
      }
    }
  }
  &__medium {
    &__title {
      font-weight: $font-500;
      font-size: $text-md;
    }
    &__content {
      font-weight: $font-500;
      font-size: $text-md;
    }
    &__img {
      padding: $space-sm;
      img {
        width: toRem(120px);
        margin: 0 auto;
        display: block;
      }
    }
  }
  &__large {
    &__title {
      font-weight: $font-500;
      font-size: $text-lg;
    }
    &__content {
      font-weight: $font-500;
      font-size: $text-lg;
    }
    &__img {
      padding: $space-sm;
      img {
        width: 14.5rem;
        margin: 0 auto;
        display: block;
      }
    }
  }
  &__xLarge {
    &__title {
      font-weight: $font-500;
      margin-bottom: 1rem;
    }
    &__img {
      padding: $space-unit;
      img {
        width: 19.5rem;
        margin: 0 auto;
        display: block;
      }
    }
  }
}
