/* =====================================
   Column content image layouts
   ===================================== */

.column-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* base block */
.column-content .col-img {
  margin: 1.25rem 0;
}

/* full width */
.column-content .col-img--full img {
  width: 100%;
}

/* PC: left / right thumbnail */
@media (min-width: 768px) {
  .column-content .col-img--left,
  .column-content .col-img--right {
    width: min(280px, 40%);
  }

  .column-content .col-img--left {
    float: left;
    margin: 0.25rem 1.25rem 1rem 0;
  }

  .column-content .col-img--right {
    float: right;
    margin: 0.25rem 0 1rem 1.25rem;
  }

  .column-content .col-img--min {
    width: min(200px, 24%);
  }
}

/* SP: always 100% */
@media (max-width: 767.98px) {
  .column-content .col-img--left,
  .column-content .col-img--right {
    float: none;
    width: 100%;
    margin: 1.25rem 0;
  }
}

/* caption (optional) */
.column-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.75;
}

.column-content .col-clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.column-content h2,
.column-content h3 {
  clear: both;
}