/* Dedicated case compositions; visual changes are mobile/tablet-only and opt-in. */
@media screen and (max-width: 991px) {
  .hero-transition-1st-backgound.has-mobile-art,
  .hero-transition-2nd-backgound.has-mobile-art {
    background-color: var(--background-colors--body-background-dark, #12171b);
  }

  .hero-transition-1st-backgound.has-mobile-art .cover-image,
  .hero-transition-2nd-backgound.has-mobile-art .cover-image {
    object-fit: contain;
    object-position: 50% 0%;
  }

  /* The existing second-frame zoom would crop the portrait during transition. */
  .hero-transition-2nd-backgound.has-mobile-art {
    transform: none !important;
  }

  .content-sticky-image.has-mobile-art {
    height: auto;
    aspect-ratio: 3 / 4;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--background-colors--body-background-dark, #12171b);
  }

  .content-sticky-image.has-mobile-art .parallax-image {
    height: 100%;
    top: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }

  .project-column-2.has-mobile-art {
    flex-direction: column;
    align-items: stretch;
  }

  .project-media.has-mobile-art {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    display: block !important;
    border-radius: var(--layout-core-sizes--radius-default);
    background-color: var(--background-colors--body-background-dark, #12171b);
  }

  .project-media.has-mobile-art picture.case-art-picture--card {
    display: block !important;
    width: 100%;
    height: 100%;
  }

  .project-media.has-mobile-art .project-image:not(.is-2nd) {
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: contain;
    object-position: 50% 50%;
  }

  .project-column-2.has-mobile-art > .project-actions {
    width: 100%;
    padding-left: 0;
  }

  /* Place the whole portrait above the existing text panel, without overlap. */
  .featured-project-item.has-mobile-art {
    height: auto;
    min-height: 0;
    padding-top: 0;
    flex-direction: column-reverse;
    align-items: stretch;
    background-color: var(--background-colors--body-background-dark, #12171b);
  }

  .featured-project-item.has-mobile-art > .featured-project-backgound-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    flex: none;
  }

  .featured-project-item.has-mobile-art > .featured-project-backgound-image .cover-image {
    object-fit: contain;
    object-position: 50% 0%;
  }

  .featured-project-item.has-mobile-art > .featured-project-content {
    flex: none;
  }
}