.bgstroid-blog {
  --bgb-gap: 24px;
  color: var(--bgb-text);
  margin: 0 0 48px;
}
.bgstroid-blog__heading {
  margin: 0 0 30px;
  color: #0d1e50;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.bgstroid-blog__track {
  display: grid;
  grid-template-columns: repeat(var(--bgb-desktop, 3), minmax(0, 1fr));
  gap: var(--bgb-gap);
}
.bgstroid-blog.is-carousel .bgstroid-blog__track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-y pinch-zoom;
}
.bgstroid-blog.is-carousel .bgstroid-blog__track::-webkit-scrollbar { display: none; }
.bgstroid-blog__card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--bgb-card, #fff);
  border: 1px solid color-mix(in srgb, var(--bgb-text) 13%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
}
.bgstroid-blog.is-carousel .bgstroid-blog__card {
  flex: 0 0 calc((100% + var(--bgb-gap)) / var(--bgb-desktop, 3) - var(--bgb-gap));
  scroll-snap-align: start;
}
.bgstroid-blog__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.bgstroid-blog__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bgstroid-blog__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }
.bgstroid-blog__date {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 5px;
  background: var(--bgb-date, #f2a70d);
  color: var(--bgb-on-date, #000);
  font-size: 14px;
  font-weight: 700;
}
.bgstroid-blog__card--no-image .bgstroid-blog__date { position: static; margin: 20px 24px 0; }
.bgstroid-blog__title { margin: 0 0 14px; font-size: 20px; line-height: 1.4; font-weight: 700; }
.bgstroid-blog__title a { color: var(--bgb-text); text-decoration: none; }
.bgstroid-blog__title a:hover { color: var(--bgb-text); text-decoration: underline; text-decoration-color: var(--bgb-accent); }
.bgstroid-blog__intro { margin: 0 0 22px; font-size: 16px; line-height: 1.65; }
.bgstroid-blog__readmore,
.bgstroid-blog__readmore:visited {
  display: inline-block;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--bgb-date, #f2a70d);
  color: var(--bgb-on-date, #000);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.bgstroid-blog__readmore:hover { background: var(--bgb-accent); color: var(--bgb-on-accent, #000); }
.bgstroid-blog__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; }
.bgstroid-blog__controls[hidden] { display: none; }
.bgstroid-blog__button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bgb-accent);
  color: var(--bgb-on-accent, #000);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: opacity 160ms ease, transform 160ms ease;
}
.bgstroid-blog__button:hover:not(:disabled) { transform: translateY(-2px); }
.bgstroid-blog__button:disabled { opacity: .35; cursor: default; }
.bgstroid-blog__button:focus-visible,
.bgstroid-blog__readmore:focus-visible,
.bgstroid-blog__title a:focus-visible { outline: 3px solid #202020; outline-offset: 3px; }
.bgstroid-blog__status { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) {
  .bgstroid-blog { --bgb-gap: 20px; }
  .bgstroid-blog__track { grid-template-columns: repeat(var(--bgb-tablet, 2), minmax(0, 1fr)); }
  .bgstroid-blog.is-carousel .bgstroid-blog__card { flex-basis: calc((100% + var(--bgb-gap)) / var(--bgb-tablet, 2) - var(--bgb-gap)); }
}
@media (max-width: 599.98px) {
  .bgstroid-blog { --bgb-gap: 16px; }
  .bgstroid-blog__track { grid-template-columns: repeat(var(--bgb-mobile, 1), minmax(0, 1fr)); }
  .bgstroid-blog.is-carousel .bgstroid-blog__card { flex-basis: calc((100% + var(--bgb-gap)) / var(--bgb-mobile, 1) - var(--bgb-gap)); }
}
@media (prefers-reduced-motion: reduce) {
  .bgstroid-blog.is-carousel .bgstroid-blog__track { scroll-behavior: auto; }
  .bgstroid-blog__button { transition: none; }
}