ihk24/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss

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

.election-detail {
  margin: 0 0 80px 0;
  &--text {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--theme-color-primary-dimmed-04);
    padding: 0 0 30px 0;
    @media (max-width: 1100px) {
      display: block;
    }

    img {
      display: block;
      width: 545px;
      margin: 0 40px 0 0;
      @media (max-width: 1100px) {
        width: 100%;
      }
    }

    .election-detail--image-container {
      position: relative;
      margin: 0 40px 0 0;
      img {
        margin: 0;
      }
      .copyright {
        bottom: 0;
        color: var(--theme-color-white);
        display: block;
        font-size: 12px;
        left: 100%;
        line-height: 1.2;
        padding: 8px;
        position: absolute;
        text-shadow: 0 0 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.6);
        transform: rotate(-90deg);
        transform-origin: 0 100%;
        width: 66%;
        z-index: 2;
      }
    }

    .text-box {
      flex: 1;
      padding-right: 1.5rem;
      @media (max-width: 1100px) {
        padding-left: 15px;
        padding-right: 15px;
      }
    }

    h1 {
      margin: 1.5rem 0;
    }

    h2 {
      margin: 0 0 0.75rem 0;
      font-size: 36px;
      line-height: 42px;
    }

    p {
      margin: 0 0 1.5rem 0;

      &.subheadline {
        margin: -1rem 0 1.5rem 0;
        font-weight: 600;
      }
    }

    .social-media {
      p {
        font-size: 1rem;
        text-transform: uppercase;
        margin: 0 0 0.5rem 0;
      }

      .social-icons {
        a {
          &:before {
            color: var(--theme-color-primary);
          }

          &:hover:before {
            color: var(--theme-color-secondary);
          }
        }
      }
    }
  }

  &--video {
    padding: 30px 0;
    background: var(--theme-color-primary-dimmed-02);
    @media (max-width: 1100px) {
      background: none;
    }

    .video-container {
      margin: 0 auto;
      max-width: 976px;
      @media (max-width: 1100px) {
        width: 100%;
        max-width: none;
      }
      .video {
        margin: 0;
      }
    }
  }

  &--info {
    display: flex;
    justify-content: space-between;
    background: var(--theme-color-primary);
    color: var(--theme-color-white);
    @media (max-width: 1023px) {
      display: block;
      background: none;
    }

    .info-box {
      flex: 1;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      @media (max-width: 1023px) {
        background: var(--theme-color-primary);
        margin: 0 0 5px 0;
      }
    }
    .info-headline {
      @include kicker;
    }
    .info-box--content {
      p {
        font-size: 18px;
        line-height: 27px;
        margin: 0 0 5px 0;
        &.headline {
          font-weight: 600;
          margin: 0;
        }
      }
      .address {
        .text {
          margin: inherit;
          font-size: 18px;
        }
      }
    }
    .info-box--text {
      cursor: pointer;
      color: var(--theme-color-white);
      &:hover {
        color: var(--theme-color-secondary);
      }
      font-size: 36px;
      line-height: 44px;
      margin: 0;
      font-family: 'Korb', sans-serif;
      @media (max-width: 767px) {
        font-size: 24px;
        line-height: 29px;
      }
    }
  }

  &--back {
    background: var(--theme-color-primary-dimmed-04);
    display: flex;
    justify-content: center;
    padding: 30px 15px;
    margin: 20px 0 0 0;
  }

  &--more {
    margin: 60px 0 0 0 !important;
    max-width: none !important;
  }
}