.guide__wrapper {
  width: 100%;
  max-width: 400px;
  padding: var(--space-m);
  background-color: var(--body-bg-color, var(--white));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  outline: none;
  transition: opacity .3s, visibility .3s;
  z-index: 9999;
  
  
}

@media (max-width: 992px) {
  .guide__wrapper {
    
    padding: var(--space-s);
  }
}

.guide__wrapper[data-popper-placement^=top] {
  transform: translateY(-15px);
}

.guide__wrapper[data-popper-placement^=bottom] {
  transform: translateY(15px);
}

.guide__wrapper[data-popper-placement^=right] {
  transform: translateX(15px);
}

.guide__wrapper[data-popper-placement^=left] {
  transform: translateX(-15px);
}

.shepherd-arrow[data-popper-arrow]:before {
  background-color: var(--body-bg-color, var(--white)) !important;
}

.guide__header {
  display: flex;
  align-items: center;
}

.guide__title {
  font-size: var(--text-l);
}

button.guide__cancel-icon {
  background: transparent;
  margin-left: auto;
  border: none;
  color: var(--text-dark-muted);
  cursor: pointer;
  font-size: var(--text-xxl);
  line-height: var(--text-l);
  font-weight: 400;
  padding: 0;
  transition: color .5s ease;
}

.guide__content {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
}

.guide__text {
  font-size: var(--text-m);
}

.guide__footer {
  display: flex;
  justify-content: flex-end;
  column-gap: var(--space-s);
}

button.guide__button.btn--primary {
  padding: 8px 0;
  min-inline-size: calc(var(--btn-min-width)/1.3);
}