/* stylelint-disable no-descending-specificity */
.wizard-welcome-page {
  --page-content-limit: 1120px;

  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: center;
  min-height: 100vh;

  & > .wizard-top:not(.closeable) {
    padding-top: 28px;
    border-bottom: 0;
  }

  background-color: var(--bg-muted);

  & > .content {
    display: grid;
    grid-template-columns: 667fr 443fr;
    border-radius: var(--radius-xxl);
    background-color: var(--bg-default);
    box-shadow: var(--menu-shadow);
    overflow: hidden;
    width: 100%;
    max-width: 1110px;
    min-height: 657px;

    & > .main-track {
      box-sizing: border-box;
      padding: var(--spacing-4xl);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top-content {
        h1 {
          font: var(--t-title-h1);
          color: var(--fg-default);
        }
      }
    }

    .media-track {
      height: 100%;
      width: 100%;
      max-width: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(157deg, #e6e6ff -2.15%, #8cadff 102.56%);
      background-repeat: no-repeat;
      background-size: cover;

      img {
        position: absolute;
      }

      #default-globe-media-image {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 80px -80px;
      }

      video {
        width: 100%;
        min-height: 657px;
        min-width: 443px;
        object-fit: cover;
      }
    }

    #docs-card {
      display: grid;
      grid-template-columns: 54px 1fr;
      background-color: transparent;
      border: var(--border-1) solid var(--border-disabled);
      border-radius: var(--radius-lg);
      padding: var(--spacing-md);
      column-gap: var(--spacing-2xl);

      .image-track {
        width: 100%;
        max-width: 100%;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      .content {
        display: flex;
        flex-flow: column;
        row-gap: var(--spacing-sm);

        p {
          font: var(--t-body-sm-400);
          color: var(--fg-muted);
        }
      }
    }
  }

  & > .footer {
    grid-row: 5;
    margin: 24px auto;
    display: flex;
    justify-content: space-between;
    max-width: 1110px;
    width: 100%;

    & > p,
    a {
      color: var(--fg-muted);
      font: var(--t-body-xs-400);
    }

    .mail {
      color: var(--fg-action);
    }
  }
}
