/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
.cj-block-post-grid {
  margin: 0 0 1.2em 0;
  position: relative; }
  .cj-block-post-grid .is-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0 2em; }
    @media all and (-ms-high-contrast: none) {
      .cj-block-post-grid .is-grid {
        display: block; } }
    .cj-block-post-grid .is-grid article {
      margin-bottom: 2.5em;
      min-width: 0;
      padding: 0; }
      @media all and (-ms-high-contrast: none) {
        .cj-block-post-grid .is-grid article {
          padding-left: 10px;
          padding-right: 10px;
          display: inline-block;
          vertical-align: top; } }
    .cj-block-post-grid .is-grid.columns-1 {
      grid-template-columns: 1fr; }
      @media all and (-ms-high-contrast: none) {
        .cj-block-post-grid .is-grid.columns-1 article {
          width: 100%; } }
    .cj-block-post-grid .is-grid.columns-2 {
      grid-template-columns: 1fr 1fr; }
      @media all and (-ms-high-contrast: none) {
        .cj-block-post-grid .is-grid.columns-2 article {
          width: 48%; } }
    .cj-block-post-grid .is-grid.columns-3 {
      grid-template-columns: 1fr 1fr 1fr; }
      @media all and (-ms-high-contrast: none) {
        .cj-block-post-grid .is-grid.columns-3 article {
          width: 32%; } }
  @media only screen and (max-width: 600px) {
    .cj-block-post-grid div[class*="columns"].is-grid {
      grid-template-columns: 1fr; } }
  .cj-block-post-grid .cj-block-post-grid-text {
    text-align: left; }
  .cj-block-post-grid a {
    text-decoration: none; }
  .cj-block-post-grid .cj-block-post-grid-image {
    margin-bottom: 1.2em; }
    .cj-block-post-grid .cj-block-post-grid-image img {
      display: block;
      width: 100%; }
  .cj-block-post-grid header .cj-block-post-grid-title {
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2; }
    .cj-block-post-grid header .cj-block-post-grid-title a {
      color: #292929;
      text-decoration: none; }
      .cj-block-post-grid header .cj-block-post-grid-title a:hover {
        text-decoration: underline;
        color: inherit; }
  .cj-block-post-grid .cj-block-post-grid-author,
  .cj-block-post-grid .cj-block-post-grid-date {
    display: inline-block; }
    .cj-block-post-grid .cj-block-post-grid-author:not(:last-child):after,
    .cj-block-post-grid .cj-block-post-grid-date:not(:last-child):after {
      content: "";
      vertical-align: middle;
      margin: 0 5px;
      line-height: 1; }
  .cj-block-post-grid .cj-block-post-grid-author a {
    color: inherit;
    text-decoration: none; }
    .cj-block-post-grid .cj-block-post-grid-author a:hover {
      color: inherit;
      text-decoration: underline; }
  .cj-block-post-grid .cj-block-post-grid-more-link {
    display: inline-block;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    font-weight: bold;
    color: #292929;
    text-decoration: none; }
    .cj-block-post-grid .cj-block-post-grid-more-link:hover {
      text-decoration: underline; }
  .cj-block-post-grid .cj-block-post-grid-excerpt > p:last-child {
    margin-top: 15px;
    margin-bottom: 0; }
  .cj-block-post-grid .is-list article {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0 2em;
    padding: 0; }
    @media all and (-ms-high-contrast: none) {
      .cj-block-post-grid .is-list article {
        display: block; } }
    .cj-block-post-grid .is-list article:before {
      display: none; }
    .cj-block-post-grid .is-list article:not(:last-child) {
      margin-bottom: 5%;
      padding-bottom: 5%; }
    .cj-block-post-grid .is-list article:not(.has-post-thumbnail) {
      grid-template-columns: 1fr; }
    @media only screen and (min-width: 600px) {
      .cj-block-post-grid .is-list article:not(:last-child) {
        border-bottom: solid 1px #eee; } }
    @media only screen and (max-width: 600px) {
      .cj-block-post-grid .is-list article {
        grid-template-columns: 1fr; } }
  .cj-block-post-grid .is-list .cj-block-post-grid-image {
    margin-bottom: 0; }
    @media all and (-ms-high-contrast: none) {
      .cj-block-post-grid .is-list .cj-block-post-grid-image {
        width: 30%;
        display: inline-block;
        vertical-align: top; } }
    @media only screen and (max-width: 600px) {
      .cj-block-post-grid .is-list .cj-block-post-grid-image {
        margin-bottom: 5%; } }
  @media all and (-ms-high-contrast: none) {
    .cj-block-post-grid .is-list .cj-block-post-grid-text {
      width: 65%;
      padding-left: 5%;
      display: inline-block;
      vertical-align: top; }
    .cj-block-post-grid .is-list .post:not(.has-post-thumbnail) .cj-block-post-grid-text {
      width: 100%;
      padding-left: 0; } }
  .cj-block-post-grid .is-list .no-thumb .cj-block-post-grid-text {
    grid-column: span 2; }

.cj-block-post-grid-image {
  position: relative; }
  .cj-block-post-grid-image:hover .cj-post-grid-no-image-placeholder {
    opacity: 1;
    z-index: 1; }

.cj-post-grid-no-image-placeholder {
  padding: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #f3f3f4;
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease; }
  .cj-post-grid-no-image-placeholder svg {
    margin-bottom: 10px; }

.cj-post-grid-no-image-icon {
  position: absolute;
  top: 10px;
  background: #ffe606;
  right: 10px;
  padding: 6px;
  line-height: 1;
  height: 32px;
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  border-radius: 5px;
  z-index: 1; }
