/* ДОПОГ article cards follow the tachograph article selection styles. */
body.dopog-page #main #dopog-articles {
  padding: clamp(56px, 6vw, 80px) 0;
  background: radial-gradient(ellipse at 15% 0%, #e9edf5 0%, #d7e0ee 60%, #c8d5e7 100%);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__head {
  max-width: 680px;
  margin-bottom: 30px;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__head #dopog-blog-selection-title {
  margin: 0;
  color: var(--sv-navy-ink, #0f2340);
  font-family: var(--dopog-ui-font) !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  line-height: 44px !important;
  letter-spacing: normal !important;
  text-wrap: balance;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card {
  display: flex;
  min-width: 0;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid rgba(15, 35, 64, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  color: #0f2340;
  box-shadow: none;
  transition: background .275s var(--ease-out), border-color .275s var(--ease-out), color .275s var(--ease-out);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:not(:hover):not(:focus-within) {
  border-color: transparent;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__image {
  flex: 0 0 min(40%, 440px);
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 960 / 536;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__copy {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card h3 {
  margin: 0;
  color: var(--sv-navy-ink, #0f2340);
  font-family: var(--dopog-ui-font) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: .009em !important;
  text-wrap: balance;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card p {
  margin: 14px 0 0;
  color: #1d1d1f;
  font-family: var(--dopog-ui-font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 25px !important;
  letter-spacing: -.022em !important;
  transition: color .275s var(--ease-out);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card a {
  font-family: var(--dopog-ui-font) !important;
  margin-top: auto;
  padding-top: 20px;
  color: var(--sv-navy, #002f6c);
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.29 !important;
  text-decoration: underline;
  text-decoration-color: rgba(0, 47, 108, .35);
  text-underline-offset: 4px;
  transition: color .275s var(--ease-out), text-decoration-color .275s var(--ease-out);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card a:hover {
  color: var(--sv-red, #ff0300);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) {
  border-color: var(--sv-navy, #002f6c);
  background: var(--sv-navy, #002f6c);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) h3,
body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) a,
body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) a:hover {
  color: #fff;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) p {
  color: rgba(255, 255, 255, .72);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) a {
  text-decoration-color: #fff;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card:is(:hover, :focus-within) a:hover {
  text-decoration-thickness: 2px;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card a span {
  display: inline-block;
  transition: transform 180ms ease;
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card a:hover span,
body.dopog-page #main #dopog-articles .tachograph-blog-selection__card a:focus-visible span {
  transform: translateX(3px);
}

body.dopog-page #main #dopog-articles .tachograph-blog-selection__card a:focus-visible {
  outline: 2px solid var(--sv-red, #ff0300);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  body.dopog-page #main #dopog-articles .tachograph-blog-selection__image {
    flex-basis: 38%;
  }
}

@media (max-width: 1068px) {
  body.dopog-page #main #dopog-articles .tachograph-blog-selection__head #dopog-blog-selection-title {
    font-size: 32px !important;
    line-height: 36px !important;
    letter-spacing: .004em !important;
  }

  body.dopog-page #main #dopog-articles .tachograph-blog-selection__card h3 {
    font-size: 21px !important;
    line-height: 25px !important;
    letter-spacing: .011em !important;
  }
}

@media (max-width: 734px) {
  body.dopog-page #main #dopog-articles .tachograph-blog-selection__head #dopog-blog-selection-title {
    font-size: 28px !important;
    line-height: 32px !important;
    letter-spacing: .007em !important;
  }
}

@media (max-width: 600px) {
  body.dopog-page #main #dopog-articles {
    padding-block: 48px;
  }

  body.dopog-page #main #dopog-articles .tachograph-blog-selection__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.dopog-page #main #dopog-articles .tachograph-blog-selection__card {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 18px;
  }

  body.dopog-page #main #dopog-articles .tachograph-blog-selection__image {
    width: 100%;
    flex: 0 0 auto;
    border-radius: 8px;
  }

  body.dopog-page #main #dopog-articles .tachograph-blog-selection__image img {
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  body.dopog-page #main #dopog-articles .tachograph-blog-selection__card {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dopog-page #main #dopog-articles .tachograph-blog-selection__card,
  body.dopog-page #main #dopog-articles .tachograph-blog-selection__card :is(h3, p, a, a span) {
    transition: none;
  }
}