/*
 * Mobile expansion layer: 376–768px.
 * Typography stays at the 375px design size. Containers and media expand.
 */
@media (min-width: 376px) and (max-width: 768px) {
  .philosophy-shared,
  .philosophy-sp-only,
  .sp01-fv-intro,
  .sp-masterpiece,
  .sp-masterpiece-works,
  .sp-perspectives-history,
  .sp-observer-awards,
  .sp08-legacy {
    width: 100%;
    max-width: none;
  }

  .sp01-fv__background {
    left: 50%;
    transform: translateX(-50%);
  }

  .sp01-intro__english,
  .philosophy-shared .philosophy-message--intro .philosophy-message__english {
    width: calc(100% - 2px);
  }

  .sp01-intro__vertical {
    left: calc(50% - 138px);
  }

  .philosophy-shared .philosophy-message__columns--intro {
    right: max(48px, calc(50% - 139px));
  }

  .sp-architect__name {
    left: calc(50% - 52.5px);
  }

  .sp-architect__portrait {
    width: calc(100% + 170px);
  }

  .sp-architect__content,
  .philosophy-shared .philosophy-feature--01__content,
  .sp-light-shadow__content,
  .philosophy-shared .philosophy-feature--02 .philosophy-feature__content,
  .sp-perspective-story__copy {
    left: 24px;
    width: calc(100% - 48px);
  }

  .sp-light-shadow__image,
  .philosophy-shared .philosophy-feature--02__row,
  .philosophy-shared .philosophy-feature--02__row > .philosophy-responsive-picture,
  .sp-museum-photo__photos,
  .sp-museum-photo__main,
  .sp-museum-photo__pair,
  .philosophy-shared .philosophy-photo-pair,
  .sp-perspective-story,
  .sp-perspective-story > img,
  .sp-perspectives-history__history,
  .sp-observer__photo,
  .sp-observer__photo img,
  .sp-awards-related__item,
  .sp08-legacy__building,
  .sp08-book > img {
    width: 100%;
  }

  .sp-light-shadow__heading,
  .philosophy-shared .philosophy-feature--02 .philosophy-feature__heading,
  .sp-museum-photo__heading,
  .sp-museum-photo__eyebrow,
  .sp-museum-photo__heading h2,
  .sp-museum-photo__body,
  .philosophy-shared .philosophy-feature--03 .philosophy-feature__content,
  .sp-masterpiece-work__body,
  .philosophy-shared .philosophy-work__content > p,
  .sp-observer__body {
    width: 100%;
  }

  .sp-museum-photo__content,
  .philosophy-shared .philosophy-feature--03__copy {
    left: 24px;
    width: calc(100% - 48px);
  }

  .sp-museum-photo__eyebrow span:last-child {
    width: calc(100% - 33px);
  }

  .sp-museum-photo__pair img,
  .philosophy-shared .philosophy-photo-pair > div {
    width: 50%;
  }

  .sp-masterpiece-work__image,
  .philosophy-shared .philosophy-work__image {
    width: calc(100% - 24px);
  }

  /*
   * Match the specificity of the 375px base composition. At wider mobile
   * widths the type remains fixed, while the work photography expands with
   * the viewport.
   */
  .philosophy-shared .philosophy-works[data-node-id="16:414"],
  .philosophy-shared .philosophy-works[data-node-id="16:414"] .philosophy-work,
  .philosophy-shared .philosophy-works[data-node-id="16:414"] .philosophy-work:first-child {
    width: 100%;
  }

  .philosophy-shared .philosophy-works[data-node-id="16:414"] .philosophy-work__image,
  .philosophy-shared .philosophy-works[data-node-id="16:414"] .philosophy-work:first-child .philosophy-work__image {
    width: calc(100% - 24px);
  }

  .sp-masterpiece-work__content,
  .philosophy-shared .philosophy-work__content {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
  }

  .sp-perspectives-history__vertical {
    right: max(80px, calc(50% - 107.5px));
  }

  .sp-perspectives-history__history-title {
    margin-left: max(79px, calc(50% - 108.5px)) !important;
  }

  .sp-observer__copy {
    width: calc(100% - 48px);
  }

  .sp-awards {
    padding-right: 24px;
    padding-left: 24px;
  }

  .sp-award {
    width: 100%;
  }

  .sp-award__image,
  .sp-award__button {
    width: calc(100% - 48px);
  }

  .sp08-generations {
    background-position-x: center;
  }

  .sp08-generation--first {
    left: calc(50% - 97.5px);
  }

  .sp08-generation--second {
    left: calc(50% - 166.5px);
  }

  .sp08-generation--third {
    left: calc(50% + 19.5px);
  }

  .sp08-related__item,
  .sp08-book__copy,
  .sp08-legacy__statement,
  .philosophy-sp-only header.sp08-legacy__intro {
    padding-right: 24px;
    padding-left: 24px;
  }

  .sp08-related__photo {
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 1;
  }
}