/* Canonical portrait artboards shared by the homepage and Aging page. */

body[data-page] .pack-modal-body {
  display: flex !important;
  justify-content: center !important;
}

body[data-page] .portrait-preview-viewport {
  --portrait-preview-scale: 1;
  flex: 0 0 auto;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}

body[data-page] .portrait-preview-viewport > .portrait-artboard {
  left: 50% !important;
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%) scale(var(--portrait-preview-scale)) !important;
  transform-origin: top center !important;
}

@media (min-width: 768px) {
  body[data-page] .pack-modal-container {
    max-width: calc(100% - 40px) !important;
    width: 580px !important;
  }
}

body[data-page] .portrait-artboard.pack-portrait-outer-frame {
  --portrait-card-width: 142px;
  --portrait-column-gap: 16px;
  --portrait-grid-width: 458px;
  --portrait-name-font-size: 18px;
  --portrait-name-height: 46px;
  --portrait-row-gap: 16px;
  align-items: stretch !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  height: 675px !important;
  max-height: 675px !important;
  max-width: none !important;
  min-height: 675px !important;
  min-width: 540px !important;
  padding: 18px !important;
  position: relative !important;
  width: 540px !important;
}

body[data-page] .portrait-artboard .pack-portrait-frame-header {
  flex: 0 0 auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard .frame-brand-title {
  font-size: 1.35rem !important;
  line-height: 1.2 !important;
}

body[data-page] .portrait-artboard .pack-portrait-inner-mat {
  align-items: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 18px !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard .pack-portrait-photo-row {
  align-items: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard .pack-polaroid-tier {
  align-content: center !important;
  align-items: center !important;
  display: flex !important;
  flex-flow: row wrap !important;
  gap: var(--portrait-row-gap) var(--portrait-column-gap) !important;
  justify-content: center !important;
  max-width: 100% !important;
  width: var(--portrait-grid-width) !important;
}

body[data-page] .portrait-artboard .pack-polaroid-card,
body[data-page] .portrait-artboard .pack-portrait-photo-row.single-card-layout .pack-polaroid-card {
  align-items: center !important;
  align-self: auto !important;
  box-sizing: border-box !important;
  flex: 0 0 var(--portrait-card-width) !important;
  height: auto !important;
  justify-self: auto !important;
  max-width: none !important;
  min-width: var(--portrait-card-width) !important;
  padding: var(--portrait-card-padding, 7px) var(--portrait-card-padding, 7px) var(--portrait-card-bottom, 12px) !important;
  width: var(--portrait-card-width) !important;
}

body[data-page] .portrait-artboard .pack-polaroid-photo-inner,
body[data-page] .portrait-artboard .pack-portrait-photo-row.single-card-layout .pack-polaroid-photo-inner {
  aspect-ratio: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard .pack-polaroid-name-wrap {
  flex: 0 0 var(--portrait-name-height) !important;
  height: var(--portrait-name-height) !important;
  margin-top: var(--portrait-name-margin, 10px) !important;
  min-height: var(--portrait-name-height) !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard .pack-polaroid-name {
  align-items: center !important;
  box-sizing: border-box !important;
  display: flex !important;
  font-size: var(--portrait-name-font-size) !important;
  height: 100% !important;
  justify-content: center !important;
  line-height: 1 !important;
  max-height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  padding: 1px 0 3px !important;
  text-align: center !important;
  white-space: normal !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard .pack-polaroid-input {
  height: 100% !important;
  inset: 0 !important;
  width: 100% !important;
}

body[data-page] .portrait-artboard.is-single-portrait {
  --portrait-card-bottom: 12px;
  --portrait-card-padding: 10px;
  --portrait-card-width: 180px;
  --portrait-grid-width: 180px;
  --portrait-name-font-size: 20px;
  --portrait-name-height: 52px;
  --portrait-name-margin: 10px;
  height: 353px !important;
  max-height: 353px !important;
  min-height: 353px !important;
  min-width: 272px !important;
  padding: 14px !important;
  width: 272px !important;
}

body[data-page] .portrait-artboard.is-single-portrait .pack-portrait-frame-header {
  margin-bottom: 10px !important;
}

body[data-page] .portrait-artboard.is-single-portrait .pack-portrait-inner-mat {
  padding: 12px !important;
}

body[data-page] .portrait-artboard.is-capturing,
body[data-page] .portrait-artboard.is-capturing .pack-polaroid-card {
  transform: none !important;
  transition: none !important;
}

body[data-page] .portrait-artboard.is-capturing .pack-polaroid-card:hover {
  transform: none !important;
}

@media (max-width: 767px) {
  body[data-page] .portrait-artboard.pack-portrait-outer-frame,
  body[data-page] .portrait-artboard .pack-portrait-inner-mat,
  body[data-page] .portrait-artboard .pack-portrait-photo-row,
  body[data-page] .portrait-artboard .pack-polaroid-tier,
  body[data-page] .portrait-artboard .pack-polaroid-card {
    box-sizing: border-box !important;
  }
}