.navds-guide-panel {
  --__ac-guide-panel-guide-size: 4rem;

  position: relative;
  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
}

.navds-guide {
  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
  border-radius: var(--a-border-radius-full);
  overflow: hidden;
  position: absolute;
  width: var(--__ac-guide-panel-guide-size);
  height: var(--__ac-guide-panel-guide-size);
  left: 50%;
  transform: translate(-50%, -50%);
}

.navds-guide svg,
.navds-guide img {
  height: 100%;
  width: 100%;
}

.navds-guide-panel__content {
  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
  border-radius: var(--a-border-radius-large);
  padding: var(--a-spacing-4);
  padding-top: var(--a-spacing-12);
}

@media (min-width: 480px) {
  .navds-guide-panel {
    --__ac-guide-panel-guide-size: 6.25rem;
  }

  .navds-guide-panel__content {
    padding: var(--a-spacing-8);
    padding-top: 4.25rem;
  }
}

/* not-poster */

.navds-guide-panel--not-poster {
  padding-top: 0;
  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
}

.navds-guide-panel--not-poster .navds-guide {
  left: 0;
  top: var(--a-spacing-5);
  transform: none;
}

.navds-guide-panel--not-poster .navds-guide-panel__content {
  padding: var(--a-spacing-4);
  padding-left: var(--a-spacing-10);
  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
}

@media (min-width: 480px) {
  .navds-guide-panel--not-poster {
    --__ac-guide-panel-guide-size: 5rem;
  }

  .navds-guide-panel--not-poster .navds-guide-panel__content {
    padding: var(--a-spacing-6);
    padding-left: var(--a-spacing-14);
  }
}

/* responsive-poster (on desktop) */

@media (min-width: 480px) {
  .navds-guide-panel--responsive-poster {
    --__ac-guide-panel-guide-size: 5rem;

    padding-top: 0;
    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
  }

  .navds-guide-panel--responsive-poster .navds-guide {
    left: 0;
    top: var(--a-spacing-5);
    transform: none;
  }

  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
    padding: var(--a-spacing-6);
    padding-left: var(--a-spacing-14);
    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
  }
}
