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

	@package theorder

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

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
.image {
  padding: 0 var(--size-400);
  margin-bottom: var(--size-700); }
  @media screen and (max-width: 23rem) {
    .image {
      /* MAX-WIDTH!!! */
      padding-left: 0;
      /* span images on small screens */
      padding-right: 0;
      /* span images on small screens */ } }
  .image__image img {
    width: 100%;
    /* Always span the given width */
    display: block; }
    .image--multiply .image__image img {
      mix-blend-mode: multiply; }
  .image__credit {
    padding: 0 var(--size-400); }
    @media screen and (min-width: 23rem) {
      .image__credit {
        padding: 0; } }
    .image__credit p {
      font-size: var(--size-200);
      padding-top: var(--size-50);
      line-height: 1.5;
      color: var(--color-image-caption);
      font-family: var(--font-sans);
      font-style: italic; }
  .image__caption {
    padding: 0 var(--size-400); }
    @media screen and (min-width: 23rem) {
      .image__caption {
        padding: 0; } }
    .image__caption p {
      font-size: var(--size-300);
      padding-top: var(--size-300);
      line-height: 1.5;
      color: var(--color-image-caption); }
  .image.max-width-in-px {
    margin-left: auto;
    margin-right: auto; }
  .image.max-width-span-without-margin, .image.max-width-extend {
    padding-left: 0;
    padding-right: 0; }