ihk24/storybook/stories/sections/social/social.scss

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

section.social {
  @media(max-width: 767px) {
    .container {
      padding: 0;
    }
  }

  h2 {
    margin-bottom: 0.4em;
  }

  .text-box > *:first-child {
    margin-top: var(--section-headline-margin);
  }

  .social-wrapper {
    position: relative;
    background-color: var(--theme-color-primary-dimmed-04);
    padding: var(--content-box-padding);
    display: flex;
    border-bottom: var(--border-width) solid var(--theme-color-secondary);

    @media(max-width: 999px) {
      flex-direction: column;
    }

    @media(max-width: 567px) {
      padding: calc(var(--content-box-padding) * 1.5) var(--content-box-padding);
    }

    @media(min-width: 1000px) {
      > div {
        flex: 1 1 50%;
        max-width: 50%;
      }
    }
  }

  .social-profiles p {
    margin-bottom: 0.5em;
  }

  .social-box {
    position: relative;
    height: 500px;
    display: block;
    line-height: 0 !important;

    &::before {
      content: '';
      @include full-size;
      border-radius: var(--border-radius-md);
      background-color: rgba(#fff, 0.5);
      background-image: url('../../assets/img/preload.svg');
      background-repeat: no-repeat;
      background-size: 80px;
      background-position: center;
    }

    @media(max-width: 767px) {
      height: 350px;
    }

    iframe {
      position: relative;
      min-height: 100%;
    }

    .fb_iframe_widget {
      float: right;

      @media(max-width: 999px) {
        float: none;
        display: inline-block;
        transform: translateX(-50%);
        left: 50%;
      }
    }
  }

  .social-profiles {
    position: absolute;
    bottom: var(--content-box-padding);
    left: var(--content-box-padding);

    @media(max-width: 567px) {
      bottom: calc(var(--content-box-padding) * 1.5);
    }
  }

  @media(min-width: 1000px) {
    .social-profiles  ~ .text-box {
      padding-bottom: 120px;
    }

    .text-box {
      padding-right: 40px;
    }
  }

  @media(max-width: 999px) {
    .social-profiles {
      position: absolute;

      ~ .social-box {
        margin-bottom: 110px;
      }
    }

    .text-box {
      margin-bottom: 10px;
    }
  }
}