/*
 * Figma 162:48982 at 1440x900: 64px nav; horizontal rules at y=164, 423, 900;
 * vertical rule x=885. The hero uses the site's 12 columns and 20px gutters.
 * Heading: Playfair Light 48px / normal / 0 tracking at (176,236), width 542.
 * Copy: DM Sans Light 18px / 1.4 at (947,485), width 413. Background #fffef8.
 * Portrait cards preserve their Figma positions and rotations; the 900px frame clips them.
 */
.phoenix-page {
  /* Phoenix typography tokens */
  --phoenix-font-body: "DM Sans", sans-serif;
  --phoenix-font-display: "Playfair", Georgia, serif;
  --phoenix-weight-light: 300;
  --phoenix-weight-regular: 400;
  --phoenix-weight-medium: 500;
  --phoenix-weight-bold: 700;
  --phoenix-size-hero: 48px;
  --phoenix-size-profile-heading: 60px;
  --phoenix-size-profile-heading-mobile: 48px;
  --phoenix-size-project-heading: 22px;
  --phoenix-size-experience-role: 32px;
  --phoenix-size-experience-role-mobile: 28px;
  --phoenix-size-body-large: 18px;
  --phoenix-size-body-regular: 16px;
  --phoenix-size-label: 14px;
  --phoenix-line-body-large: 1.4;
  --phoenix-line-body-regular: 24px;
  --phoenix-line-label: 20px;
  --phoenix-line-project-heading: 1.33;
  --phoenix-line-experience-role: 1.2;
  --phoenix-ink: #000;
  --phoenix-muted: #000;
  background: #fffef8;
  color: var(--phoenix-ink);
  padding: 0;
  position: relative;
  font-family: var(--phoenix-font-body);
}

/* Shared, one-time fade-up reveal for supporting portfolio content. */
.phoenix-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms ease, transform 800ms ease;
  transition-delay: var(--phoenix-reveal-delay, 0ms);
}

.phoenix-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .phoenix-reveal,
  .phoenix-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.phoenix-page .navbar {
  height: 64px;
  padding: 0 32px;
}

.phoenix-page .navbar-logo-wrapper {
  padding: 0;
  color: var(--phoenix-ink);
}

.phoenix-page .navbaro-logo-text {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-family: var(--phoenix-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  font-variation-settings: "opsz" 12, "wdth" 100;
}

.phoenix-logo-short,
.phoenix-logo-full {
  display: inline-block;
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

.phoenix-logo-short {
  max-width: 3ch;
  opacity: 1;
  transition: max-width 760ms cubic-bezier(.22, 1, .36, 1), opacity 620ms ease;
}

.phoenix-logo-full {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  transition: max-width 980ms cubic-bezier(.2, .75, .2, 1), opacity 520ms ease;
  transition-delay: 0ms, 120ms;
}

.phoenix-logo-word {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

.phoenix-logo-word + .phoenix-logo-word {
  margin-left: 0.22em;
}

.phoenix-logo-word-falconer + .phoenix-logo-word-pincus {
  margin-left: 0;
}

.phoenix-logo-initial {
  flex: 0 0 auto;
}

.phoenix-logo-expansion {
  display: inline-block;
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: scaleX(0.82);
  transform-origin: left center;
  transition: max-width 780ms cubic-bezier(.2, .75, .2, 1), opacity 420ms ease, transform 780ms cubic-bezier(.2, .75, .2, 1);
}

.phoenix-logo-word-phoenix .phoenix-logo-expansion {
  transition-delay: 0ms, 40ms, 0ms;
}

.phoenix-logo-word-falconer .phoenix-logo-expansion {
  transition-delay: 140ms, 180ms, 140ms;
}

.phoenix-logo-word-pincus .phoenix-logo-expansion {
  transition-delay: 280ms, 320ms, 280ms;
}

.navbar-logo-wrapper:hover .phoenix-logo-short,
.navbar-logo-wrapper:focus-visible .phoenix-logo-short {
  max-width: 0;
  opacity: 0;
}

.navbar-logo-wrapper:hover .phoenix-logo-full,
.navbar-logo-wrapper:focus-visible .phoenix-logo-full {
  max-width: 270px;
  opacity: 1;
}

.navbar-logo-wrapper:hover .phoenix-logo-expansion,
.navbar-logo-wrapper:focus-visible .phoenix-logo-expansion {
  opacity: 1;
  transform: scaleX(1);
}

.navbar-logo-wrapper:hover .phoenix-logo-word-phoenix .phoenix-logo-expansion,
.navbar-logo-wrapper:focus-visible .phoenix-logo-word-phoenix .phoenix-logo-expansion {
  max-width: 6ch;
}

.navbar-logo-wrapper:hover .phoenix-logo-word-falconer .phoenix-logo-expansion,
.navbar-logo-wrapper:focus-visible .phoenix-logo-word-falconer .phoenix-logo-expansion {
  max-width: 7.4ch;
}

.navbar-logo-wrapper:hover .phoenix-logo-word-pincus .phoenix-logo-expansion,
.navbar-logo-wrapper:focus-visible .phoenix-logo-word-pincus .phoenix-logo-expansion {
  max-width: 5.3ch;
}
@media (prefers-reduced-motion: reduce) {
  .phoenix-logo-short,
  .phoenix-logo-full,
  .phoenix-logo-expansion {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

.phoenix-page .navbar-action-wrapper {
  align-items: center;
  gap: 8px;
}

.phoenix-page .body-regular {
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-regular);
  font-weight: var(--phoenix-weight-regular);
  line-height: var(--phoenix-line-body-regular);
}

.phoenix-nav-label,
.phoenix-nav-separator {
  color: #4b5565;
}

.phoenix-hero {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 836px;
  min-height: 0;
  margin: 0 auto;
  overflow: visible;
}

.phoenix-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  padding-right: 32px;
  padding-left: 32px;
}

.phoenix-hero-intro {
  height: 359px;
  box-sizing: border-box;
  align-items: start;
  padding-top: 172px;
}

.phoenix-hero h1 {
  grid-column: 2 / span 5;
  width: 542px;
  margin: 0 0 0 28px;
  color: var(--phoenix-ink);
  font-family: var(--phoenix-font-display);
  font-size: var(--phoenix-size-hero);
  font-weight: var(--phoenix-weight-light);
  line-height: normal;
  letter-spacing: 0;
  font-variation-settings: "opsz" 12, "wdth" 100;
}

.phoenix-divider {
  position: absolute;
  display: block;
  z-index: 3;
  pointer-events: none;
}

.phoenix-divider-intro {
  top: 100px;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: 1px;
  transform: translateX(-50%);
}

.phoenix-divider-mid {
  top: 359px;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: 1px;
  transform: translateX(-50%);
}

.phoenix-hero-content {
  position: relative;
  height: 477px;
  min-height: 0;
  box-sizing: border-box;
  padding-top: 62px;
  align-items: start;
}

.phoenix-divider-vertical {
  top: 0;
  left: 61.4583%;
  width: 900px;
  height: 1px;
  transform: rotate(90deg);
  transform-origin: top left;
}

.phoenix-intro-copy {
  grid-column: 9 / span 4;
  grid-row: 1;
  max-width: 413px;
  margin: 0 0 0 -15px;
  color: var(--phoenix-muted);
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-large);
  font-weight: var(--phoenix-weight-light);
  line-height: var(--phoenix-line-body-large);
}

.phoenix-intro-copy p {
  margin: 0 0 24px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Shared type styles for portfolio content below the hero. */
.phoenix-page .body-large,
.phoenix-page .body {
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-large);
  font-weight: var(--phoenix-weight-light);
  line-height: var(--phoenix-line-body-large);
}

.phoenix-page .body-large.medium,
.phoenix-page .body.medium {
  font-weight: var(--phoenix-weight-medium);
}

.phoenix-page .expeirence-card > .flex-horiz > .body {
  font-size: var(--phoenix-size-body-regular);
  font-weight: var(--phoenix-weight-regular);
  line-height: var(--phoenix-line-body-regular);
}

.phoenix-page .style-heading-2 {
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-project-heading);
  font-weight: var(--phoenix-weight-regular);
  line-height: 1.3;
}

/* Figma 162:48983: centered 10-column project grid within the page's 12 columns. */
.phoenix-project-section {
  padding: 100px 0;
}

.phoenix-project-grid {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  align-items: start;
}

.phoenix-project-card {
  position: relative;
  z-index: 0;
  grid-column: auto;
  gap: 24px;
  min-width: 0;
  padding: 0;
  border-radius: 12px;
  isolation: isolate;
  transition: color .2s ease;
}

/* The card's base transition overrides the shared reveal transition. */
.phoenix-project-card.phoenix-reveal {
  transition: color .2s ease, opacity 800ms ease, transform 800ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .phoenix-project-card.phoenix-reveal {
    transition: none;
  }
}

.phoenix-project-card:hover {
  padding: 0;
  border: 0;
  background: transparent;
}

.phoenix-project-card::before {
  position: absolute;
  z-index: -1;
  inset: -12px;
  border-radius: 12px;
  background: transparent;
  content: "";
  transition: background-color .2s ease;
}

.phoenix-project-card:hover::before,
.phoenix-project-card:focus-visible::before {
  background: #eef2f6;
}

.phoenix-project-card .portfolio-card-image {
  width: 100%;
  aspect-ratio: 640 / 360;
  flex: none;
  border-radius: 12px;
}

.phoenix-project-card .portfolio-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.phoenix-project-card .card-text-wrapper {
  min-width: 0;
}

.phoenix-project-company {
  color: #697586;
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-label);
  font-weight: var(--phoenix-weight-regular);
  line-height: var(--phoenix-line-label);
}

.phoenix-project-card .style-heading-2 {
  color: #121926;
  line-height: var(--phoenix-line-project-heading);
}

.phoenix-project-card:focus-visible {
  outline: 2px solid #596b91;
  outline-offset: 8px;
}

/* Figma 162:49642: staggered about copy and experience on the 12-column grid. */
.phoenix-profile-section {
  padding: 80px 0;
  background: #fffef8;
  border-radius: 20px;
}

.phoenix-profile-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 100px;
  align-items: start;
}

.phoenix-profile-heading {
  grid-column: 4 / span 5;
  grid-row: 1;
  margin: 0;
  color: #000;
  font-family: var(--phoenix-font-display);
  font-size: var(--phoenix-size-profile-heading);
  font-weight: var(--phoenix-weight-light);
  line-height: 1.1;
  letter-spacing: 0;
  font-variation-settings: "opsz" 12, "wdth" 100;
}

.phoenix-profile-intro {
  grid-column: 7 / span 5;
  grid-row: 2;
  color: rgba(32, 41, 57, .8);
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-large);
  font-weight: var(--phoenix-weight-light);
  line-height: var(--phoenix-line-body-large);
}

.phoenix-profile-summary {
  grid-column: 3 / span 5;
  grid-row: 3;
  color: #202939;
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-large);
  font-weight: var(--phoenix-weight-light);
  line-height: var(--phoenix-line-body-large);
}

.phoenix-profile-intro p,
.phoenix-profile-summary p {
  margin: 0 0 16px;
  font: inherit;
}

.phoenix-profile-intro p:last-child,
.phoenix-profile-summary p:last-child {
  margin-bottom: 0;
}

.phoenix-profile-intro strong,
.phoenix-profile-summary strong {
  color: #202939;
  font-weight: var(--phoenix-weight-bold);
}

.phoenix-experience-list {
  grid-column: 3 / span 5;
  grid-row: 4;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.phoenix-experience-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

.phoenix-experience-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.phoenix-experience-details {
  min-width: 0;
}

.phoenix-experience-company {
  margin: 0;
  color: #000;
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-large);
  font-weight: var(--phoenix-weight-medium);
  line-height: 28px;
}

.phoenix-experience-role {
  margin: 0;
  color: #000;
  font-family: var(--phoenix-font-display);
  font-size: var(--phoenix-size-experience-role);
  font-weight: var(--phoenix-weight-light);
  line-height: var(--phoenix-line-experience-role);
  font-variation-settings: "opsz" 12, "wdth" 100;
}

.phoenix-experience-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: #121926;
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-label);
  font-weight: var(--phoenix-weight-medium);
  line-height: var(--phoenix-line-label);
}

.phoenix-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.phoenix-experience-copy {
  color: #364152;
  font-family: var(--phoenix-font-body);
  font-size: var(--phoenix-size-body-regular);
  font-weight: var(--phoenix-weight-regular);
  line-height: var(--phoenix-line-body-regular);
}

.phoenix-experience-copy p {
  margin: 0 0 16px;
  font: inherit;
}

.phoenix-experience-copy p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .phoenix-profile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .phoenix-profile-heading,
  .phoenix-profile-summary,
  .phoenix-experience-list {
    grid-column: 2 / span 5;
  }

  .phoenix-profile-intro {
    grid-column: 3 / span 4;
  }
}

@media screen and (max-width: 767px) {
  .phoenix-project-section {
    padding: 64px 0;
  }

  .phoenix-project-grid {
    grid-row-gap: 40px;
  }

  .phoenix-project-card .style-heading-2 {
    font-size: var(--phoenix-size-project-heading);
  }

  .phoenix-profile-section {
    padding: 64px 0;
  }

  .phoenix-profile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 64px;
  }

  .phoenix-profile-heading,
  .phoenix-profile-intro,
  .phoenix-profile-summary,
  .phoenix-experience-list {
    grid-column: 1 / -1;
  }

  .phoenix-project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoenix-profile-heading {
    font-size: var(--phoenix-size-profile-heading-mobile);
  }

  .phoenix-experience-role {
    font-size: var(--phoenix-size-experience-role-mobile);
  }
}

@media screen and (max-width: 991px) {
  .phoenix-project-grid {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 479px) {
  .phoenix-project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.phoenix-divider-content {
  top: auto;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: 1px;
  transform: translateX(-50%);
}

.phoenix-collage {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.phoenix-collage:focus-visible .phoenix-photo-front {
  outline: 3px solid #596b91;
  outline-offset: 4px;
}

.phoenix-photo-third,
.phoenix-photo-second {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  translate: calc(var(--pointer-x, 0px) + var(--collapse-x, 0px)) calc(var(--pointer-y, 0px) + var(--collapse-y, 0px));
  rotate: calc(var(--pointer-rotation, 0deg) + var(--collapse-rotation, 0deg));
  transition: translate 190ms cubic-bezier(0.2, 0.7, 0.2, 1), rotate 190ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: auto;
  cursor: pointer;
}

.phoenix-photo-third {
  top: 397.83px;
  left: 14.814%;
  width: 519.036px;
  height: 616.359px;
  animation: phoenix-third-fan 1100ms cubic-bezier(0.22, 1, 0.36, 1) 620ms both;
}

.phoenix-photo-second {
  top: 429.4px;
  left: 9.792%;
  width: 489.126px;
  height: 601.696px;
  animation: phoenix-second-fan 900ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}

.phoenix-photo-third img,
.phoenix-photo-second img {
  display: block;
  width: 364.925px;
  height: 524.685px;
  border-radius: 12px;
  object-fit: cover;
}

.phoenix-photo-third img {
  transform: rotate(0deg);
  animation: phoenix-third-tilt 1100ms cubic-bezier(0.22, 1, 0.36, 1) 620ms both;
}

.phoenix-photo-second img {
  transform: rotate(0deg);
  animation: phoenix-second-tilt 900ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}

.phoenix-photo-front {
  position: absolute;
  top: 502px;
  left: 11.944%;
  display: block;
  width: 364.925px;
  height: 524.685px;
  border-radius: 12px;
  object-fit: cover;
  pointer-events: auto;
  cursor: pointer;
}

.phoenix-collage.is-collapsed .phoenix-photo-second {
  --collapse-x: -31px;
  --collapse-y: 34px;
  --collapse-rotation: -9deg;
}

.phoenix-collage.is-collapsed .phoenix-photo-third {
  --collapse-x: -118px;
  --collapse-y: 59px;
  --collapse-rotation: -10deg;
}

.phoenix-collage.is-collapsed .phoenix-photo-second,
.phoenix-collage.is-collapsed .phoenix-photo-third {
  transition-duration: 680ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.phoenix-collage.is-opening .phoenix-photo-second,
.phoenix-collage.is-opening .phoenix-photo-third {
  transition-duration: 950ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keep the sunlit portrait visible while its companions fan out to the right. */
@keyframes phoenix-second-fan {
  from {
    opacity: 0;
    transform: translate(-31px, 34px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes phoenix-third-fan {
  from {
    opacity: 0;
    transform: translate(-118px, 59px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes phoenix-second-tilt {
  from { transform: rotate(0deg); }
  to { transform: rotate(15.12deg); }
}

@keyframes phoenix-third-tilt {
  from { transform: rotate(0deg); }
  to { transform: rotate(19.48deg); }
}

@media (prefers-reduced-motion: reduce) {
  .phoenix-photo-third,
  .phoenix-photo-second,
  .phoenix-photo-front {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .phoenix-photo-third img {
    animation: none;
    transform: rotate(19.48deg);
  }

  .phoenix-photo-second img {
    animation: none;
    transform: rotate(15.12deg);
  }

  .phoenix-photo-third,
  .phoenix-photo-second {
    transition: none;
  }
}

@media screen and (max-width: 991px) {
  .phoenix-hero-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .phoenix-hero h1 {
    grid-column: 1 / span 6;
    max-width: 100%;
    margin-left: 0;
  }

  .phoenix-intro-copy {
    grid-column: 5 / span 4;
    margin: 0;
  }

}

@media screen and (max-width: 767px) {
  .phoenix-page .navbar {
    padding: 0 20px;
  }

  .phoenix-page .navbar-action-wrapper {
    gap: 8px;
  }

  .phoenix-hero {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .phoenix-hero-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .phoenix-hero-intro {
    height: auto;
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 32px;
  }

  .phoenix-hero-intro h1 {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 500px;
    margin-left: 0;
    font-size: clamp(38px, 10vw, 48px);
  }

  .phoenix-divider-intro {
    display: none;
  }

  .phoenix-hero-content {
    height: auto;
    min-height: 0;
    row-gap: 56px;
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .phoenix-intro-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 560px;
    margin: 0;
    font-size: 17px;
  }

  .phoenix-divider-vertical {
    display: none;
  }

  .phoenix-divider-mid {
    top: auto;
    bottom: 0;
  }

  .phoenix-collage {
    position: relative;
    inset: auto;
    width: min(calc(100% - 40px), 365px);
    height: 525px;
    margin: 40px auto 56px;
    overflow: visible;
  }

  .phoenix-experience-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .phoenix-experience-logo {
    width: 56px;
    height: 56px;
  }

  .phoenix-experience-details {
    grid-column: 1;
  }

  .phoenix-experience-company {
    margin-top: 0;
  }

  .phoenix-collage {
    --phoenix-mobile-card-width: min(300px, calc(100vw - 80px));
  }

  .phoenix-photo-third {
    top: 72px;
    left: 70px;
    width: var(--phoenix-mobile-card-width);
    height: auto;
    aspect-ratio: 365 / 525;
  }

  .phoenix-collage.is-collapsed .phoenix-photo-second {
    --collapse-x: 16px;
    --collapse-y: 0px;
  }

  .phoenix-collage.is-collapsed .phoenix-photo-third {
    --collapse-x: -60px;
    --collapse-y: 0px;
  }

  .phoenix-photo-second {
    top: 72px;
    left: 0;
    width: var(--phoenix-mobile-card-width);
    height: auto;
    aspect-ratio: 365 / 525;
  }

  .phoenix-photo-third img,
  .phoenix-photo-second img {
    width: 100%;
    height: 100%;
  }

  .phoenix-photo-front {
    top: 72px;
    left: 28px;
    width: var(--phoenix-mobile-card-width);
    height: auto;
    aspect-ratio: 365 / 525;
  }

  .phoenix-divider-content {
    display: none;
  }
}