/* Desktop comes directly from Pencil. These overrides activate only on compact screens. */
[data-pencil-id="lbeYt"] {
  margin-inline: auto;
}

[data-slider-track] {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

[data-slider-track]::-webkit-scrollbar {
  display: none;
}

[data-slider-track] > * {
  scroll-snap-align: start;
}

[data-slider-control] {
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease;
}

[data-slider-control]:hover {
  transform: scale(1.05);
}

[data-slider-control]:focus-visible {
  outline: 3px solid #4c3d7c;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: #f8f8f8;
  }

  [data-pencil-id="lbeYt"] {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    gap: 56px !important;
    padding: 0 16px 40px !important;
    overflow: visible !important;
  }

  [data-pencil-id="jaMgT"],
  [data-pencil-id="o02BY"],
  [data-pencil-id="z27Rz9"],
  [data-pencil-id="xK0qw"],
  [data-pencil-id="d4bqL"],
  [data-pencil-id="RzEUK"],
  [data-pencil-id="oqNsr"],
  [data-pencil-id="g9agE6"],
  [data-pencil-id="U5rm3P"] {
    width: 100% !important;
  }

  [data-pencil-id="jaMgT"] {
    gap: 40px !important;
  }

  [data-pencil-id="z2yRFO"] {
    gap: 20px !important;
  }

  [data-pencil-id="Y3GkI"] {
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 18px !important;
  }

  [data-pencil-id="BiW9m"],
  [data-pencil-id="YK3Cr"] > :not(:last-child) {
    display: none !important;
  }

  [data-pencil-id="Mm4AP"] {
    height: 36px !important;
    padding: 8px 12px !important;
  }

  [data-pencil-id="U5rm3P"] {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  [data-pencil-id="aIItq"],
  [data-pencil-id="J3EFx"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  [data-pencil-id="aIItq"] {
    gap: 24px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  [data-pencil-id="J3EFx"] {
    height: 420px !important;
    border-radius: 24px !important;
  }

  [data-pencil-id="yWoRA"] {
    font-size: 34px !important;
    line-height: 40px !important;
  }

  [data-pencil-id="Eb7Cr"] {
    width: 100% !important;
  }

  [data-pencil-id="g9agE6"] {
    height: 108px !important;
  }

  [data-pencil-id="g9agE6"] > * {
    width: 100% !important;
    height: 108px !important;
  }

  [data-pencil-id="EsGh1"] {
    left: 50% !important;
    top: 44px !important;
    transform: translateX(-50%) !important;
  }

  [data-pencil-id="o02BY"],
  [data-pencil-id="xK0qw"],
  [data-pencil-id="d4bqL"] {
    gap: 24px !important;
  }

  [data-pencil-id="J7TnF"],
  [data-pencil-id="icR7K"],
  [data-pencil-id="LtcLp"],
  [data-pencil-id="wZaaK"],
  [data-pencil-id="e4V6I"] {
    width: 100% !important;
    font-size: 32px !important;
    line-height: 38px !important;
  }

  [data-pencil-id="VitA8"] {
    gap: 16px !important;
  }

  [data-pencil-name^="Курсы — ряд"] {
    flex-direction: column !important;
    gap: 16px !important;
  }

  [data-pencil-name="course card"] {
    width: 100% !important;
    height: auto !important;
  }

  [data-pencil-name="course card"] > div:nth-child(2) {
    padding: 20px !important;
  }

  [data-pencil-name="course card"] [data-pencil-name="Frame 1000003830"] {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  [data-pencil-name="course card"] [data-pencil-name="button"] {
    flex: 1 1 140px !important;
  }

  [data-pencil-id="z27Rz9"] {
    gap: 16px !important;
  }

  [data-pencil-id="FYLBp"] {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  [data-pencil-id="djBkg"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 120px !important;
    align-self: center;
  }

  [data-pencil-id="djBkg"] > * {
    width: 310px !important;
    height: 120px !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%);
  }

  [data-pencil-id="rffj9"] {
    gap: 16px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  [data-pencil-id="NP7Uc"] {
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  [data-pencil-id="NP7Uc"] > * {
    min-height: 124px !important;
    padding: 14px !important;
  }

  [data-pencil-id="joHKV"] {
    display: none !important;
  }

  [data-pencil-id="CH6Lc"],
  [data-pencil-id="YrkYu"] {
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  [data-pencil-id="CH6Lc"] {
    height: auto !important;
  }

  [data-pencil-name="course expert"] {
    width: 84vw !important;
    min-width: 84vw !important;
    height: auto !important;
    min-height: 242px !important;
  }

  [data-pencil-name="course expert"] [data-pencil-name="Rectangle 15"] {
    width: 34% !important;
  }

  [data-pencil-name="course review"] {
    width: 84vw !important;
    min-width: 84vw !important;
  }

  [data-pencil-id="v2ZOS"],
  [data-pencil-id="eY4NC"] {
    gap: 16px !important;
  }

  [data-slider-control] {
    width: 48px !important;
    height: 48px !important;
  }

  [data-pencil-id="RzEUK"] {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  [data-pencil-id="LKnwB"],
  [data-pencil-id="hJADs"] {
    width: 100% !important;
  }

  [data-pencil-id="hJADs"] {
    padding: 24px !important;
  }

  [data-pencil-id="TPJU5"] {
    white-space: normal !important;
    font-size: 22px !important;
    line-height: 28px !important;
  }

  [data-pencil-id="RzEUK"] > [data-pencil-id="oy1m5"],
  [data-pencil-id="RzEUK"] > [data-pencil-id="uvAZB"],
  [data-pencil-id="RzEUK"] > [data-pencil-id="Dhkor"] {
    display: none !important;
  }

  [data-pencil-id="oqNsr"] {
    gap: 24px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  [data-pencil-id="aB2Nb"],
  [data-pencil-id="RmT7h"] {
    flex-direction: column !important;
    gap: 24px !important;
  }

  [data-pencil-id="vWN3x"] {
    width: 322px !important;
  }
}