/*----------------------------------------------*\
    BLOCK - Image
	==============

	@package yaybrigade

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package ccr

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Breakpoints */
/* 368px, bigger phones */
/* 560px */
/* 800px */
/* 1008px, tablet vertical */
/* 1200px */
/* Max Widths */
/* 1040px */
/* 672px */
/* Fonts */
/*
 *
 * / Mixins
------------------------------------------------*/
/* line 11, ../../src/blocks/image.scss */
.image {
  margin-bottom: 1.5em;
  /* multiple images */
  /* widths */
  /* image align  */ }
  @media screen and (min-width: 35rem) {
    /* line 11, ../../src/blocks/image.scss */
    .image {
      margin-bottom: 2em; } }
  /* line 21, ../../src/blocks/image.scss */
  .image--multiple .image__figure:not(:last-child) {
    margin-bottom: 2em; }
  @media screen and (min-width: 35rem) {
    /* line 27, ../../src/blocks/image.scss */
    .image--multiple .image__wrapper {
      display: -ms-flexbox;
      display: flex;
      margin: 0 -.5em; }
    /* line 31, ../../src/blocks/image.scss */
    .image--multiple .image__figure {
      margin: 0 .5em !important;
      /* overwrite :not(:last-child) above */
      -ms-flex: 1 1 0px;
          flex: 1 1 0; } }
  @media screen and (min-width: 23rem) {
    /* line 42, ../../src/blocks/image.scss */
    .image--width-one-quarter .image__image,
    .image--width-one-quarter .image__caption {
      width: 50%; }
    /* line 47, ../../src/blocks/image.scss */
    .image--width-one-quarter .caption-location-beside .image__caption {
      width: 50%; } }
  @media screen and (min-width: 35rem) {
    /* line 54, ../../src/blocks/image.scss */
    .image--width-one-quarter .image__image,
    .image--width-one-quarter .image__caption {
      width: 25%; }
    /* line 59, ../../src/blocks/image.scss */
    .image--width-one-quarter .caption-location-beside .image__caption {
      width: 75%; } }
  @media screen and (min-width: 23rem) {
    /* line 70, ../../src/blocks/image.scss */
    .image--width-half .image__image,
    .image--width-half .image__caption {
      width: 66.6666%; }
    /* line 75, ../../src/blocks/image.scss */
    .image--width-half .caption-location-beside .image__caption {
      width: 33.3333%; } }
  @media screen and (min-width: 35rem) {
    /* line 82, ../../src/blocks/image.scss */
    .image--width-half .image__image,
    .image--width-half .image__caption {
      width: 50%; }
    /* line 87, ../../src/blocks/image.scss */
    .image--width-half .caption-location-beside .image__caption {
      width: 50%; } }
  @media screen and (min-width: 35rem) {
    /* line 98, ../../src/blocks/image.scss */
    .image--width-two-thirds .image__image,
    .image--width-two-thirds .image__caption {
      width: 50%; }
    /* line 103, ../../src/blocks/image.scss */
    .image--width-two-thirds .caption-location-beside .image__caption {
      width: 50%; } }
  @media screen and (min-width: 42rem) {
    /* line 94, ../../src/blocks/image.scss */
    .image--width-two-thirds {
      /* this works better slightly earlier */ }
      /* line 110, ../../src/blocks/image.scss */
      .image--width-two-thirds .image__image,
      .image--width-two-thirds .image__caption {
        width: 66.6666%; }
      /* line 115, ../../src/blocks/image.scss */
      .image--width-two-thirds .caption-location-beside .image__caption {
        width: 33.3333%; } }
  /* line 125, ../../src/blocks/image.scss */
  .image--align-center .image__caption,
  .image--align-center .image__image {
    margin-left: auto;
    margin-right: auto; }
  @media screen and (min-width: 35rem) {
    /* line 134, ../../src/blocks/image.scss */
    .image__figure.caption-location-beside {
      display: -ms-flexbox;
      display: flex; }
      /* line 139, ../../src/blocks/image.scss */
      .image__figure.caption-location-beside .image__caption {
        padding-left: 1em;
        padding-right: 1em; } }
  /* line 145, ../../src/blocks/image.scss */
  .image__figure.caption-location-beside-left {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse; }
  /* line 151, ../../src/blocks/image.scss */
  .image__image img {
    width: 100%;
    /* Always span the given width */
    display: block; }
  /* line 156, ../../src/blocks/image.scss */
  .image__caption {
    margin-top: .5em;
    max-width: 20em; }
    @media screen and (min-width: 35rem) {
      /* line 156, ../../src/blocks/image.scss */
      .image__caption {
        margin-top: .75em; } }
    /* line 164, ../../src/blocks/image.scss */
    .caption-horizontal-align-center .image__caption {
      margin-left: auto;
      margin-right: auto;
      text-align: center; }
    @media screen and (min-width: 50rem) {
      /* line 169, ../../src/blocks/image.scss */
      .caption-horizontal-align-right .image__caption {
        margin-left: auto; } }
    @media screen and (min-width: 35rem) {
      /* line 175, ../../src/blocks/image.scss */
      .caption-vertical-align-top .image__caption {
        margin-top: 0; } }
    @media screen and (min-width: 35rem) {
      /* line 180, ../../src/blocks/image.scss */
      .caption-vertical-align-top-with-space .image__caption {
        margin-top: 0;
        padding-top: 2em; } }
    /* line 187, ../../src/blocks/image.scss */
    .caption-vertical-align-bottom .image__caption {
      -ms-flex-item-align: end;
          align-self: flex-end; }
    @media screen and (min-width: 35rem) {
      /* line 190, ../../src/blocks/image.scss */
      .caption-vertical-align-bottom-with-space .image__caption {
        -ms-flex-item-align: end;
            align-self: flex-end;
        padding-bottom: 2em; } }
    /* line 197, ../../src/blocks/image.scss */
    .image__caption p {
      font-size: .8em;
      color: #666;
      line-height: 1.4; }
  /* line 203, ../../src/blocks/image.scss */
  .image__credit {
    display: block;
    font-size: .6em; }
  /* line 207, ../../src/blocks/image.scss */
  .image__group-caption {
    margin-top: .5em;
    max-width: 24em; }
    /* line 211, ../../src/blocks/image.scss */
    .image__group-caption p {
      font-size: .8em;
      color: #666;
      line-height: 1.4; }