/* Print-derived output layouts. Device adjustments never alter the print grid. */
.composer-item .newsletter-block.kind-photo > .block-image,
.composer-item .newsletter-block.kind-photo .block-media-item img,
.publication-page-item .newsletter-block.kind-photo > .block-image,
.publication-page-item .newsletter-block.kind-photo .block-media-item img,
.web-publication-item .newsletter-block.kind-photo > .block-image,
.web-publication-item .newsletter-block.kind-photo .block-media-item img,
.layout-wrap-media .block-media-item img {
  scale: calc(var(--output-image-scale-x, var(--item-image-scale-x, 1)) * var(--media-image-scale-x, 100) / 100) calc(var(--output-image-scale-y, var(--item-image-scale-y, 1)) * var(--media-image-scale-y, 100) / 100);
}
.block-media-item img,
.in-story-media > img {
  scale: calc(var(--media-image-scale-x, 100) / 100) calc(var(--media-image-scale-y, 100) / 100);
}

.composer-pages.flow-view .composer-page-canvas {
  --output-header-rows: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.composer-pages.flow-view .composer-page-canvas.has-masthead { --output-header-rows: 1; }
.page-composer .composer-pages.flow-view .composer-page-canvas .composer-item {
  grid-column: var(--output-column, 1) / span var(--output-width, 12) !important;
  grid-row: calc(var(--output-row, 1) + var(--output-header-rows)) / span var(--output-row-span, 1) !important;
  order: var(--output-order, 0);
  margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
  transform: rotate(var(--output-rotation, 0deg));
}
.composer-pages.web-view .composer-item {
  --output-column: var(--web-column, 1);
  --output-width: var(--web-width, 12);
  --output-row: var(--web-row, 1);
  --output-row-span: var(--web-row-span, 1);
  --output-order: var(--web-order, 0);
  --output-margin-top: var(--web-margin-top, 0px);
  --output-margin-right: var(--web-margin-right, 0px);
  --output-margin-bottom: var(--web-margin-bottom, 0px);
  --output-margin-left: var(--web-margin-left, 0px);
  --output-rotation: var(--web-rotation, 0deg);
  --output-image-scale-x: var(--web-image-scale-x, 1);
  --output-image-scale-y: var(--web-image-scale-y, 1);
}
.composer-pages.tablet-view .composer-item {
  --output-column: var(--tablet-column, 1);
  --output-width: var(--tablet-width, 12);
  --output-row: var(--tablet-row, 1);
  --output-row-span: var(--tablet-row-span, 1);
  --output-order: var(--tablet-order, 0);
  --output-margin-top: var(--tablet-margin-top, 0px);
  --output-margin-right: var(--tablet-margin-right, 0px);
  --output-margin-bottom: var(--tablet-margin-bottom, 0px);
  --output-margin-left: var(--tablet-margin-left, 0px);
  --output-rotation: var(--tablet-rotation, 0deg);
  --output-image-scale-x: var(--tablet-image-scale-x, 1);
  --output-image-scale-y: var(--tablet-image-scale-y, 1);
}
.composer-pages.mobile-view .composer-item {
  --output-column: var(--mobile-column, 1);
  --output-width: var(--mobile-width, 12);
  --output-row: var(--mobile-row, 1);
  --output-row-span: var(--mobile-row-span, 1);
  --output-order: var(--mobile-order, 0);
  --output-margin-top: var(--mobile-margin-top, 0px);
  --output-margin-right: var(--mobile-margin-right, 0px);
  --output-margin-bottom: var(--mobile-margin-bottom, 0px);
  --output-margin-left: var(--mobile-margin-left, 0px);
  --output-rotation: var(--mobile-rotation, 0deg);
  --output-image-scale-x: var(--mobile-image-scale-x, 1);
  --output-image-scale-y: var(--mobile-image-scale-y, 1);
}

@media screen {
  .web-publication-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .web-publication-item {
    grid-column: var(--output-column, 1) / span var(--output-width, 12);
    grid-row: var(--output-row, 1) / span var(--output-row-span, 1);
    order: var(--output-order, 0);
    margin: var(--output-margin-top, 0px) var(--output-margin-right, 0px) var(--output-margin-bottom, 0px) var(--output-margin-left, 0px);
    transform: rotate(var(--output-rotation, 0deg));
  }
}
@media screen and (min-width: 1025px) {
  .web-publication-item {
    --output-column: var(--web-column, 1);
    --output-width: var(--web-width, 12);
    --output-row: var(--web-row, 1);
    --output-row-span: var(--web-row-span, 1);
    --output-order: var(--web-order, 0);
    --output-margin-top: var(--web-margin-top, 0px);
    --output-margin-right: var(--web-margin-right, 0px);
    --output-margin-bottom: var(--web-margin-bottom, 0px);
    --output-margin-left: var(--web-margin-left, 0px);
    --output-rotation: var(--web-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--web-image-scale-x, 1);
    --output-image-scale-y: var(--web-image-scale-y, 1);
  }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  .web-publication-item {
    --output-column: var(--tablet-column, 1);
    --output-width: var(--tablet-width, 12);
    --output-row: var(--tablet-row, 1);
    --output-row-span: var(--tablet-row-span, 1);
    --output-order: var(--tablet-order, 0);
    --output-margin-top: var(--tablet-margin-top, 0px);
    --output-margin-right: var(--tablet-margin-right, 0px);
    --output-margin-bottom: var(--tablet-margin-bottom, 0px);
    --output-margin-left: var(--tablet-margin-left, 0px);
    --output-rotation: var(--tablet-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--tablet-image-scale-x, 1);
    --output-image-scale-y: var(--tablet-image-scale-y, 1);
  }
}
@media screen and (max-width: 760px) {
  .web-publication-item {
    --output-column: var(--mobile-column, 1);
    --output-width: var(--mobile-width, 12);
    --output-row: var(--mobile-row, 1);
    --output-row-span: var(--mobile-row-span, 1);
    --output-order: var(--mobile-order, 0);
    --output-margin-top: var(--mobile-margin-top, 0px);
    --output-margin-right: var(--mobile-margin-right, 0px);
    --output-margin-bottom: var(--mobile-margin-bottom, 0px);
    --output-margin-left: var(--mobile-margin-left, 0px);
    --output-rotation: var(--mobile-rotation, 0deg);
  }
  .web-publication-item,
  .web-publication-item .layout-wrap-media {
    --output-image-scale-x: var(--mobile-image-scale-x, 1);
    --output-image-scale-y: var(--mobile-image-scale-y, 1);
  }
  .web-publication-item.mobile-width-half { grid-column: var(--output-column, 1) / span var(--output-width, 6); }
}