/*
 * Section
 * has callout and group
 */

.related-posts-section {
  & {
    display: flex;
    margin-left: -16px;
    margin-right: -16px;
  }

  & > .callout,
  & > .group {
    margin: 0 16px;
  }

  & > .callout {
    flex: 1 1 33%;
  }

  & > .group {
    flex: 1 1 50%;
  }

  & > .callout {
    display: flex;

    & > * {
      flex: 1 0 100%;
    }
  }

  // Mobile
  @media (max-width: 480px) {
    & {
      flex-wrap: wrap;
    }

    & > .callout,
    & > .group {
      margin-top: 16px;
      margin-bottom: 16px;
      flex: 1 1 100%;
    }
  }

  // Tablet
  @media (min-width: 481px) {
    @media (max-width: 768px) {
      & {
        flex-wrap: wrap;
      }

      & > .callout,
      & > .group {
        margin-top: 16px;
        margin-bottom: 16px;
        flex: 1 1 100%;
      }

      & > .group {
        flex: 1 1 40%;
      }
    }
  }
}