@layer components {
  /* A garment photo with the school logo laid over it, centered in whatever box holds it */
  .garment-photo {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
  }

  .garment-photo__frame {
    max-block-size: 100%;
    max-inline-size: 100%;
    position: relative;
  }

  .garment-photo__image {
    block-size: auto;
    display: block;
    inline-size: 100%;
  }

  .garment-photo__logo {
    pointer-events: none;
    position: absolute;

    img {
      block-size: auto;
      inline-size: 100%;
    }
  }
}