/* Картинки публикаций.

   figure.ids__media — одиночная картинка с ограничением ширины
   (бывш. publication-vertical-pic + *-pic).

   .ids__media-group — колонка с картинками по центру и воздухом сверху,
   размер задаёт ширину фигур внутри (бывш. shadow-img / center-img).
   Модификатор .shadow вешает тень на все картинки внутри. */

.ids .ids__media {
  max-width: 30em;

  @media (width < 768px) {
    max-width: 20em;
  }

  &.XXS {
    max-width: 5em;
  }
  &.XS {
    max-width: 8em;
  }
  &.S {
    max-width: 17em;
  }
  &.M {
    max-width: 20em;
  }
  &.L {
    max-width: 35em;
  }

  &.shadow img {
    filter: drop-shadow(0px 7px 12px var(--shift__shadow-color));
    border-radius: 0.45em;
  }
}

.ids .ids__media-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  & figure {
    width: 100%;
  }

  &.S {
    margin-top: 4em;

    & figure {
      max-width: 15em;
    }
  }

  &.M {
    margin-top: 3em;

    & figure {
      max-width: 20em;
    }
  }

  &.L {
    margin-top: 2em;

    & figure {
      max-width: 30em;
    }
  }

  &.XL {
    margin-top: 1em;

    & figure {
      max-width: none;
    }
  }

  &.shadow img {
    filter: drop-shadow(0px 7px 12px var(--shift__shadow-color));
    border-radius: 0.45em;
  }

  &.shadow.cut-the-edges img {
    border-radius: 1.3em;
  }
}

/* Рамка и тень по контуру картинки (скриншоты интерфейсов) */
.ids figure.border,
.ids .ids__media-group.border figure {
  overflow: hidden;
  box-shadow: 0 0 0.5em color-mix(in srgb, var(--ids__text) 10%, transparent);
  border-radius: 0.45em;
  border: var(--ids__border-width-s) solid color-mix(in srgb, var(--ids__text) 15%, transparent);
}

/* Оранжевая обводка (макеты на белом) */
.ids figure.border-orange {
  outline: 0.001em solid var(--shift__dodo-orange);
  border-radius: 0.1em;
}

.ids .ids__media img,
.ids .ids__media-group img {
  max-width: 100%;
  height: auto;
}

/* Подпись, относящаяся к группе картинок выше */
.ids figure.ids__media-caption {
  & figcaption {
    margin-top: -1em;
  }
}