Сбер.Среда

Сбер.Среда: Лето накануне универа

<ResponsiveStyle
  common="
    .flex-cont {
      display: flex;
      justify-content: space-between;
    }
    .what-container {
      position: relative;
      margin: 0 0 50px;
    }
    .what-title-container {
      border-radius: 10px;
      background: #62ECFF;
      padding: 8px 32px 6px 48px;
      width: fit-content;
      position: relative;
      top: 0;
      left: -32px;
      margin: 0 0 50px;
    }
    .what-title-container-meetup {
      border-radius: 10px;
      background: #62ECFF;
      padding: 7px 14px;
      width: fit-content;
      position: static;
      top: 0;
      left: -32px;
      margin: 0 0 50px;
      height: fit-content;
    }
    .meetup {
      width: fit-content;
      font-family: SB Sans Display Extended;
      color: #000;
    }
    .what-title {
      width: fit-content;
      font-family: SB Sans Display Extended;
      font-weight: 600;
      font-size: 64px;
      line-height: 100%;
      color: #000;
      margin: 0;
    }
    .what-text {
      color: #000;
      font-size: 36px;
      line-height: 94%;
      letter-spacing: -0.88px;
      width: 62%;
    }
    .what-card {
      border-radius: 20px;
      padding: 32px;
      background: #62ECFF;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      gap: 16px;
    }
    .what-card-title {
      margin: 0;
      font-weight: 600;
      font-family: SB Sans Display Extended;
      font-size: 64px;
      line-height: 100%;
      letter-spacing: 0;
      color: #000;
    }
    .what-card-text {
      margin: 0;
      color: #000;
      font-family: SB Sans Display;
      font-weight: 400;
      font-size: 32px;
      line-height: 94%;
      letter-spacing: -0.88px;
    }
    .what-card-icon {
      width: 100%;
      height: auto;
      max-width: 90px;
    }
    .what-image {
      display: block;
      width: 40%;
      height: auto;
      max-width: 513px;
      position: absolute;
      right: -48px;
      bottom: 150px;
    }
    .what-image-m {
      display: none;
    }
    .what-cards {
      gap: 28px;
    }
    .program-list {
      list-style: none;
      padding: 0;
      margin: 12px 0 0;
    }
    .program-list li {
      position: relative;
      padding-left: 24px;
      margin-bottom: 8px;
      font-size: 36px;
      line-height: 94%;
      letter-spacing: -0.88px;
      color: #000;
    }
    .program-list li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #000;
    }
    .program-list li:last-child {
      margin-bottom: 0;
    }
  "
  L="
    .flex-cont {
      flex-direction: column;
    }
    .what-title-container {
      padding: 8px 24px 4px 12px;
      margin: 0 0 30px;
      left: 0;
    }
    .what-title-container-meetup {
      margin: 0 0 30px;
    }
  "
  M="
    .what-card {
      border-radius: 16px;
      padding: 24px;
      gap: 12px;
      grid-column-end: span 2;
    }
    .what-cards {
      gap: 24px;
    }
    .what-title {
      font-size: 48px;
    }
    .what-text {
      width: 100%;
      font-size: 28px;
    }
    .what-title-container {
      margin: 0 0 16px;
    }
    .what-title-container-meetup {
      padding: 6px 10px;
    }
    .what-container {
      margin: 0 0 24px;
    }
    .what-image {
      display: none;
    }
    .what-image-m {
      display: block;
      margin: 0 0 24px;
      width: 100%;
      height: auto;
    }
    .what-card-title {
      font-size: 48px;
    }
    .what-card-text {
      font-size: 28px;
    }
    .what-card-icon {
      max-width: 65px;
    }
    .program-list li {
      font-size: 28px;
    }
  "
  S="
    .what-cards {
      gap: 12px;
    }
    .what-card {
      border-radius: 10px;
      padding: 12px 16px;
      gap: 12px;
    }
    .what-card-title {
      font-size: 28px;
    }
    .what-card-text {
      font-size: 16px;
    }
    .what-card-icon {
      max-width: 45px;
    }
    .what-text {
      font-size: 16px;
    }
    .what-title {
      font-size: 20px;
    }
    .program-list li {
      font-size: 16px;
      padding-left: 18px;
      margin-bottom: 4px;
    }
  "
/>
<div className="what-container">
  <div className="flex-cont">
    <div className="what-title-container">
      <DsplS className="what-title">
        Сбер.Среда: Лето накануне универа
      </DsplS>
    </div>
    <div className="what-title-container-meetup">
      <h3 className="meetup" style={{ margin: 0 }}>офлайн</h3>
    </div>
  </div>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/9c1c5eae__1_.png"
    className="what-image-m"
    alt=""
  />
  <TextL className="what-text">
    30 августа встречаемся в Сбер.Среде со стажёрами Сбера, участниками
    лидерской программы «МАЯКИ», студентами-амбассадорами, студентами совместных
    образовательных программ и другими ребятами. Это возможность познакомиться
    с теми, кто тоже совмещает учёбу с первыми карьерными шагами, интересуется
    технологиями, пробует новое и уже строит планы на следующий учебный год.
    <br /><br />
    <strong>В программе:</strong>
    <ul className="program-list">
      <li>встреча с командой Центра стажировок — поговорим о карьерных возможностях в Сбере и зададим все волнующие вопросы;</li>
      <li>лекция от ИТ-команды Сбера про вайбкодинг;</li>
      <li>мастер-класс по созданию брелков из кейкапов;</li>
      <li>фотозоны и другие активности;</li>
      <li>подарки, DJ-сеты, еда и много общения;</li>
      <li>розыгрыш 5 лимитированных летних мерч-паков Сбера.</li>
    </ul>
  </TextL>
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/9c1c5eae__1_.png"
    className="what-image"
    alt=""
  />
</div>
<Grid columns={12} className="what-cards">
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">30.08</h2>
    <TextL className="what-card-text">дата</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">11:00</h2>
    <TextL className="what-card-text">начало</TextL>
  </Cell>
  <Cell width={4} className="what-card">
    <h2 className="what-card-title">100</h2>
    {/* <img
      src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/8846e18c_infinity.svg"
      className="what-card-icon"
      alt=""
    /> */}
    <TextL className="what-card-text">мест</TextL>
  </Cell>
</Grid>

<ResponsiveStyle
  common="
  .padding-cell-2 {
    padding: 20px 0 0 30px;
  }
  .header1 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 4em;
    font-weight: 600;
  }
  .header3 {
    margin: 0;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
  }
  .little-text {
    margin: 0;
    font-family: SB Sans Text, Roboto;
    font-size: 1.5em;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .section-header {
    margin-left: -1.938em;
    padding: 0.75em 0.625em 0.625em 1.938em;
    border-radius: 0.625em;
  }
  .green-highlighted-text {
    background-color: #62ECFF;
  }
  .about-us {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    margin: 0 auto;
    font-size: clamp(4.676px, calc(1.078507vw + 0.469498px), 16px) !important;
  }
  .schedule-item {
    display: flex;
    gap: 2em;
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .schedule-item:last-child {
    border-bottom: none;
  }
  .schedule-time {
    min-width: 5em;
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #000;
  }
  .schedule-content {
    flex: 1;
  }
  .schedule-title {
    font-family: SB Sans Display Extended, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #000;
    margin: 0 0 0.25em 0;
  }
  .schedule-speaker {
    font-family: SB Sans Text, Roboto;
    font-size: 1.125em;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
  }
  "
  S="
  .padding-cell-2 {
    padding: 26px 0 0 5px;
  }
  .header1 {
    font-size: 20px;
  }
  .schedule-item {
    flex-direction: column;
    gap: 1.25em;
    padding: 0.75em 0;
  }
  .schedule-time {
    font-size: 2.2em;
  }
  .schedule-title {
    font-size: 2em;
    margin: 0 0 0.5em 0;
  }
  .schedule-speaker {
    font-size: 2em;
  }
  "
/>
<Grid>
  <Cell width={12} className='padding-cell-2'>
    <div className="about-us">
      <div style={{ color: "#000" }}>
        <div className="section-header green-highlighted-text">
          <div className="header1">Расписание</div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">11:00</div>
        <div className="schedule-content">
          <div className="schedule-title">Сбор гостей на веранде</div>
          <div className="schedule-speaker">Музыка, закуски и напитки, знакомства и активности с ведущим</div>
        </div>
      </div> 
      <div className="schedule-item">
        <div className="schedule-time">12:00</div>
        <div className="schedule-content">
          <div className="schedule-title">Встреча с командой Центра стажировок Сбера</div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">13:00</div>
        <div className="schedule-content">
          <div className="schedule-title">Лекция про вайбкодинг от IT-команды Сбера</div>
          <div className="schedule-speaker"></div>
        </div>
      </div>
      <div className="schedule-item">
        <div className="schedule-time">13:30</div>
        <div className="schedule-content">
          <div className="schedule-title">Мастер-класс, еда, музыка, свободное общение</div>
          <div className="schedule-speaker">Вручение 5 лимитированных мерч-паков</div>
        </div>
      </div>
    </div>
  </Cell>
</Grid>

name

<ResponsiveStyle
  common={
    ".event-photos { --ep-green: #5cff8d; --ep-black: #080808; --ep-radius-card: 20px; --ep-radius-section: 40px; --ep-aspect-active: 255 / 313; --ep-slide-active-w: 90%; --ep-slide-inactive-w: 90%; --ep-slide-active-h: 313px; --ep-slide-inactive-h: 281px; box-sizing: border-box; width: 100%; margin: 0 auto; padding: 68px 57px 56px; background: #fff; border-radius: var(--ep-radius-section); text-align: center; } .event-photos__title { margin: 0 0 36px !important; font-family: 'SB Sans Display Extended', 'SB Sans Text', system-ui, sans-serif !important; font-weight: 600; color: var(--ep-black) !important; } .event-photos__source { display: none; } .event-photos__desktop { display: block; width: 100%; } .event-photos__mobile { display: none; } .event-photos__desktop-fit { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; min-height: 313px; box-sizing: border-box; } .event-photos__desktop-gallery { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 0 auto; box-sizing: border-box; } .event-photos__desktop-item { flex: 0 0 auto; border-radius: var(--ep-radius-card); overflow: hidden; background: #ececec; height: auto; box-sizing: border-box; } .event-photos__desktop-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .event-photos__desktop-item[data-size='sm'] { width: 120px; aspect-ratio: 120 / 177; } .event-photos__desktop-item[data-size='md'] { width: 145px; aspect-ratio: 145 / 214; } .event-photos__desktop-item[data-size='lg'] { width: 175px; aspect-ratio: 175 / 259; } .event-photos__desktop-item[data-size='xl'] { width: 204px; aspect-ratio: 204 / 281; } .event-photos__desktop-item[data-size='xxl'] { width: 255px; aspect-ratio: var(--ep-aspect-active); } .event-photos__desktop-nav { display: none; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; } .event-photos__desktop-nav.is-visible { display: flex; } .event-photos__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 51px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; box-sizing: border-box; } .event-photos__nav-btn svg { display: block; width: 100%; height: 100%; } .event-photos__nav-btn--prev svg { transform: scaleX(-1); } .event-photos__footer { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; max-width: 1066px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; } .event-photos__footer:hover { color: #080808 !important;} .event-photos__decor-arrow { display: none; } .event-photos__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 55px; padding: 16px 32px; border-radius: 10px; background: var(--ep-green); color: var(--ep-black); font-family: 'SB Sans Text', system-ui, sans-serif; font-size: 24px; line-height: 1; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; box-sizing: border-box; } .event-photos__cta:hover { filter: brightness(0.96); }"
  }
  M={
    ".event-photos { padding: 30px 0 24px; border-radius: 12px; } .event-photos__title { margin: 0 0 20px; padding: 0 20px; font-size: 24px; line-height: 1.1; } .event-photos__desktop { display: none; } .event-photos__mobile { display: block; } .event-photos__slider { overflow: hidden; min-height: var(--ep-slide-active-h); } .event-photos__slider-track { display: flex; align-items: flex-end; gap: 8px; min-height: var(--ep-slide-active-h); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 calc((100% - var(--ep-slide-active-w)) / 2); box-sizing: border-box; } .event-photos__slider-track.is-jumping .event-photos__slide { transition: none !important; } .event-photos__slider-track::-webkit-scrollbar { display: none; } .event-photos__slide { flex: 0 0 var(--ep-slide-inactive-w); scroll-snap-align: center; border-radius: var(--ep-radius-card); overflow: hidden; background: #ececec; height: var(--ep-slide-inactive-h); transition: height 0.25s ease; box-sizing: border-box; } .event-photos__slide.is-active { height: var(--ep-slide-active-h); } .event-photos__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .event-photos__mobile-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 20px 0 16px; } .event-photos__footer { margin-top: 0; padding: 0 20px; } .event-photos__cta { display: flex; width: 100%; min-height: 47px; font-size: 16px; white-space: normal; }"
  }
/>

<section className="event-photos" id="event-photos-gallery">
  <H2 className="event-photos__title">Фотографии с мероприятия</H2>
  <div class="event-photos__source" data-event-photos-source aria-hidden="true">
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/38bce66a_Images-1.png"
        alt="Фото с мероприятия 1"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/16d45b76_Images-2.png"
        alt="Фото с мероприятия 2"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/a3da2c17_Images-3.png"
        alt="Фото с мероприятия 3"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/cf5db2bc_Images-4.png"
        alt="Фото с мероприятия 4"
        loading="lazy"
      />
    </figure>
    <figure className="event-photos__item">
      <img
        src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/81f2ced6_Images.png"
        alt="Фото с мероприятия 5"
        loading="lazy"
      />
    </figure>
  </div>
  <div className="event-photos__desktop">
    <div className="event-photos__desktop-fit">
      <div
        className="event-photos__desktop-gallery"
        data-event-photos-desktop
      ></div>
    </div>
    <div className="event-photos__desktop-nav" data-event-photos-desktop-nav>
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--prev"
        data-event-photos-desktop-prev
        aria-label="Предыдущие фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--next"
        data-event-photos-desktop-next
        aria-label="Следующие фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
  </div>
  <div className="event-photos__mobile">
    <div className="event-photos__slider">
      <div className="event-photos__slider-track" data-event-photos-track></div>
    </div>
    <div className="event-photos__mobile-nav">
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--prev"
        data-event-photos-prev
        aria-label="Предыдущее фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <button
        type="button"
        className="event-photos__nav-btn event-photos__nav-btn--next"
        data-event-photos-next
        aria-label="Следующее фото"
      >
        <svg
          viewBox="0 0 51 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path d="M0 10H45" stroke="#5CFF8D" stroke-width="3" />
          <path
            d="M36 2L45 10L36 18"
            stroke="#5CFF8D"
            stroke-width="3"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
  </div>
  <div className="event-photos__footer">
    <a
      className="event-photos__cta"
      href="ALL_PHOTOS_URL"
      target="_blank"
      rel="noopener noreferrer"
    >
      Смотреть все фотографии
    </a>
  </div>
</section>

<Script id="event-photos-gallery-init" strategy="afterInteractive">
  {`
(function () {
  let root = document.getElementById('event-photos-gallery');
  if (!root || root.dataset.initialized === 'true') return;
  root.dataset.initialized = 'true';

  let source = root.querySelector('[data-event-photos-source]');
  let desktop = root.querySelector('[data-event-photos-desktop]');
  let desktopNav = root.querySelector('[data-event-photos-desktop-nav]');
  let desktopPrev = root.querySelector('[data-event-photos-desktop-prev]');
  let desktopNext = root.querySelector('[data-event-photos-desktop-next]');
  let track = root.querySelector('[data-event-photos-track]');
  let mobilePrev = root.querySelector('[data-event-photos-prev]');
  let mobileNext = root.querySelector('[data-event-photos-next]');

  if (!source || !desktop || !track) return;

  let items = Array.prototype.slice.call(source.querySelectorAll('.event-photos__item'));
  if (!items.length) return;

  let photos = items.map(function (item, index) {
    let img = item.querySelector('img');
    return {
      src: img ? img.getAttribute('src') : '',
      alt: img ? (img.getAttribute('alt') || ('Фото ' + (index + 1))) : ('Фото ' + (index + 1))
    };
  });

  let DESKTOP_WINDOW = 5;
  let desktopCenter = Math.min(Math.floor(DESKTOP_WINDOW / 2), photos.length - 1);
  let MOBILE_LOOP_LEADING = 2;
  let mobileRealIndex = 0;
  let mobileJumping = false;
  let mobileNavScrolling = false;
  let scrollTimer;

  function setTrackJumping(jumping) {
    track.classList.toggle('is-jumping', jumping);
  }

  function setActiveSlide(loopIndex) {
    getMobileSlides().forEach(function (item, i) {
      item.classList.toggle('is-active', i === loopIndex);
    });
  }

  function isDesktopLayout() {
    return window.matchMedia('(min-width: 1024px)').matches;
  }

  function getSlotSize(total, slotIndex) {
    let centerSlot = Math.floor(total / 2);
    let distance = Math.abs(slotIndex - centerSlot);

    if (total === 1) return 'xxl';
    if (total === 2) return distance === 0 ? 'xxl' : 'lg';
    if (total === 3) return distance === 0 ? 'xxl' : 'md';
    if (total === 4) {
      if (distance === 0) return 'xxl';
      if (distance === 1) return 'lg';
      return 'sm';
    }

    if (distance === 0) return 'xxl';
    if (distance === 1) return 'lg';
    if (distance === 2) return 'md';
    return 'sm';
  }

  function renderDesktop() {
    desktop.innerHTML = '';

    let total = photos.length;
    if (!total) return;

    let useWindow = total > DESKTOP_WINDOW;
    let visibleCount = useWindow ? DESKTOP_WINDOW : total;
    let half = Math.floor(visibleCount / 2);

    for (let i = 0; i < visibleCount; i += 1) {
      let photoIndex = useWindow ? (desktopCenter + i - half + total * 100) % total : i;
      let photo = photos[photoIndex];
      let figure = document.createElement('figure');
      figure.className = 'event-photos__desktop-item';
      figure.setAttribute('data-size', getSlotSize(visibleCount, i));

      let img = document.createElement('img');
      img.src = photo.src;
      img.alt = photo.alt;
      img.loading = 'lazy';

      figure.appendChild(img);
      desktop.appendChild(figure);
    }

    if (desktopNav) {
      desktopNav.classList.toggle('is-visible', total > DESKTOP_WINDOW);
    }
  }

  function createMobileSlide(photo) {
    let figure = document.createElement('figure');
    figure.className = 'event-photos__slide';

    let img = document.createElement('img');
    img.src = photo.src;
    img.alt = photo.alt;
    img.loading = 'lazy';

    figure.appendChild(img);
    return figure;
  }

  function getMobileSlides() {
    return track.querySelectorAll('.event-photos__slide');
  }

  function renderMobile() {
    track.innerHTML = '';

    if (!photos.length) return;

    if (photos.length === 1) {
      track.appendChild(createMobileSlide(photos[0]));
      return;
    }

    let n = photos.length;
    track.appendChild(createMobileSlide(photos[(n - 2 + n) % n]));
    track.appendChild(createMobileSlide(photos[n - 1]));
    photos.forEach(function (photo) {
      track.appendChild(createMobileSlide(photo));
    });
    track.appendChild(createMobileSlide(photos[0]));
    track.appendChild(createMobileSlide(photos[1 % n]));
  }

  function isMobileCloneIndex(loopIndex) {
    if (photos.length <= 1) return false;
    return loopIndex < MOBILE_LOOP_LEADING || loopIndex >= MOBILE_LOOP_LEADING + photos.length;
  }

  function loopIndexToReal(loopIndex) {
    if (photos.length <= 1) return 0;

    let n = photos.length;

    if (loopIndex < MOBILE_LOOP_LEADING) {
      return (n - MOBILE_LOOP_LEADING + loopIndex + n) % n;
    }

    if (loopIndex >= MOBILE_LOOP_LEADING + n) {
      return loopIndex - MOBILE_LOOP_LEADING - n;
    }

    return loopIndex - MOBILE_LOOP_LEADING;
  }

  function realToLoopIndex(realIndex) {
    if (photos.length <= 1) return 0;
    return MOBILE_LOOP_LEADING + realIndex;
  }

  function getMobileNormalizeTarget(loopIndex) {
    if (photos.length <= 1 || !isMobileCloneIndex(loopIndex)) return null;

    let n = photos.length;

    if (loopIndex === 0) {
      return { index: MOBILE_LOOP_LEADING + ((n - 2 + n) % n), real: (n - 2 + n) % n };
    }

    if (loopIndex === 1) {
      return { index: MOBILE_LOOP_LEADING + n - 1, real: n - 1 };
    }

    if (loopIndex === MOBILE_LOOP_LEADING + n) {
      return { index: MOBILE_LOOP_LEADING, real: 0 };
    }

    if (loopIndex === MOBILE_LOOP_LEADING + n + 1) {
      return { index: MOBILE_LOOP_LEADING + 1, real: 1 % n };
    }

    return null;
  }

  function scrollToMobileLoopIndex(loopIndex, smooth) {
    let slides = getMobileSlides();
    let slide = slides[loopIndex];
    if (!slide) return;

    let left = slide.offsetLeft - (track.clientWidth - slide.clientWidth) / 2;

    if (smooth) {
      mobileNavScrolling = true;
      track.style.scrollBehavior = 'smooth';
      track.scrollLeft = left;
      return;
    }

    track.style.scrollBehavior = 'auto';
    track.scrollLeft = left;
    track.style.scrollBehavior = '';
  }

  function getNearestLoopIndex() {
    let slides = getMobileSlides();
    if (!slides.length) return 0;

    let center = track.scrollLeft + track.clientWidth / 2;
    let nearest = 0;
    let minDistance = Infinity;

    slides.forEach(function (slide, i) {
      let slideCenter = slide.offsetLeft + slide.clientWidth / 2;
      let distance = Math.abs(center - slideCenter);

      if (distance < minDistance) {
        minDistance = distance;
        nearest = i;
      }
    });

    return nearest;
  }

  function updateMobileActiveSlide() {
    let slides = getMobileSlides();
    if (!slides.length) return;

    let nearest = getNearestLoopIndex();

    slides.forEach(function (slide, i) {
      slide.classList.toggle('is-active', i === nearest);
    });

    mobileRealIndex = loopIndexToReal(nearest);
  }

  function normalizeMobileLoop() {
    if (photos.length <= 1) return;

    let nearest = getNearestLoopIndex();
    let target = getMobileNormalizeTarget(nearest);
    if (!target) return;

    let slides = getMobileSlides();
    let slide = slides[target.index];
    if (!slide) return;

    mobileJumping = true;
    setTrackJumping(true);
    setActiveSlide(target.index);
    mobileRealIndex = target.real;

    track.style.scrollBehavior = 'auto';
    track.scrollLeft = slide.offsetLeft - (track.clientWidth - slide.clientWidth) / 2;

    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        setTrackJumping(false);
        mobileJumping = false;
      });
    });
  }

  function handleScrollEnd() {
    if (mobileJumping) return;

    if (mobileNavScrolling) {
      mobileNavScrolling = false;
      track.style.scrollBehavior = '';
    }

    updateMobileActiveSlide();
    normalizeMobileLoop();
  }

  function scheduleScrollEnd() {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(handleScrollEnd, mobileNavScrolling ? 400 : 120);
  }

  function scrollMobileStep(delta) {
    if (photos.length <= 1) return;

    let nearest = getNearestLoopIndex();
    scrollToMobileLoopIndex(nearest + delta, true);
  }

  renderDesktop();
  renderMobile();

  if (desktopPrev) {
    desktopPrev.addEventListener('click', function () {
      if (!isDesktopLayout() || photos.length <= DESKTOP_WINDOW) return;
      desktopCenter = (desktopCenter - 1 + photos.length) % photos.length;
      renderDesktop();
    });
  }

  if (desktopNext) {
    desktopNext.addEventListener('click', function () {
      if (!isDesktopLayout() || photos.length <= DESKTOP_WINDOW) return;
      desktopCenter = (desktopCenter + 1) % photos.length;
      renderDesktop();
    });
  }

  if (mobilePrev) {
    mobilePrev.addEventListener('click', function () {
      scrollMobileStep(-1);
    });
  }

  if (mobileNext) {
    mobileNext.addEventListener('click', function () {
      scrollMobileStep(1);
    });
  }

  track.addEventListener('scroll', function () {
    if (mobileJumping) return;
    updateMobileActiveSlide();
    scheduleScrollEnd();
  });

  if ('onscrollend' in track) {
    track.addEventListener('scrollend', function () {
      if (mobileJumping) return;
      clearTimeout(scrollTimer);
      handleScrollEnd();
    });
  }

  requestAnimationFrame(function () {
    if (photos.length <= 1) {
      scrollToMobileLoopIndex(0, false);
    } else {
      scrollToMobileLoopIndex(MOBILE_LOOP_LEADING, false);
      mobileRealIndex = 0;
    }
    updateMobileActiveSlide();
  });
})();
`}
</Script>


<ResponsiveStyle
  common="
    .footer-image-container{
      padding: 48px 0;
    }
    .footer-grid {
      gap: 0;
    }
    .footer-block {
      padding: 18px 18px 24px;
      border-bottom: 1px solid #000;
    }
    .footer-grid .footer-block:not(:last-child) {
      border-right: 1px solid #000;
    }
    .footer-grid .footer-block:nth-child(1) {
    padding-left: 0;
    }
    .footer-grid .footer-block:nth-child(4) {
    padding-right: 0;
    }
    .footer-block-title {
      font-weight: 600;
      font-size: 24px;
      line-height: 94%;
      letter-spacing: -0.37px;
      margin: 0 0 16px;
      color: #000;
    }
    .footer-block-links{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .footer-block-link {
      border: none;
      transition: opacity 0.2s ease;
    }
    .footer-block-link:hover {
      opacity: 0.8;
    }
    .footer-block-text {
      color: #000;
      margin: 0;
      font-size: 18px;
      line-height: 94%;
      letter-spacing: -0.88px;
    }
    .footer-image{
      display: block;
      margin: 0 auto;
      max-width: 800px;
      width: 100%;
      height: auto;
    }
  "
  M="
    .footer-block{
    grid-column-end: span 2;
    padding: 12px 12px 16px;
  }
    .footer-block-title {
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: -0.3px;
    }
    .footer-block-text {
      font-size: 14px;
      letter-spacing: -0.24px;
    }
    .footer-block-links{
      gap: 8px;
    }
    .footer-grid .footer-block:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }
    .footer-grid .footer-block:nth-child(1) {
    padding-left: 0;
  }
    .footer-grid .footer-block:nth-child(3) {
    padding-left: 0;
  }
    .footer-grid .footer-block:nth-child(4) {
    padding-right: 0;
  }
  "
  S="
    .footer-block-title {
      margin: 0 0 6px;
      font-size: 10px;
      letter-spacing: -0.24px;
    }
   .footer-block{
      padding: 6px;
   }
    .footer-block-text {
      font-size: 8px;
      letter-spacing: -0.24px;
    }
  "
/>
<Grid columns={12} className="footer-grid">
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Наши соцсети</TextL>
    <div className="footer-block-links">
      <a
        href="https://vk.com/careersber"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">ВКонтакте</TextM>
      </a>
      <a
        href="https://t.me/careersber"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">Telegram</TextM>
      </a>
      <a
        href="https://max.ru/careersber"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">МАX</TextM>
      </a>
      <a
        href="https://ru.linkedin.com/company/sberbank?trk=public_post_feed-actor-name"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">LinkedIn</TextM>
      </a>
    </div>
  </Cell>
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Контакты</TextL>
    <div className="footer-block-links">
      <a
        href="mailto:sber.sreda@info.sberbank.ru"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Email для вопросов по мероприятиям sber.sreda@info.sberbank.ru
        </TextM>
      </a>
    </div>
  </Cell>
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Документы</TextL>
    <div className="footer-block-links">
      <a
        href="https://developers.sber.ru/docs/ru/policies/consent-to-personal-data-processing"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на обработку персональных данных
        </TextM>
      </a>
      <a
        href="https://developers.sber.ru/docs/ru/policies/marketing-career-consent"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на рассылку на получение вакансий
        </TextM>
      </a>
      <a
        href="https://developers.sber.ru/docs/ru/policies/mailing-agreement"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Согласие на получение рекламных рассылок
        </TextM>
      </a>
      <a
        href="https://developers.sber.ru/docs/ru/policies/participation-rules"
        target="_blank"
        rel="nofollow noreferrer"
        className="footer-block-link"
      >
        <TextM className="footer-block-text">
          Правила участия
        </TextM>
      </a>
    </div>
  </Cell>
  <Cell width={3} className="footer-block">
    <TextL className="footer-block-title">Адрес</TextL>
    <TextM className="footer-block-text">
      Москва, Земляной Вал 9А
      <br />
      <br />
      м. Курская, 5 минут пешком
    </TextM>
  </Cell>
</Grid>
<div className="footer-image-container">
  <img
    src="https://cdn-app.sberdevices.ru/misc/0.0.0/assets/common/dfc6b44e_sber-sreda-footer-image.png"
    className="footer-image"
  />
</div>
