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

@import './mixins';

.page-wrapper {
  display: block;
  width: 100%;
  border-top: var(--header-height) solid white;
}

@media(min-width: 1200px) {
  .page-wrapper {
    border-top-width: 160px;
  }
  .magazine-start, .magazine-article {
    .page-wrapper {
      border-top: var(--header-height) solid white;
    }
  }
}

.container {
  width: var(--container-width);
  padding: 0 var(--container-padding);
  max-width: 100%;
  margin: 0 auto;

  &.medium {
    --container-width: 1100px;
  }

  &.small {
    --container-width: 1000px;

    @media(min-width: 1000px) {
      max-width: 90%;
    }
  }
}

section {
  margin: var(--section-margin) 0;
}

.feature, .topics {
  +.feature, + .topics {
    margin-top: calc(var(--section-margin) * -1);
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--col-padding) * -1);

  &:before, &:after {
    display: none;
  }
}

.has-sidebar .row {
  align-items: flex-start;
}

.col, .main-col, .sidebar {
  padding: var(--col-padding);
  flex: 1 1 100%;
  max-width: 100%;

  .container, .container-fluid {
    padding: 0;
  }
}

.sidebar > * {
  margin-top: 0 !important;
}

.main-col, .col.magazine-article, .magazine-article artcile.col {
  --section-margin: calc(1.5% + 2em);

  @media (min-width: 1000px) {
    --content-box-padding: 42px;
  }
}

@media (max-width: 999px) {
  .main-col > *:last-child {
    margin-bottom: var(--section-margin);
  }

  .sidebar {
    margin-top: calc(var(--col-padding) * -2);
  }
}

@media (min-width: 1000px) {
  .main-col {
    flex: 1 1 66.66667%;
    max-width: 66.66667%;

    > *:last-child {
      margin-bottom: var(--section-margin);
    }
  }

  .sidebar {
    --content-box-padding: 20px;
    flex: 1 1 33.33333%;
    max-width: 33.33333%;
    align-self: flex-start;
    font-size: var(--font-size-small);
    padding-left: 40px;
    margin-bottom: 18px;

    &.sticky {
      position: sticky;
      top: 100px;
    }
  }

  // set to full width if special page with embedded iFrame
  .col.embeddedFrame, .main-col.embeddedFrame, .sidebar.embeddedFrame {
    flex: 1 1 100%;
    max-width: 100%;
    padding: var(--col-padding);
  }

  .main-col.embeddedFrame  .print-share {
    display: none;
  }

}