ihk24/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss

//@import "../../variables/wood";
//@import "../../variables/color-set";
//@import "../../variables/variables";

//@import "../components/mixins";
@import "../styles/mixins";


.magazine-article {
  .row {
    justify-content: center;
  }
  .richtext .detail-text {
    overflow-x: visible;
  }

  article.col {
    position: relative;
    z-index: 1;
    max-width: 66.6667%;
    background-color: var(--theme-color-white);

    @media(max-width: 1199px) {
      max-width: 83.3333%;
    }
    @media(max-width: 999px) {
      box-shadow: 0 0 0 10px white;
    }
    @media(max-width: 767px) {
      max-width: 100%;
      box-shadow: 0 -4px 0 2px white;
    }
  }

  blockquote {
    border-left: 0;
    font-weight: 300;
    font-size: 48px;
    font-style: normal;
    margin: 1em 0 1.3em;
    padding: 0 40px;

    @media(max-width: 1199px) {
      font-size: 36px;
    }
    @media(max-width: 767px) {
      font-size: 28px;
      padding: 0 0 0 20px;
    }

    p:not(.author):not(.author-subline), div.text:not(.author):not(.author-subline) {
      line-height: 1.3;

      &:first-child:before {
        content: "";
        position: relative;
        display: block;
        width: 30px;
        height: 30px;
        background-image: url(../../assets/img/quote.svg);
        background-size: 100%;
        margin: 2px 0 2px -40px;

        @media(max-width: 767px) {
          margin-left: -20px;
        }
      }
    }

    p:not(.author):not(.author-subline):last-child:after, div.text:not(.author):not(.author-subline):last-child:after, .author:after, h4:after, .like-h4:after {
      content: "";
      position: relative;
      display: block;
      width: 30px;
      height: 30px;
      background-image: url(../../assets/img/quote.svg);
      background-size: 100%;
      margin: 2px 0 2px -40px;
      transform: rotate(180deg);

      @media(max-width: 767px) {
        margin-left: -20px;
      }
    }

    .author, h4, .like-h4 {
      position: relative;
      font-weight: 400;
      text-align: right;
      margin-right: -40px;
      margin-top: 36px;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 18px;

      &:before {
        content: "— ";
        position: relative;
        top: -1px;
        margin-right: 2px;
      }

      &:after {
        position: absolute;
        top: -36px;
        left: 0;
      }

      @media(max-width: 767px) {
        margin-right: 0;
        padding-left: 30px;
        font-size: 16px;
        font-weight: 500;
        margin-top: 32px;

        &:after {
          top: -30px;
        }
      }
    }
  }
}