@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
body {
  overflow-x: hidden;
}

.mud-button {
  block-size: 2.875rem;
  padding-inline: 1rem;
  font-size: 1rem;
  line-height: 100%;
  color: #ffffff;
  text-transform: none;
  background: #ed0000;
  border-radius: 1.4375rem;
}
.mud-button:hover {
  background: #be0000;
}
.mud-button:disabled {
  color: #ffffff !important;
  opacity: 50%;
}

.mud-button-label {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  white-space: nowrap;
}
.mud-button-label .mud-button-icon-start {
  margin: 0;
}

.button-small {
  block-size: 1.5rem;
  flex-shrink: 0;
}

.button-secondary {
  color: #ed0000;
  background: transparent;
  box-shadow: inset 0 0 0 1px #ed0000;
}
.button-secondary:hover {
  color: #be0000;
  background: transparent;
  box-shadow: inset 0 0 0 1px #be0000;
}
.button-secondary:disabled {
  color: #ed0000 !important;
}

.button-tertiary {
  color: #ed0000;
  background: #ffffff;
}
.button-tertiary:hover {
  color: #be0000;
  background: #ffffff;
}
.button-tertiary:disabled {
  color: #ed0000 !important;
}

.mud-icon-button .mud-svg-icon {
  fill: #ed0000;
}
.mud-icon-button.icon-button-no-padding {
  padding: 0;
}

.mud-fab {
  flex-shrink: 0;
  block-size: 2.875rem;
  inline-size: 2.875rem;
  color: #ffffff;
  text-transform: none;
  background: #ed0000;
  box-shadow: none;
}
.mud-fab:hover {
  background: #be0000;
  box-shadow: none;
}
.mud-fab:disabled {
  opacity: 50%;
}
.mud-fab--small {
  block-size: 2rem;
  min-block-size: 0;
  inline-size: 2rem;
}

.icon-big {
  font-size: 8rem;
}

.image-container img {
  display: flex;
  block-size: 100%;
  inline-size: 100%;
  object-fit: contain;
}

.input-outline {
  margin: 0;
}
.input-outline .mud-input-control-input-container {
  border: 1px solid #b7cbd3;
  border-radius: 0.25rem;
}
.input-outline .mud-input-control-input-container .mud-input-text .mud-input-slot {
  padding-inline-start: 0.5rem;
}
.input-outline .mud-input-control-input-container .mud-input-adorned-end .mud-input-adornment {
  padding-inline: 0.5rem;
  color: #b7cbd3;
}

.mud-select {
  flex-grow: 0;
}
.mud-select .mud-input-control-input-container .mud-input .mud-input-slot {
  inline-size: fit-content;
}
.mud-select.select-icon .mud-input-control-input-container .mud-input .mud-input-slot {
  inline-size: 0;
}
.mud-select.select-full-size {
  inline-size: 100%;
}
.mud-select.select-full-size .mud-input-control {
  inline-size: 100%;
}
.mud-select.select-full-size .mud-input-control .mud-input-control-input-container {
  inline-size: 100%;
}
.mud-select.select-full-size .mud-input-control .mud-input-control-input-container .mud-input {
  inline-size: 100%;
  margin: 0;
}
.mud-select.select-full-size .mud-input-control .mud-input-control-input-container .mud-input .mud-input-slot {
  inline-size: 100%;
}
.mud-select.select-full-size .mud-input-control .mud-input-control-input-container .mud-input .mud-input-slot::placeholder {
  color: #b7cbd3;
}
.mud-select.select-full-size .mud-input-control .mud-input-control-input-container .mud-input .mud-input-adornment {
  padding-inline: 0.5rem;
}
.mud-select.select-full-size .mud-input-control .mud-input-control-input-container .mud-input .mud-input-adornment .mud-svg-icon {
  fill: #b7cbd3;
}
.mud-select.select-outline {
  margin: 0;
}
.mud-select.select-outline .mud-input-control {
  margin: 0;
}
.mud-select.select-outline .mud-input-control .mud-input-control-input-container {
  border: 1px solid #b7cbd3;
  border-radius: 0.25rem;
}
.mud-select.select-outline .mud-input-control .mud-input-control-input-container .mud-input .mud-input-slot {
  padding-inline-start: 0.5rem;
}

.mud-input-number-control.mud-input-showspin .mud-input-adornment-end {
  margin-inline-end: 1rem;
}
.mud-input-number-control.mud-input-showspin .mud-input-numeric-spin {
  padding-inline-start: 0.5rem;
}
.mud-input-number-control.mud-input-showspin .mud-input-numeric-spin .mud-button {
  background: transparent;
}
.mud-input-number-control.mud-input-showspin .mud-input-numeric-spin .mud-button .mud-svg-icon {
  fill: #b7cbd3;
}

.mud-list-item.mud-selected-item .mud-list-item-icon .mud-svg-icon {
  fill: #ed0000;
}

input[type=checkbox]:disabled + .mud-svg-icon {
  fill: #b7cbd3;
}

h1 {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

h2 {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
}

h3 {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
}

h4 {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

p {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

span {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

a.link {
  color: #ed0000;
  text-decoration: underline;
  cursor: pointer;
}

.mud-typography-body1 {
  font-family: Nunito, Arial, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
}
.alerts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alert {
  display: flex;
  gap: 0.5rem;
  block-size: fit-content;
  padding: 1rem;
  background: #ffe74f;
  border-radius: 0.5rem;
}
.alert__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-group {
  display: flex;
  gap: 1rem;
}
.button-group--right {
  justify-content: flex-end;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.25rem;
  background: #ffffff;
}
.card * {
  margin: 0;
}
.card .login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.card--login {
  min-inline-size: 20rem;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  padding: 1rem;
  border: 1px solid #b7cbd3;
  border-radius: 1.25rem;
}
.stat-card p {
  margin: 0;
}

.connected-user {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
}
.connected-user__infos {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.connected-user__name {
  color: #b7cbd3;
}

.item--checkbox {
  display: flex;
  align-items: center;
}

.loader {
  grid-column: span 2;
  margin: 2rem;
  max-inline-size: calc(100% - 4rem);
}

.mud-pagination {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  inline-size: 100%;
  padding: 1rem;
  border-block-start: 1px solid #b7cbd3;
}
.mud-pagination .mud-pagination-item {
  padding: 0;
  margin: 0;
}
.mud-pagination .mud-pagination-item .mud-button,
.mud-pagination .mud-pagination-item .mud-icon-button {
  background: transparent;
  min-block-size: 2rem;
  padding: 0;
  margin: 0;
  color: #374649;
  border: none;
  box-shadow: none;
}
.mud-pagination .mud-pagination-item .mud-button:disabled,
.mud-pagination .mud-pagination-item .mud-icon-button:disabled {
  color: #374649 !important;
  opacity: 0.5;
}
.mud-pagination .mud-pagination-item:not(.mud-pagination-item-selected) .mud-button-hover,
.mud-pagination .mud-pagination-item:not(.mud-pagination-item-selected) .mud-icon-button:hover {
  background: #b7cbd3;
}
.mud-pagination .mud-pagination-item-selected .mud-button,
.mud-pagination .mud-pagination-item-selected .mud-icon-button {
  color: #ffffff;
  background: #ed0000;
}

.mud-progress-linear {
  border-radius: 0.5rem;
}
.mud-progress-linear.horizontal.mud-progress-linear-small {
  block-size: 1rem;
}
.mud-progress-linear .mud-progress-linear-bars {
  border-radius: 0.5rem;
  background: #b7cbd3;
}
.mud-progress-linear .mud-progress-linear-bar {
  background: linear-gradient(90deg, #029beb 0%, #00aa61 100%);
  border-radius: 0.5rem;
}
.mud-progress-linear::before {
  border-radius: 0.5rem;
}
.mud-progress-linear span.progress-text {
  font-family: "Roboto Flex", Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #ffffff;
}

.mud-toolbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  block-size: 5.5rem;
  padding-block: 1rem;
  border-block-end: 1px solid #b7cbd3;
}

.details__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  inline-size: 100%;
  padding-block: 2rem;
  padding-inline: 2rem;
  border-block-end: 1px solid #b7cbd3;
}
.details__header-item {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 2rem;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
}
.details__header-item.back-button {
  display: none;
}
.details__header-left {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}
.details__header-right {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: auto;
}
.details__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.details__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}
.details__section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1rem;
}
.details__section .label {
  color: #b7cbd3;
}
.details__section .contact-infos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.details__section .name span {
  font-weight: 600;
}
.details__section .mail-phone,
.details__section .tva-city,
.details__section .products-info,
.details__section .zip-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 1024px) {
  .details__header {
    background: #f7f9fa;
  }
}
@media (max-width: 768px) {
  .details__header-item.back-button {
    display: flex;
  }
  .details__section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}
.mud-expansion-panels {
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
.mud-expansion-panels .mud-expand-panel {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  box-shadow: none;
}
.mud-expansion-panels .mud-expand-panel .mud-expand-panel-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  block-size: fit-content;
}
.mud-expansion-panels .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.mud-expansion-panels .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text .idea-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mud-expansion-panels .mud-expand-panel.mud-expand-panel-border {
  border-block-end: 1px solid #b7cbd3;
}
.mud-expansion-panels .mud-expand-panel.mud-panel-expanded {
  margin: 0;
}
.mud-expansion-panels .mud-expand-panel .mud-collapse-container {
  display: flex;
  animation-duration: 1ms;
}
.mud-expansion-panels.ideas {
  padding-inline-start: 1.5rem;
}

.new-lead-form,
.new-user-form,
.new-product-form,
.new-department-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  block-size: fit-content;
  inline-size: 100%;
  padding-block: 1rem;
  padding-inline: 2rem;
}
.new-lead-form .form-item,
.new-user-form .form-item,
.new-product-form .form-item,
.new-department-form .form-item {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #b7cbd3;
  cursor: pointer;
  pointer-events: all;
}
.new-lead-form .form-item .mud-select,
.new-user-form .form-item .mud-select,
.new-product-form .form-item .mud-select,
.new-department-form .form-item .mud-select {
  pointer-events: none;
}
.new-lead-form .form-item .mud-select button,
.new-user-form .form-item .mud-select button,
.new-product-form .form-item .mud-select button,
.new-department-form .form-item .mud-select button {
  position: relative;
  pointer-events: all;
}
.new-lead-form .form-item.mobile,
.new-user-form .form-item.mobile,
.new-product-form .form-item.mobile,
.new-department-form .form-item.mobile {
  display: none;
}
@media screen and (max-width: 1024px) {
  .new-lead-form .form-item.mobile,
  .new-user-form .form-item.mobile,
  .new-product-form .form-item.mobile,
  .new-department-form .form-item.mobile {
    display: flex;
  }
  .new-lead-form .form-item.desktop,
  .new-user-form .form-item.desktop,
  .new-product-form .form-item.desktop,
  .new-department-form .form-item.desktop {
    display: none;
  }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .new-lead-form .form-item.mobile,
  .new-user-form .form-item.mobile,
  .new-product-form .form-item.mobile,
  .new-department-form .form-item.mobile {
    display: flex;
  }
  .new-lead-form .form-item.desktop,
  .new-user-form .form-item.desktop,
  .new-product-form .form-item.desktop,
  .new-department-form .form-item.desktop {
    display: none;
  }
}
.new-lead-form .form-buttons,
.new-user-form .form-buttons,
.new-product-form .form-buttons,
.new-department-form .form-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.new-lead-form .form-buttons:last-child,
.new-user-form .form-buttons:last-child,
.new-product-form .form-buttons:last-child,
.new-department-form .form-buttons:last-child {
  margin-block-start: 2rem;
}

.login-form {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  block-size: 100%;
  inline-size: 100%;
}
.login-form .form-item {
  display: flex;
  flex-direction: column;
  color: #b7cbd3;
}
.login-form__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  block-size: 100%;
}
.login-form__content .mud-input-control {
  flex-grow: 0;
}
.login-form__content .link {
  align-self: end;
  text-align: end;
}
.login-form__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.list {
  inline-size: 100%;
}
.list__header {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: center;
  justify-content: start;
  inline-size: 100%;
  margin-block-end: 0.5rem;
}
.list__header .mud-input {
  display: flex;
  color: #b7cbd3;
  fill: #b7cbd3;
}
.list__header .mud-input .mud-input-root {
  inline-size: fit-content;
}
.list__header .mud-input .mud-input-adornment .mud-svg-icon {
  fill: #b7cbd3;
}
.list__header .select-icon {
  inline-size: fit-content;
  margin-inline-start: auto;
}
.list__items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.list__items:first-child {
  padding-block-start: 1.5rem;
}
.list__footer {
  display: flex;
  justify-content: center;
  margin-block-start: 0.5rem;
}

.mud-table__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.mud-table__header--right {
  justify-content: flex-end;
}

.mud-table-row.selected {
  box-shadow: inset 0.25rem 0 0 0 #ed0000;
}

.mud-table {
  overflow: hidden;
}

.content__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  block-size: 6rem;
  padding-inline: 2rem;
  background: #f7f9fa;
  border-block-end: 1px solid #b7cbd3;
}
.content__header .mud-fab {
  display: none;
}
.content__header .mud-button {
  margin-inline-start: auto;
}
.content__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  flex-grow: 0;
  block-size: calc(100dvh - 6rem);
  min-inline-size: 0;
}
.content__list {
  block-size: 100%;
  min-inline-size: 0;
  padding-block-start: 2rem;
  padding-block-end: 2rem;
  padding-inline: 2rem;
  border-inline-end: 1px solid #b7cbd3;
  overflow-y: auto;
}
.content__detail {
  block-size: 100%;
  min-inline-size: 0;
  overflow-y: auto;
}
.content__fullpage {
  grid-column: span 2;
  block-size: 100%;
  min-inline-size: 0;
  padding: 2rem;
  overflow-y: auto;
}
.content__fullpage--center {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .content__header {
    display: none;
  }
  .content__body {
    block-size: calc(100dvh - 4rem);
  }
}
@media (max-width: 768px) {
  .content__header .mud-button {
    display: none;
  }
  .content__header .mud-fab {
    display: flex;
  }
  .content__body {
    grid-template-columns: 1fr 1fr;
    inline-size: 200%;
  }
  .content__body.show {
    transform: translateX(-50%);
  }
  .content__list {
    border: none;
  }
}
.form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block-end: 2rem;
  border-block-end: 1px solid #b7cbd3;
}
.form-section label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
}
.form-section label svg {
  block-size: 1rem;
  inline-size: 1rem;
}
.form-section .file .mud-list-item-text p {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.form-buttons {
  display: flex;
  justify-content: end;
  gap: 1rem;
}

.mud-tooltip {
  max-inline-size: 20rem;
  font-size: 0.75rem;
}

.main-layout {
  position: relative;
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-block-size: 100dvh;
  inline-size: 100%;
}
.main-layout .mud-main-content {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr;
    padding-block-end: 4rem;
  }
}
.modal {
  min-inline-size: 24rem;
}

.mud-drawer:not(.mud-drawer-fixed) {
  position: sticky;
  inset-block-start: 0;
  block-size: 100dvh;
  overflow: hidden;
}

.sidebar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  block-size: 100dvw;
}
.sidebar__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  block-size: 6rem;
  inline-size: 100%;
  padding-inline: 2rem;
  color: #ed0000;
}
.sidebar__logo {
  block-size: 4rem;
}
.sidebar__body {
  flex-shrink: 1;
  min-block-size: 0;
  overflow-y: auto;
}
.sidebar__body .mud-nav-item {
  display: flex;
  align-items: center;
  block-size: 3rem;
}
.sidebar__body .mud-nav-item .mud-nav-link .mud-nav-link-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 1rem;
}

.slideout-container {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  block-size: 100dvh;
  inline-size: 100%;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  transform: translateX(100%);
  transition: all ease-out 0.5s;
}
.slideout-container .slideout {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  inline-size: fit-content;
  max-inline-size: 100dvw;
  min-inline-size: 20rem;
}
.slideout-container .slideout__header {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  padding-inline-end: 2rem;
  border-block-end: 1px solid #b7cbd3;
}
.slideout-container .slideout__header-left, .slideout-container .slideout__header-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.slideout-container .slideout__body {
  display: flex;
  overflow-y: auto;
}
.slideout-container .slideout__body .mud-file-upload .mud-button {
  inline-size: 100%;
}
.slideout-container.show {
  background: rgba(0, 0, 0, 0.5);
  transform: translateX(0);
}

.create-idea-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1rem;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  block-size: calc(100dvh - 6rem);
  overflow-y: auto;
}
.dashboard__header {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.dashboard__header h2 {
  flex-shrink: 0;
}
.dashboard__header .mud-fab {
  display: none;
}
.dashboard__body {
  display: flex;
  flex-direction: column;
}
.dashboard__stats {
  display: flex;
  gap: 1rem;
  inline-size: 100%;
}
.dashboard__stats .dashboard-objective__text {
  flex-shrink: 0;
}
.dashboard__numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  flex: 1 0 auto;
  padding-block: 2rem;
}
.dashboard__numbers .mud-button {
  grid-column: span 3;
}
.dashboard__numbers_4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  flex: 1 0 auto;
  padding-block: 2rem;
}
.dashboard__validated {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 2rem;
}
.dashboard__validated ul {
  border: 1px solid #b7cbd3;
  border-radius: 1rem;
}
.dashboard__validated ul li {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.dashboard__validated ul li:not(:last-child) {
  border-block-end: 1px solid #b7cbd3;
}

@media (max-width: 1024px) {
  .dashboard__body {
    block-size: calc(100dvh - 10rem);
  }
}
@media (max-width: 768px) {
  .dashboard__header .mud-button {
    display: none;
  }
  .dashboard__header .mud-fab {
    display: flex;
  }
  .dashboard__leads-list {
    inline-size: 100%;
  }
}
.login {
  display: grid;
  grid-template-columns: 1fr auto;
  block-size: 100dvh;
}
.login__image {
  block-size: 100dvh;
  inline-size: 100%;
}
.login__image img {
  display: flex;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}
.login__form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-inline-size: 33.3333333333dvw;
  padding: 4rem;
}
.login__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.login__header h1 {
  font-size: 6rem;
  font-weight: 700;
  color: #ed0000;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .login {
    grid-template-columns: 1fr;
  }
  .login__image {
    display: none;
  }
}
.page {
  display: grid;
  grid-template-columns: auto 1fr;
}