.mcs-container,
.mcs-container-second,
.mcs-container-third {
  padding-top: 125px;
  padding-bottom: 125px;
}

.nika-hero {
  position: relative;
  overflow: hidden;
  background: #1f2842 url("../../../../uploads/portfolio_card/nika-school/nika-dark-noise-bg.webp") center / cover;
}

.nika-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(31, 40, 66, .82), rgba(31, 40, 66, .42) 47%, rgba(31, 40, 66, .12));
  pointer-events: none;
}

.nika-hero .wrapper {
  position: relative;
  z-index: 2;
}

.nika-hero__image,
.nika-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.breadcrumb,
.breadcrumb a,
.mcs-banner__label,
.mcs-banner__value {
  color: #fff;
}

.mcs-banner__title {
  max-width: 860px;
  color: #fff;
}

.nika-shot,
.nika-video-frame,
.nika-device,
.nika-style-card {
  overflow: hidden;
  border-radius: 18px;
  background: #f6f7fd;
  box-shadow: 0 20px 70px rgba(31, 40, 66, .16);
}

.nika-shot img,
.nika-device img,
.nika-video-frame video {
  display: block;
  width: 100%;
  height: auto;
}

.nika-walkthrough-video {
  display: block;
  width: 100%;
  aspect-ratio: 1988 / 1080;
  object-fit: cover;
  background: #1f2842 url("../../../../uploads/portfolio_card/nika-school/nika-dark-noise-bg.webp") center / cover;
}

.nika-walkthrough-frame {
  position: relative;
  aspect-ratio: 1988 / 1080;
}

.nika-walkthrough-frame .nika-walkthrough-video {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  aspect-ratio: auto;
  transform: translateZ(0);
}

.nika-walkthrough-section {
  padding-bottom: 125px;
}

.nika-caption {
  padding: 18px 24px 24px;
  color: rgba(31, 40, 66, .76);
  font-family: "Onest", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.nika-shot-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  padding: 0 15px 125px;
}

.nika-details-bg,
.nika-screens-bg {
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #edf7fc 0%, #f7fbfd 100%);
}

.nika-screens-bg {
  padding: 0 0 125px;
}

.nika-details-bg + .nika-screens-bg {
  padding-top: 0;
}

.nika-screens-bg .nika-shot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0;
  padding-bottom: 0;
}

.nika-shot-grid_video {
  align-items: stretch;
}

.nika-shot_video {
  aspect-ratio: 16 / 9;
  background: #edf7fc;
}

.nika-pair-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #edf7fc;
}

.nika-shot-grid_three {
  grid-template-columns: repeat(3, 1fr);
}

.nika-shot-grid_stack {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.nika-inner-showcase {
  overflow: visible;
  margin: 34px auto 0;
  padding: 0 15px 125px;
  background: transparent;
}

.nika-inner-showcase__columns {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 58px);
  width: min(1180px, 100%);
  margin: 0 auto;
  align-items: start;
}

.nika-inner-showcase__column {
  display: grid;
  gap: clamp(34px, 5vw, 62px);
}

.nika-inner-showcase__column_left {
  transform: translateY(-34px);
}

.nika-inner-showcase__column_center {
  transform: translateY(28px);
}

.nika-inner-showcase__column_right {
  transform: translateY(-18px);
}

.nika-inner-showcase__tablet-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 58px);
  width: min(1180px, 100%);
  margin: clamp(34px, 5vw, 62px) auto 0;
  align-items: start;
}

.nika-page-mock,
.nika-phone-mock {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(18, 31, 64, .18);
}

.nika-inner-showcase .nika-page-mock_real,
.nika-inner-showcase .nika-phone-mock {
  box-shadow:
    0 34px 90px rgba(6, 14, 34, .36),
    0 0 0 1px rgba(255, 255, 255, .08);
}

.nika-page-mock {
  min-height: 520px;
  padding: 18px 20px 24px;
}

.nika-page-mock_tall {
  min-height: 820px;
}

.nika-page-mock_medium {
  min-height: 410px;
}

.nika-page-mock_landscape {
  min-height: 360px;
}

.nika-page-mock_tablet {
  min-height: 0;
  aspect-ratio: 768 / 1024;
}

.nika-page-mock_real {
  min-height: 0;
  padding: 0;
}

.nika-page-mock_real.nika-page-mock_tall {
  height: 820px;
}

.nika-page-mock_real.nika-page-mock_medium {
  height: 410px;
}

.nika-page-mock_real.nika-page-mock_winners {
  height: auto;
  aspect-ratio: 1920 / 1419;
}

.nika-page-mock_real.nika-page-mock_landscape {
  height: 360px;
}

.nika-page-mock_real.nika-page-mock_tablet {
  height: auto;
}

.nika-phone-mock__screen_real {
  min-height: 0;
  padding: 0;
  aspect-ratio: 375 / 963;
}

.nika-page-mock_real img,
.nika-phone-mock__screen_real img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.nika-page-mock__bar {
  height: 22px;
  margin: -2px -4px 28px;
  border-bottom: 1px solid rgba(31, 40, 66, .08);
  background:
    radial-gradient(circle at 5% 45%, #dfe4f2 0 5px, transparent 6px),
    linear-gradient(90deg, rgba(31, 40, 66, .16) 0 17%, transparent 17% 24%, rgba(31, 40, 66, .12) 24% 35%, transparent 35% 46%, rgba(31, 40, 66, .12) 46% 58%, transparent 58%),
    radial-gradient(circle at 95% 45%, #dfe4f2 0 7px, transparent 8px);
  background-size: 100% 100%;
}

.nika-page-mock__hero {
  width: 72%;
  height: 44px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31, 40, 66, .88), rgba(31, 40, 66, .54));
}

.nika-page-mock__lines,
.nika-page-mock__list {
  height: 132px;
  margin-bottom: 28px;
  background:
    linear-gradient(rgba(31, 40, 66, .2), rgba(31, 40, 66, .2)) 0 0 / 64% 10px no-repeat,
    linear-gradient(rgba(31, 40, 66, .14), rgba(31, 40, 66, .14)) 0 30px / 84% 10px no-repeat,
    linear-gradient(rgba(31, 40, 66, .12), rgba(31, 40, 66, .12)) 0 60px / 76% 10px no-repeat,
    linear-gradient(rgba(31, 40, 66, .1), rgba(31, 40, 66, .1)) 0 90px / 58% 10px no-repeat;
}

.nika-page-mock__image,
.nika-page-mock__cover,
.nika-page-mock__map {
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 70% 35%, rgba(163, 78, 176, .72), transparent 32%),
    radial-gradient(ellipse at 26% 72%, rgba(83, 130, 95, .55), transparent 36%),
    linear-gradient(135deg, #edf5fb, #dfe6ff);
}

.nika-page-mock__image {
  height: 220px;
  margin-bottom: 28px;
}

.nika-page-mock__cover {
  height: 155px;
  margin-bottom: 22px;
}

.nika-page-mock__map {
  height: 170px;
  margin: 24px 0;
  background:
    linear-gradient(130deg, rgba(31, 40, 66, .12), transparent 36%),
    linear-gradient(35deg, transparent 0 18%, rgba(83, 130, 95, .35) 18% 26%, transparent 26% 48%, rgba(163, 78, 176, .22) 48% 56%, transparent 56%),
    #edf3f7;
}

.nika-page-mock__panel,
.nika-page-mock__form {
  height: 150px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(31, 40, 66, .16), rgba(31, 40, 66, .16)) 24px 30px / 52% 10px no-repeat,
    linear-gradient(rgba(31, 40, 66, .1), rgba(31, 40, 66, .1)) 24px 60px / 72% 8px no-repeat,
    linear-gradient(90deg, #1f2842 0 42%, rgba(31, 40, 66, .08) 42%);
}

.nika-page-mock__form {
  height: 210px;
  background:
    linear-gradient(rgba(255, 255, 255, .65), rgba(255, 255, 255, .65)) 28px 40px / 70% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .65), rgba(255, 255, 255, .65)) 28px 82px / 70% 1px no-repeat,
    linear-gradient(90deg, rgba(163, 78, 176, .92), rgba(130, 111, 203, .9));
}

.nika-page-mock__cards,
.nika-page-mock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.nika-page-mock__grid {
  grid-template-columns: repeat(2, 1fr);
}

.nika-page-mock__cards::before,
.nika-page-mock__cards::after,
.nika-page-mock__grid::before,
.nika-page-mock__grid::after,
.nika-page-mock__cards,
.nika-page-mock__grid {
  content: "";
}

.nika-page-mock__cards::before,
.nika-page-mock__cards::after,
.nika-page-mock__grid::before,
.nika-page-mock__grid::after {
  display: block;
  min-height: 92px;
  border-radius: 8px;
  background: #eef1f8;
}

.nika-page-mock__cards {
  min-height: 112px;
  background:
    linear-gradient(#eef1f8, #eef1f8) 0 0 / calc((100% - 24px) / 3) 92px no-repeat,
    linear-gradient(#eef1f8, #eef1f8) 50% 0 / calc((100% - 24px) / 3) 92px no-repeat,
    linear-gradient(#eef1f8, #eef1f8) 100% 0 / calc((100% - 24px) / 3) 92px no-repeat;
}

.nika-phone-mock {
  justify-self: center;
  width: min(230px, 78%);
  padding: 14px;
  border-radius: 30px;
  background: #111827;
  box-shadow: 0 24px 60px rgba(18, 31, 64, .28);
}

.nika-phone-mock__screen {
  overflow: hidden;
  min-height: 440px;
  padding: 18px 14px;
  border-radius: 22px;
  background: #fff;
}

.nika-phone-mock__screen_real {
  min-height: 0;
  padding: 0;
  aspect-ratio: 375 / 963;
  background: transparent;
}

.nika-phone-mock .nika-page-mock__bar {
  height: 30px;
  margin: -4px -2px 24px;
}

.nika-phone-mock .nika-page-mock__hero {
  width: 88%;
  height: 58px;
}

.nika-phone-mock .nika-page-mock__grid {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.nika-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 62px auto 0;
}

.nika-feature {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
  min-height: 150px;
  padding: 32px 42px 36px;
  border: 1px solid rgba(152, 74, 164, .18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(246, 247, 253, .82)),
    #fff;
  color: #1f2842;
  font-family: "Onest", sans-serif;
  box-shadow: 0 24px 70px rgba(31, 40, 66, .08);
}

.nika-feature span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 190px;
  min-height: 36px;
  margin-bottom: 0;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(152, 74, 164, .1);
  color: #984aa4;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.nika-feature p {
  margin: 0;
  max-width: 620px;
  font-size: 22px;
  line-height: 1.38;
}

.nika-style-guide {
  padding: 0 15px 125px;
  background: #fff;
}

.nika-style-guide__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 60px;
  border: 1px solid rgba(31, 40, 66, .14);
  border-radius: 20px;
}

.nika-style-card {
  min-height: 320px;
  padding: 34px;
  box-shadow: none;
}

.nika-style-card_dark {
  background: #1f2842 url("../../../../uploads/portfolio_card/nika-school/nika-dark-noise-bg.webp") center / cover;
  color: #fff;
}

.nika-style-card_light {
  background: #f6f7fd;
  color: #1f2842;
}

.nika-style-card__label {
  display: block;
  margin-bottom: 26px;
  color: inherit;
  font-family: "Onest", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .68;
}

.nika-style-card__font {
  font-family: "Ysabeau Office", "Onest", sans-serif;
  font-size: clamp(44px, 5vw, 92px);
  line-height: 1;
}

.nika-style-card__sample {
  margin-top: 28px;
  font-family: "Onest", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.nika-colors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.nika-color {
  min-height: 150px;
  padding: 20px;
  border-radius: 14px;
  color: #1f2842;
  font-family: "Onest", sans-serif;
}

.nika-color_dark {
  background: #1f2842 url("../../../../uploads/portfolio_card/nika-school/nika-dark-noise-bg.webp") center / cover;
  color: #fff;
}

.nika-color_soft {
  background: #f6f7fd;
}

.nika-color_blue {
  background: #e0e4f3;
}

.nika-color_purple {
  background: #984aa4;
  color: #fff;
}

.nika-color span {
  display: block;
  margin-top: 70px;
  font-size: 16px;
}

.nika-figma-showcase {
  padding: 0;
  background: #fff;
}

.nika-figma-showcase .wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.nika-figma-showcase picture,
.nika-figma-showcase img {
  display: block;
}

.nika-figma-showcase img {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: 0 34px 90px rgba(31, 40, 66, .12);
}

.nika-devices {
  display: grid;
  grid-template-columns: 1.2fr .8fr .55fr;
  gap: 24px;
  align-items: end;
  padding: 0 15px 125px;
}

.nika-device {
  padding: 14px;
  background: #111827;
}

.nika-device_tablet {
  padding: 12px;
}

.nika-device_phone {
  max-width: 360px;
  justify-self: center;
  padding: 10px;
  border-radius: 28px;
}

.nika-device img {
  border-radius: 10px;
}

.nika-device_phone img {
  border-radius: 22px;
}

.nika-mobile-marquee-section {
  position: relative;
  overflow: hidden;
  margin-top: -72px;
  padding: 72px 0 125px;
  background: #fff;
}

.nika-mobile-marquee-section::before,
.nika-mobile-marquee-section::after {
  content: none;
  position: absolute;
  top: 0;
  z-index: 2;
  width: 120px;
  height: 100%;
  pointer-events: none;
}

.nika-mobile-marquee-section::before {
  left: 0;
  background: linear-gradient(90deg, #1f2842, rgba(31, 40, 66, 0));
}

.nika-mobile-marquee-section::after {
  right: 0;
  background: linear-gradient(270deg, #1f2842, rgba(31, 40, 66, 0));
}

.nika-mobile-marquee {
  display: flex;
  width: max-content;
  animation: nika-mobile-marquee 48s linear infinite;
  will-change: transform;
}

.nika-mobile-marquee:hover {
  animation-play-state: paused;
}

.nika-mobile-marquee__set {
  display: flex;
  flex: 0 0 auto;
  gap: 34px;
  padding-right: 34px;
}

.nika-mobile-card {
  flex: 0 0 clamp(250px, 21vw, 330px);
  overflow: hidden;
  border-radius: 26px;
  background: transparent;
  box-shadow:
    0 0 34px rgba(31, 40, 66, .12),
    0 28px 70px rgba(31, 40, 66, .16);
}

.nika-mobile-card h3 {
  display: none;
}

.nika-mobile-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

@keyframes nika-mobile-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.nika-video-section {
  padding: 0 15px 125px;
  background: #f6f7fd;
}

.nika-video-frame {
  max-width: 1280px;
  margin: 0 auto;
  background: #1f2842 url("../../../../uploads/portfolio_card/nika-school/nika-dark-noise-bg.webp") center / cover;
}

.nika-video-frame video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.portfolio-bar {
  border-top: 1px solid rgba(31, 40, 66, .1);
}

.portfolio .grid-item_nika .grid-item__bg {
  object-position: center;
}

.bg-dark {
  background-color: #1f2842;
  background-image: url("../../../../uploads/portfolio_card/nika-school/nika-dark-noise-bg.webp");
  background-position: center;
  background-size: cover;
}

.bg-blue {
  overflow: hidden;
  padding-bottom: 0;
  background-color: #e8e8ff;
  background-image: url("../../../../uploads/portfolio_card/nika-school/nika-lavender-bg.webp");
  background-position: center;
  background-size: cover;
}

.bg-blue .wrapper {
  padding-bottom: 0;
}

.bg-blue .inner-pages__img {
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(31, 40, 66, .14);
}

.bg-blue .inner-pages__img picture,
.bg-blue .inner-pages__img img,
.nika-section-video {
  display: block;
}

.bg-blue .inner-pages__img img,
.nika-section-video {
  width: 100%;
  border-radius: inherit;
}

.nika-section-video {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.nika-admission-frame {
  position: relative;
  aspect-ratio: 2000 / 1080;
}

.nika-admission-frame .nika-section-video {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  aspect-ratio: auto;
  transform: translateZ(0);
}

.bg-blue .mcs-content__title,
.bg-blue .mcs-content__text {
  color: #1f2842;
}

@media screen and (max-width: 1024px) {
  .mcs-container,
  .mcs-container-second,
  .mcs-container-third {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .nika-walkthrough-section,
  .nika-screens-bg {
    padding-bottom: 70px;
  }

  .nika-shot-grid,
  .nika-shot-grid_three,
  .nika-shot-grid_stack,
  .nika-style-guide__inner,
  .nika-devices,
  .nika-inner-showcase__columns,
  .nika-inner-showcase__tablet-row,
  .nika-feature-list {
    grid-template-columns: 1fr;
  }

  .nika-shot-grid,
  .nika-style-guide,
  .nika-devices,
  .nika-video-section,
  .nika-inner-showcase {
    padding-bottom: 70px;
  }

  .nika-inner-showcase {
    margin-top: 0;
    padding-top: 0;
  }

  .nika-inner-showcase__columns {
    max-width: 680px;
  }

  .nika-inner-showcase__column {
    gap: 70px;
  }

  .nika-inner-showcase__tablet-row {
    max-width: 680px;
    margin-top: 70px;
  }

  .nika-feature-list {
    margin-top: 35px;
  }

  .nika-inner-showcase__column_left,
  .nika-inner-showcase__column_center,
  .nika-inner-showcase__column_right {
    transform: none;
  }

  .nika-style-guide__inner {
    padding: 30px;
  }

  .nika-figma-showcase img {
    border-radius: 0;
  }

  .nika-device_phone {
    justify-self: start;
  }

  .nika-mobile-marquee-section {
    margin-top: -54px;
    padding: 54px 0 70px;
  }

  .nika-mobile-marquee__set {
    gap: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 600px) {
  .mcs-container,
  .mcs-container-second,
  .mcs-container-third {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .nika-walkthrough-section,
  .nika-shot-grid,
  .nika-screens-bg,
  .nika-style-guide,
  .nika-devices,
  .nika-video-section {
    padding-bottom: 54px;
  }

  .nika-hero::after {
    background: linear-gradient(180deg, rgba(31, 40, 66, .74), rgba(31, 40, 66, .32));
  }

  .nika-caption {
    padding: 14px 16px 18px;
    font-size: 13px;
  }

  .nika-feature {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: auto;
    padding: 22px;
  }

  .nika-feature p {
    max-width: none;
    font-size: 17px;
  }

  .nika-style-card__sample {
    font-size: 15px;
  }

  .nika-style-guide__inner {
    padding: 0;
    border: 0;
  }

  .nika-inner-showcase {
    margin-top: 0;
    padding: 0 15px 54px;
  }

  .nika-inner-showcase__column {
    gap: 54px;
  }

  .nika-inner-showcase__tablet-row {
    margin-top: 54px;
  }

  .nika-feature-list {
    margin-top: 27px;
  }

  .nika-page-mock {
    min-height: 360px;
    padding: 14px;
    border-radius: 8px;
  }

  .nika-page-mock_tall {
    min-height: 540px;
  }

  .nika-page-mock_medium {
    min-height: 320px;
  }

  .nika-page-mock_landscape {
    min-height: 300px;
  }

  .nika-page-mock_tablet {
    min-height: 0;
  }

  .nika-page-mock_real {
    min-height: 0;
    padding: 0;
  }

  .nika-page-mock_real.nika-page-mock_tall {
    height: 540px;
  }

  .nika-page-mock_real.nika-page-mock_medium {
    height: 320px;
  }

  .nika-page-mock_real.nika-page-mock_winners {
    height: auto;
    aspect-ratio: 1920 / 1419;
  }

  .nika-page-mock_real.nika-page-mock_landscape {
    height: 300px;
  }

  .nika-page-mock_real.nika-page-mock_tablet {
    height: auto;
  }

  .nika-page-mock__image {
    height: 150px;
  }

  .nika-phone-mock {
    width: min(220px, 82%);
  }

  .nika-style-card,
  .nika-color {
    border-radius: 12px;
  }

  .nika-mobile-marquee-section {
    margin-top: -42px;
    padding: 42px 0 54px;
  }

  .nika-mobile-marquee-section::before,
  .nika-mobile-marquee-section::after {
    width: 48px;
  }

  .nika-mobile-card {
    flex-basis: 236px;
    border-radius: 18px;
  }

  .nika-mobile-card h3 {
    padding: 20px 22px 18px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nika-mobile-marquee,
  video {
    animation: none !important;
  }
}