*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
}

.aly-page--embed {
  height: auto;
  padding: 24px 34px;
  background: transparent;
}

.aly-page--embed #aly-root {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.aly-page--demo {
  min-height: 100%;
  padding: 1.5rem;
  background: #f5f3f0;
}

.aly-page--demo #aly-root {
  max-width: 1100px;
  margin: 0 auto;
}

.aly-page--embed .aly-card__right--portrait {
  display: none;
}

.aly-page--demo .aly-card__right--widget {
  display: none;
}

@media (max-width: 767px) {
  .aly-page--embed {
    padding: 10px 16px;
  }

  .aly-card__right--widget {
    flex: none;
    overflow: visible;
  }

  .aly-widget {
    --aly-avatar-height: 340px;
    --aly-actions-min-height: 200px;
  }

  .aly-card__right--portrait {
    min-height: 0;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0 1rem 1.25rem;
  }

  .aly-card__right--portrait .aly-card__portrait {
    width: 100%;
    max-width: 360px;
    max-height: none;
    margin: 0 auto;
    object-fit: contain;
    object-position: center top;
  }
}