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

.Illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: auto;
  flex-direction: column;
  &__hidden {
    display: none;
  }
  &__container {
    height: fit-content;
    overflow: hidden;
    padding-bottom: 7 * $space-unit;
    &__content {
      text-align: center;
      .qlAnchor {
        color: $primary-color;
        text-decoration: none;
        margin: 0 $space-xxxs;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    &__img {
      text-align: center;
      & > img, & > svg {
        margin: 0 auto;
        display: block;
      }
      &__small {
        padding: $space-xs;
        & > img, & > svg {
          width: 3rem;
          height: auto;
        }
      }
      &__medium {
        padding: $space-sm;
        & > img, & > svg {
          width: 7.5rem;
          height: auto;
        }
      }
      &__large {
        padding: $space-sm;
        & > img, & > svg {
          width: 14.5rem;
          height: auto;
        }
      }
      &__xLarge {
        padding: $space-unit;
        & > img, & > svg {
          width: 19.5rem;
          height: auto;
        }
      }
    }
  }
}
