@import url("../components/case-button.css?v=3af7b6d55037");
/* Sber case study. Shared typography, container and navigation come from ../styles.css. */
.sber-page .menu { background:rgba(255,255,255,.52); }
.sber-section {
  display:flex;
  justify-content:center;
  padding:150px 33px 0;
}
.sber-container { gap:55px; padding-bottom:10px; }
.sber-copy {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:819px;
  max-width:100%;
  text-align:center;
}
.sber-close .sber-copy { width:100%; }
.sber-close .sber-copy,.sber-sharing .sber-copy { gap:40px; }
.sber-heading {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:100%;
}
.sber-heading h1,.sber-heading h2 {
  width:auto;
  max-width:100%;

  font-weight:inherit;

  text-align:center;
}
.sber-rule { width:100%; height:0; position:relative; }
.sber-rule::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  border-top:1px solid var(--line);
}
.sber-meta {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:112px;
  opacity:.5;
  font-size:16px;
  line-height:22px;
}
.sber-meta a { display:flex; align-items:center; }
.sber-page a:any-link, .sber-page a:any-link span { text-decoration:none; }
.sber-meta img { width:22px; height:22px; }
.sber-meta a,.sber-period { white-space:nowrap; }
.sber-sharing .sber-meta { gap:70px; }
.sber-sharing .sber-period { padding-left:17px; }
.sber-description { width:100%;   }
.sber-description p+p { margin-top:27px; }
.sber-gallery {
  --visual-background:#fff;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20.691435px;
  width:100%;
}
.sber-gallery > .sber-slide > img {
  width:100%;
  height:586px;
  /* Figma exports include each screen's clipping, radius and border. */
  object-fit:fill;
}
.sber-history { padding-bottom:150px; }
@media(max-width:960px) {
  .sber-gallery > .sber-slide > img { height:auto; aspect-ratio:284.507233 / 586; }
  .sber-meta { gap:clamp(20px,7vw,112px); }
}
@media(max-width:740px) {
  .sber-section { padding:100px 24px 0; }
  .sber-container { gap:40px; }


  .sber-description br { display:none; }
  .sber-meta { flex-wrap:wrap; column-gap:24px; row-gap:10px; font-size:14px; }
  .sber-sharing .sber-meta { gap:24px; }
  .sber-sharing .sber-period { padding-left:0; }
  .sber-gallery { grid-template-columns:minmax(0,284.507233px); justify-content:center; gap:24px; }
  .sber-history { padding-bottom:120px; }
}
/* Match the authored Figma text-box widths, including whole-pixel rounding. */
.sber-close h1 { width:578px; }
.sber-sharing h2 { width:594px; }
.sber-transactions h2 { width:535px; }
.sber-history h2 { width:603px; }
.sber-close .sber-meta a:nth-child(1) { width:72px; }
.sber-close .sber-meta a:nth-child(2) { width:270px; }
.sber-period { min-width:97px; }
.sber-sharing .sber-meta a span { width:105px; }
.sber-sharing .sber-period { min-width:114px; }
@media(max-width:740px) {
  .sber-close .sber-meta a:nth-child(1),.sber-close .sber-meta a:nth-child(2) { width:auto; }
  .sber-period,.sber-sharing .sber-period { min-width:0; }
}

.sber-case-button { display:none; }
@media(hover:none), (pointer:coarse) {
  .sber-case-button { display:inline-flex; align-self:center; margin-top:-23px; }
}

/* Brightness composites exactly 10% black over each image, retaining its alpha
   silhouette and exported corners without covering the gaps between screens. */
@media (hover:hover) and (pointer:fine) {
  a.sber-gallery > .sber-slide > img { transition:filter 300ms ease-in-out; }
  a.sber-gallery:hover > .sber-slide > img { filter:brightness(.9); }
}
.sber-slide { display:block; min-width:0; }
@media(max-width:1180px) {
  .case-page .sber-gallery.case-hero-visual > .sber-slide > img { height:auto; object-fit:contain; }
}
/* A carousel solves limited space for mouse/trackpad and touch alike. */
@media (max-width:600px) and (orientation:portrait) {
  .sber-page .sber-gallery {
    --screen-width:min(74vw, 320px);
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:20px;
    width:100vw;
    max-width:none;
    min-height:0;
    height:auto;
    padding:0 calc((100vw - var(--screen-width)) / 2);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .sber-page .sber-gallery::-webkit-scrollbar { display:none; }
  .sber-page .sber-gallery > .sber-slide {
    flex:0 0 var(--screen-width);
    width:var(--screen-width);
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    scroll-snap-align:center;
  }
  .sber-page .sber-gallery > .sber-slide > img {
    width:100%;
    height:auto;
    aspect-ratio:auto;
    opacity:var(--slide-opacity, .4);
    transform:scale(var(--slide-scale, .8));
    transform-origin:var(--slide-origin, 0%) center;
    transition:none;
  }
  .sber-page .sber-gallery > .sber-slide:first-child > img {
    --slide-scale:1;
    --slide-opacity:1;
  }
}
@media (prefers-reduced-motion:reduce) {
  .sber-page .sber-gallery > .sber-slide > img { transition:none; }
}