:root {
  color: #121212;
  background: #fff;
  font-family: Manrope, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: #fcfcfc; }
a { color: inherit; }

.blog-main { position: relative; isolation: isolate; width: 88.889vw; margin: 0 auto; padding: 11.944444vw 0 5.556vw; }
.blog-main::before { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); background: #fcfcfc; content: ""; pointer-events: none; }
/* Reuse the homepage animation at the top, independent of the article grid's height. */
.blog-main > .hero-gradient { inset: 0 auto auto 50%; width: 100vw; height: 56.25vw; transform: translateX(-50%); }
.blog-main::after { position: absolute; z-index: 1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); background: linear-gradient(217.12632846288238deg, rgb(255 165 194 / .162) 32.041%, rgb(255 255 255 / .2) 48.992%); content: ""; pointer-events: none; }
.blog-heading { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .833333vw; text-align: center; }
.blog-title { margin: 0; font-size: 3.75vw; font-weight: 500; line-height: 1.2; letter-spacing: -.069444vw; }
.blog-lede { margin: 0; color: #121212; font-size: 1.388889vw; font-weight: 400; line-height: 1.4; }
.blog-lede p { margin: 0; }
.blog-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.222vw; row-gap: 3.333vw; margin-top: 3.333333vw; }
.blog-card { min-width: 0; }
.blog-card__image-link { display: block; overflow: hidden; border-radius: .833vw; }
.blog-card__image { display: block; width: 100%; aspect-ratio: 405 / 234; border-radius: .833vw; object-fit: cover; transition: transform .25s ease; }
.blog-card__image-link:hover .blog-card__image { transform: scale(1.025); }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: 1.111vw; margin-top: 1.389vw; }
.blog-card__tag { display: inline-flex; align-items: center; justify-content: center; min-width: 7.917vw; min-height: 1.806vw; padding: .278vw .833vw; border: 1px solid #d5d5d5; border-radius: 3px; background: #fff; color: #121212; font-size: .833vw; font-weight: 500; line-height: 1.2; text-align: center; }
.blog-card__title { display: block; margin-top: 1.389vw; font-size: 1.458vw; font-weight: 600; line-height: 1.238; letter-spacing: -.005em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.blog-card__title--draft { text-decoration: none; }

.blog-footer { padding: 2.222vw 4.861vw 4.514vw; background: #f5f5f5; box-shadow: 0 8px 32px rgb(0 0 0 / 8%); }
.blog-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4.444vw; }
.blog-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25vw; min-width: 0; }
.blog-footer h2, .blog-footer p, .blog-footer a { margin: 0; color: #121212; font-family: Manrope, Arial, sans-serif; }
.blog-footer h2 { font-size: .972vw; font-weight: 600; line-height: 1.143; letter-spacing: .03em; }
.blog-footer p, .blog-footer a { font-size: .972vw; font-weight: 400; line-height: 1.286; letter-spacing: .01em; text-decoration: none; }
.blog-footer__column:nth-child(2) a, .blog-footer__column:nth-child(3) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.blog-footer__link-with-icon { display: inline-flex; align-items: center; gap: .833vw; }
.blog-footer__link-with-icon img { display: block; flex: none; width: 1.389vw; height: 1.319vw; object-fit: contain; }
.blog-lede br.blog-only-mobile { display: block; }

@media screen and (min-width: 480px) {
  .blog-lede p { display: inline; }
  .blog-lede p + p::before { content: " "; }
  .blog-lede br.blog-only-mobile { display: none; }

  .navbar .nav-link,
  .navbar .nav-link.w--current {
    color: var(--black);
    font-family: Manrope, Arial, sans-serif !important;
    font-size: 1.111vw;
    font-weight: 500;
    line-height: normal;
  }

  /* Gives Safari's first glyph a tiny paint margin without moving the menu. */
  .navbar .nav-link.uslugi {
    margin-left: -1px;
    padding-left: 1px;
  }
}

@media screen and (max-width: 479px) {
  .blog-main { width: auto; padding: 28.019324vw 4.831vw 11.594vw; }
  .blog-main::before {
    background:
      linear-gradient(180deg, rgb(255 165 194 / .275) 0%, rgb(255 255 255 / 0) 13.3%, rgb(255 255 255 / 0) 38%),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 414 5438' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.242 174.02 -25.668 10.876 190.44 -271.9)'%3E%3Cstop stop-color='rgb(142,98,238)' offset='0'/%3E%3Cstop stop-color='rgb(158,120,239)' stop-opacity='.74902' offset='.25'/%3E%3Cstop stop-color='rgb(173,142,240)' stop-opacity='.50196' offset='.5'/%3E%3Cstop stop-color='rgb(204,186,242)' stop-opacity='0' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"),
      #fcfcfc;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .blog-main::after { display: none; }
  .blog-main > .hero-gradient { display: none; }
  .blog-heading { gap: 2.899vw; }
  .blog-title { font-size: 7.246vw; font-weight: 600; line-height: 1.25; letter-spacing: -.072vw; }
  .blog-lede { height: auto; overflow: hidden; font-size: 4.348vw; font-weight: 400; line-height: 1.4; }
  /* The global mobile `p` rule sets 16px at the 414px layout width. */
  .blog-lede p { font-size: 4.348vw !important; }
  .blog-grid { grid-template-columns: 1fr; gap: 13.527vw; margin-top: 11.594vw; }
  .blog-card__image-link { border-radius: 2.899vw; }
  .blog-card__image { border-radius: 2.899vw; }
  .blog-card__tags { gap: 2.899vw; margin-top: 4.831vw; }
  .blog-card__tag { min-width: 0; min-height: 0; padding: 1.449vw 2.899vw; border-radius: .725vw; font-size: 2.657vw; }
  /* Links and draft spans share the same mobile title treatment. */
  .blog-card__title {
    margin-top: 4.831vw;
    font-family: Manrope, sans-serif;
    font-size: 5.314vw;
    font-weight: 600;
    line-height: 1.28;
  }
  /* Overrides the global mobile anchor rule without affecting the underline. */
  a.blog-card__title {
    font-family: Manrope, sans-serif !important;
    font-size: 5.314vw !important;
    font-weight: 600 !important;
    line-height: 1.28 !important;
  }
  .blog-footer { padding: 9.662vw 5.797vw; }
  .blog-footer__grid { grid-template-columns: 1fr; gap: 5.797vw; }
  .blog-footer__column { gap: 2.899vw; }
  .blog-footer h2 { margin-bottom: 1.449vw; font-size: 3.865vw; line-height: 1; }
  .blog-footer p, .blog-footer a { font-size: 3.865vw; line-height: 1.125; }
  .blog-footer__link-with-icon { gap: 2.899vw; }
  .blog-footer__link-with-icon img { width: 4.831vw; height: 4.589vw; }

  /* Keep the desktop's living shapes on mobile, reduced to the title area. */
  .blog-main::before {
    background: #fcfcfc;
  }

  .blog-main::after {
    display: block;
    height: 100vw;
    background: linear-gradient(195.33090874956898deg, rgb(255 165 194 / .162) 32.041%, rgb(255 255 255 / .2) 48.992%);
  }

  .blog-main > .hero-gradient {
    display: block;
    inset: 0 auto auto 50%;
    width: 100vw;
    height: 100vw;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(#000 0%, #000 66%, transparent 100%);
    mask-image: linear-gradient(#000 0%, #000 66%, transparent 100%);
  }

  .blog-main .hero-gradient__shape {
    top: 48%;
    opacity: .82;
  }

  .blog-main .hero-gradient__shape--left { width: 68vw; }
  .blog-main .hero-gradient__shape--middle { width: 106vw; }
  .blog-main .hero-gradient__shape--right { width: 86vw; }
}