@layer components{.shot{--shot-min:0.85;--shot-img-w:clamp(calc(var(--shot-w) * var(--shot-min)),100%,var(--shot-w));--shot-img-h:calc(var(--shot-img-w) * var(--shot-ratio));display:block;container-type:inline-size;width:100%;max-width:var(--shot-w);overflow:hidden;border:1px solid var(--bs-border-strong);border-radius:.75rem;box-shadow:var(--bs-shadow-1),var(--bs-shadow-3)}.shot-img{display:block;width:var(--shot-img-w);max-width:none;height:auto;margin-left:calc(-1 * clamp(0px, var(--shot-fx, 0) * var(--shot-img-w) - 50cqw, var(--shot-img-w) - 100cqw))}.shot[data-device=phone]{border:12px solid var(--bs-deep);border-radius:54px;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--bs-paper) 14%,transparent),0 0 0 1px var(--bs-border-strong),var(--bs-shadow-1),var(--bs-shadow-3)}.shot[data-device=phone] .shot-img{border-radius:42px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .shot[data-device=phone]{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--bs-paper) 14%,transparent),var(--bs-shadow-1),var(--bs-shadow-3)}}:root[data-theme=dark] .shot[data-device=phone]{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--bs-paper) 14%,transparent),var(--bs-shadow-1),var(--bs-shadow-3)}@media (width < 64rem){.shot[data-narrow]{aspect-ratio:var(--shot-aspect)}.shot[data-narrow] .shot-img{margin-left:calc(-1 * clamp(0px,
          var(--shot-nfx, var(--shot-fx, 0)) * var(--shot-img-w) - 50cqw,
          var(--shot-img-w) - 100cqw));margin-top:calc(-1 * clamp(0px,
          var(--shot-nfy, var(--shot-fy, 0)) * var(--shot-img-h) - 100cqw /
          var(--shot-aspect) /
          2,
          var(--shot-img-h) - 100cqw /
          var(--shot-aspect)))}}}