html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:root {
  /**
   * @prop --c-login-card-background-color: Login card background color
   * @prop --c-login-card-overlay-color: Login card overlay blend color
   */
  --_c-login-card-background-color: var(
    --c-login-card-background-color,
    var(--c-white)
  );
  --_c-login-card-overlay-color: var(
    --c-login-card-overlay-color,
    var(--c-primary-600)
  );
}

c-login-card {
  display: flex;
  background: var(--_c-login-card-background-color);
  border-radius: 6px;
}
c-login-card article {
  width: 100%;
}

.c-login-card {
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 10px 20px, rgba(0, 0, 0, 0.2) 0 5px 5px;
  display: flex;
  position: relative;
  width: 100%;
}
.c-login-card__image {
  background-size: cover;
  border-radius: 6px;
  clip-path: url("#cLoginClipPath");
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
.c-login-card__image--overlay {
  background-color: var(--_c-login-card-overlay-color);
  background-blend-mode: var(--_c-login-card-overlay-mode);
}
.c-login-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 72px;
  margin-bottom: 32px;
  max-width: 80%;
  width: 100%;
}
.c-login-card__content--no-image {
  max-width: 100%;
  margin-bottom: 0;
}
.c-login-card--mobile c-login-card-title {
  font-size: 32px;
  hyphens: auto;
}
.c-login-card--mobile .c-login-card__content {
  max-width: 100%;
  padding: 40px;
}
.c-login-card--mobile .c-login-card__image {
  border-radius: 0 0 6px 6px;
  bottom: 0;
  top: auto;
  width: 100%;
}