.guide-gallery {
  position: relative;
  background: #081b2e;
}

.guide-gallery-viewport {
  overflow: hidden;
}

.guide-gallery-track {
  display: flex;
  transition: transform .45s cubic-bezier(.22, .8, .22, 1);
}

.guide-gallery figure {
  flex: 0 0 100%;
  margin: 0;
  background: #081b2e;
}

.guide-gallery figure img {
  display: block;
  width: 100%;
  height: 385px;
  object-fit: contain;
  background: #061522;
}

.guide-shot {
  position: relative;
}

.shot-highlight {
  position: absolute;
  z-index: 2;
  border: 5px solid #ef2f39;
  border-radius: 12px;
  background: #ef2f3912;
  box-shadow: 0 0 0 4px #ffffffb8, 0 8px 24px #7b081b55;
  pointer-events: none;
  animation: guide-highlight 1.8s ease-in-out infinite;
}

.shot-highlight.exe-file { left: .6%; top: 53%; width: 14%; height: 16%; }
.shot-highlight.new-school { left: 41.7%; top: 47%; width: 16.5%; height: 24%; }
.shot-highlight.login-choice { left: 25.2%; top: 47%; width: 16%; height: 24%; }
.shot-highlight.login-fields { left: 36.2%; top: 41%; width: 27.5%; height: 29%; }
.shot-highlight.download-package { left: 55.2%; top: 58.4%; width: 35.6%; height: 28.5%; }
.shot-highlight.restore-choice { left: 58.7%; top: 47%; width: 16.5%; height: 24%; }
.shot-highlight.restore-fields { left: 36.2%; top: 44%; width: 27.5%; height: 29%; }
.shot-highlight.teacher-mobile-key { left: 17.4%; top: 48.7%; width: 32.2%; height: 49.5%; }

@keyframes guide-highlight {
  0%, 100% { box-shadow: 0 0 0 4px #ffffffb8, 0 8px 24px #7b081b55; }
  50% { box-shadow: 0 0 0 8px #ef2f3935, 0 10px 30px #7b081b77; }
}

.guide-gallery figcaption {
  min-height: 86px;
  padding: 17px 20px;
  background: #fff;
}

.guide-gallery figcaption b,
.guide-gallery figcaption span {
  display: block;
}

.guide-gallery figcaption b {
  color: #10273a;
  font-size: 14px;
}

.guide-gallery figcaption span {
  margin-top: 6px;
  color: #687b8f;
  font-size: 12px;
  line-height: 1.55;
}

.guide-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #dce5ed;
  background: #f7fafc;
}

.guide-gallery-controls > button {
  width: 38px;
  height: 34px;
  border: 1px solid #cad9e4;
  border-radius: 8px;
  background: #fff;
  color: #1b639f;
  font-size: 17px;
  cursor: pointer;
}

.guide-gallery-controls > button:hover {
  border-color: #176fd6;
  color: #176fd6;
}

.guide-gallery-dots {
  display: flex;
  gap: 7px;
}

.guide-gallery-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #b8c9d7;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.guide-gallery-dots button.active {
  width: 24px;
  border-radius: 5px;
  background: #176fd6;
}

@media (max-width: 850px) {
  .guide-gallery figure img {
    height: auto;
    max-height: 430px;
  }
}

@media (max-width: 520px) {
  .guide-gallery figure img {
    height: 245px;
  }

  .guide-gallery figcaption {
    min-height: 105px;
    padding: 14px;
  }

  .guide-gallery figcaption b {
    font-size: 13px;
  }

  .shot-highlight {
    border-width: 3px;
    border-radius: 7px;
  }

}