ihk24/gfi-ihk-2024/stories/components/image-text/image-text.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.image-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--section-margin);
  padding: 45px 0;
  position: relative;
  z-index: 1;
  @media(max-width: 767px) {
    display: block;
  }
  h3{
    font-size: 28px;
    line-height: 120%; /* 50.4px */
    @media(min-width: 768px) {
       font-size: 36px;
    }
    @media(min-width: 1110px) {
      font-size: 42px;
   }
   + p {
      font-size: 18px;
      @media(min-width: 768px) {
       font-size: 22px;
    }
   }
  }

  &.colored {
    &:before {
      content: '';
      background: var(--theme-grey-light);
      position: absolute;
      left: 50%;
      top: 0;
      width: 100vw;
      height: 100%;
      margin: 0 -50vw;
      z-index: -1;
    }
  }

  &.switched {
    .image-text--image {
      order: 2;
    }

    .image-text--text {
      order: 1;
    }
  }

  @media(max-width: 767px) {
    display: block;
  }

  &--text,
  &--image {
    width: calc(50% - 30px);
    @media(max-width: 767px) {
      width: auto;
      margin-bottom: 32px;
    }
  }

  &--image {
    position: relative;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      height: 8px;
      background-color: var(--theme-color-secondary);
      transition: 0.3s ease;
      z-index: 1;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }
  }

  h2 {
    margin-top: 0;
    font-size: 64px;
    line-height: 70px;
    @media(max-width: 399px) {
      font-size: 32px;
      line-height: 35px;
      margin-bottom: 0.3em;
    }
  }

  a {
    margin-top: 11px;
  }

  img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }

  ul, ol {
    margin: 1em 0 0 0;
    padding: 0;

    li {
      position: relative;
      display: block;
      padding-left: 32px;
      margin-bottom: 0.6em;

      @media(max-width: 767px) {
        padding-left: 24px;
      }

      &:after {
        content: "";
        position: absolute;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 3px;
        background-color: var(--theme-color-secondary);
        top: 9px;

        @media(max-width: 767px) {
          top: 10px;
          width: 6px;
          height: 6px;
        }
      }
    }

    h3 {
      margin: 0;
      font-size: var(--font-size-copy);
      font-weight: 600;
    }
  }
}