/**********************************************************************
EDITORIAL IMAGE – PRINT MAGAZINE STYLE
**********************************************************************/

/* BASE BLOCK */

.image-editorial{
  position:relative;
  margin:5rem auto;
}


/* IMAGE */

.image-editorial-element{
  width:100%;
  height:auto;
  display:block;
  border-radius:28px;
}


/* EYEBROW */

.image-editorial-eyebrow{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
  font-weight:600;
}


/* CAPTION */

.image-editorial-caption{
  margin-top:1.2rem;
  margin-left:34px; /* optische Tangente der Rundung + Linienoffset */
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:.9;
}


/**********************************************************************
EDITORIAL GRAPHIC ELEMENTS (REFINED MAGAZINE STYLE)
**********************************************************************/

/* linke Margin-Linie */

.image-editorial::before{
  content:"";
  position:absolute;
  left:-38px;
  top:12%;
  width:1.5px;
  height:58%;
  background:var(--accent-light);
}


/* rechte untere Magazin-Ecke */

.image-editorial::after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:-22px;
  width:64px;
  height:64px;

  border-right:1.5px solid var(--accent-light);
  border-bottom:1.5px solid var(--accent-light);

  border-radius:0 0 18px 0;
}


/**********************************************************************
SIZES
**********************************************************************/

.image-editorial--small{
  max-width:420px;
}

.image-editorial--medium{
  max-width:720px;
}

.image-editorial--large{
  max-width:960px;
}

.image-editorial--full{
  max-width:100%;
}


/**********************************************************************
ALIGNMENT
**********************************************************************/

.image-editorial--left{
  margin-left:0;
}

.image-editorial--right{
  margin-right:0;
}

.image-editorial--center{
  margin-left:auto;
  margin-right:auto;
}


/**********************************************************************
EDITORIAL TEXTFLOW
**********************************************************************/

.image-editorial--float-left{
  float:left;
  margin:1rem 3rem 2rem 0;
  max-width:420px;
}

.image-editorial--float-right{
  float:right;
  margin:1rem 0 2rem 3rem;
  max-width:420px;
}


/**********************************************************************
OPTIONAL PAPER FRAME
**********************************************************************/

.image-editorial--paper{
  padding:18px;
  background:var(--white);
  border-radius:32px;
}


/**********************************************************************
SMALL IMAGES: NO DECORATION
**********************************************************************/

.image-editorial--small::before,
.image-editorial--small::after{
  display:none;
}


/**********************************************************************
MOBILE
**********************************************************************/

@media(max-width:768px){

  .image-editorial{
    margin:3rem auto;
  }

  .image-editorial::before,
  .image-editorial::after{
    display:none;
  }

  .image-editorial-caption{
    margin-left:0;
  }

  .image-editorial--float-left,
  .image-editorial--float-right{
    float:none;
    margin:2.5rem auto;
    max-width:100%;
  }

}