/* ONE PLUS Cases — scoped .op-cases-* only */

.op-cases {
  padding: 72px 0 64px;
  background: #fff;
}

.op-cases__head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.op-cases__title {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  color: #131313;
}

.op-cases__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4a5b6e;
}

.op-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.op-cases-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #e4ebf4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(9, 43, 150, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.op-cases-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(9, 43, 150, 0.1);
}

.op-cases-card.is-hidden {
  display: none;
}

.op-cases-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #e8eef6;
  overflow: hidden;
}

.op-cases-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.op-cases-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
  gap: 10px;
}

.op-cases-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.op-cases-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #086cdc;
  background: #eef5fc;
}

.op-cases-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #131313;
}

.op-cases-card__title a {
  color: inherit;
  text-decoration: none;
}

.op-cases-card__title a:hover,
.op-cases-card__title a:focus-visible {
  color: #086cdc;
}

.op-cases-card__excerpt {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #4a5b6e;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.op-cases-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  align-self: flex-start;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(145deg, #2a8ef0 0%, #2380eb 45%, #092b96 100%);
  box-shadow: 0 10px 24px rgba(35, 128, 235, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.op-cases-card__link:hover,
.op-cases-card__link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(35, 128, 235, 0.32);
  outline: none;
}

.op-cases-card__link:focus-visible {
  outline: 2px solid #086cdc;
  outline-offset: 2px;
}

.op-cases__actions {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.op-cases__more,
.op-cases__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(145deg, #2a8ef0 0%, #2380eb 45%, #092b96 100%);
  box-shadow: 0 10px 24px rgba(35, 128, 235, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.op-cases__more:hover,
.op-cases__all:hover,
.op-cases__more:focus-visible,
.op-cases__all:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(35, 128, 235, 0.35);
  outline: none;
}

.op-cases__more:focus-visible,
.op-cases__all:focus-visible {
  outline: 2px solid #086cdc;
  outline-offset: 2px;
}

.op-cases__more[hidden],
.op-cases__all[hidden] {
  display: none !important;
}

/* Archive */
.op-cases-archive {
  padding: 48px 0 72px;
  background: #fff;
}

.op-cases-archive__head {
  max-width: 760px;
  margin: 0 0 36px;
}

.op-cases-archive__title {
  margin: 12px 0 10px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: #131313;
}

.op-cases-archive__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4a5b6e;
}

.op-cases-archive__pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.op-cases-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin: 0 4px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #131313;
  background: #f0f4f9;
}

.op-cases-archive__pagination .page-numbers.current,
.op-cases-archive__pagination .page-numbers:hover {
  color: #fff;
  background: linear-gradient(91.91deg, #092b96 0%, #086cdc 100%);
}

/* Single */
.op-cases-single {
  padding: 0 0 72px;
  background: #fff;
}

.op-cases-single__hero {
  padding: 28px 0 8px;
  background: linear-gradient(180deg, #f0f4f9 0%, #fff 100%);
}

.op-cases-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}

.op-cases-single__title {
  margin: 0 0 16px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: #131313;
}

.op-cases-single__cover {
  margin: 0 0 28px;
  border-radius: 20px;
  overflow: hidden;
  background: #e8eef6;
}

.op-cases-single__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.op-cases-single__excerpt {
  margin: 0 0 28px;
  padding: 20px 22px;
  border-radius: 16px;
  background: #f6f8fb;
  border: 1px solid #e4ebf4;
}

.op-cases-single__excerpt-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #086cdc;
}

.op-cases-single__excerpt-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #131313;
}

.op-cases-single__content {
  font-size: 16px;
  line-height: 1.7;
  color: #131313;
}

.op-cases-single__content > *:first-child {
  margin-top: 0;
}

.op-cases-single__content h2,
.op-cases-single__content h3 {
  margin: 1.6em 0 0.6em;
  line-height: 1.3;
}

.op-cases-single__aside {
  margin-top: 40px;
  display: grid;
  gap: 24px;
}

.op-cases-single__box {
  padding: 22px 24px;
  border-radius: 20px;
  background: #f6f8fb;
  border: 1px solid #e4ebf4;
}

.op-cases-single__box-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #131313;
}

.op-cases-single__service-link,
.op-cases-single__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(145deg, #2a8ef0 0%, #2380eb 45%, #092b96 100%);
}

.op-cases-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1024px) {
  .op-cases__grid,
  .op-cases-single__related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .op-cases {
    padding: 56px 0 48px;
  }

  .op-cases__title,
  .op-cases-archive__title,
  .op-cases-single__title {
    font-size: 28px;
  }

  .op-cases__grid,
  .op-cases-single__related-grid {
    grid-template-columns: 1fr;
  }

  .op-cases__more,
  .op-cases__all {
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 430px) {
  .op-cases-card__body {
    padding: 16px;
  }

  .op-cases-single__title {
    font-size: 24px;
  }
}

/* Blog-like single case — full-width hero, then content + sidebar column */
.op-cases-single-blog .article-wrap.op-cases-article-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

.op-cases-single-blog .op-cases-hero-image,
.op-cases-single-blog .article-wrap__content--image.op-cases-hero-image {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 458px;
  margin: 0 0 40px;
}

.op-cases-single-blog .op-cases-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.op-cases-hero-image__views,
.op-cases-single-blog .op-cases-hero-image .article-wrap__content--image-date {
  position: absolute;
  top: 15px;
  z-index: 2;
  font-size: 16px;
  line-height: 20px;
  color: #777;
  padding: 5px 8px;
  border-radius: 5px;
  background-color: #f8fafd;
  box-shadow: 0 4px 14px rgba(9, 43, 150, 0.08);
}

.op-cases-hero-image__views {
  left: 15px;
  right: auto;
}

.op-cases-single-blog .op-cases-hero-image .article-wrap__content--image-date {
  right: 15px;
  left: auto;
}

.op-cases-body-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
}

.op-cases-single-blog .op-cases-article-main {
  width: 100%;
  max-width: 956px;
  margin-right: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

.op-cases-sidebar-col {
  position: sticky;
  top: 200px;
  width: 100%;
  max-width: 302px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 302px;
}

.op-cases-single-blog .article-wrap__sidebar {
  position: static;
  top: auto;
  max-width: 100%;
  width: 100%;
}

.op-cases-keywords .item {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 30px;
  color: #000;
}

.op-cases-keywords .item:last-child {
  margin-bottom: 0;
}

/* Rating card in sidebar — white plaque, interactive stars (same as top YASR) */
.op-cases-rating {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 20px 18px 18px;
  box-sizing: border-box;
  border-radius: 18px;
  border: 1px solid #e6ecf4;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(9, 43, 150, 0.07);
  text-align: left;
}

.op-cases-rating__title {
  margin: 0 0 14px;
  color: #131313;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}

.op-cases-rating__stars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
  margin: 0 0 10px;
}

.op-cases-rating__stars .yasr-visitor-votes,
.op-cases-rating__stars .yasr-vv-second-row-container,
.op-cases-rating__stars .yasr-rater-stars-vv {
  margin: 0 !important;
}

.op-cases-rating__stars .yasr-rater-stars-vv {
  cursor: pointer;
}

.op-cases-rating .yasr-custom-text-vv-before,
.op-cases-rating .yasr-custom-text-vv-after,
.op-cases-rating .yasr-vv-stats-text-container,
.op-cases-rating .yasr-vv-bottom-container {
  display: none !important;
}

.op-cases-rating__count,
.op-cases-rating .rating-count {
  margin: 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: #131313;
}

/* Contacts pills (same design as services/blog). Own wrapper — not .article-wrap__sidebar. */
.op-cases-contacts {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 22px 18px 20px;
  border-radius: 18px;
  background: #f4f6fa;
  box-sizing: border-box;
}

.op-cases-contacts__title {
  margin: 0 0 16px;
  color: #131313;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}

.op-cases-contacts .op-service-contact-btns--sidebar {
  margin: 0;
  max-width: 100%;
}

.op-cases-contacts .op-service-contact-btns__grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.op-cases-contacts a.op-service-contact-btns__btn,
.op-cases-contacts .op-service-contact-btns__btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow: hidden !important;
  z-index: 0;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 10px 16px 10px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(145deg, #2a8ef0 0%, #2380eb 45%, #092b96 100%) !important;
  color: #fff !important;
  font-size: inherit !important;
  line-height: normal !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(35, 128, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.op-cases-contacts a.op-service-contact-btns__btn:hover,
.op-cases-contacts a.op-service-contact-btns__btn:focus-visible,
.op-cases-contacts .op-service-contact-btns__btn:hover,
.op-cases-contacts .op-service-contact-btns__btn:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(9, 43, 150, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, #3a98f5 0%, #2a8ef0 40%, #0a3aad 100%) !important;
}

.op-cases-contacts .op-service-contact-btns__icon {
  position: relative !important;
  display: block !important;
  z-index: 1;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.op-cases-contacts .op-service-contact-btns__icon::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.op-cases-contacts .op-service-contact-btns__btn--office .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 4.8c.5-1 1.6-1.3 2.5-.8l1.5.8c.8.4 1.1 1.4.7 2.2l-.7 1.4c-.2.5-.1 1 .2 1.4 1 1.3 2.3 2.5 3.7 3.4.4.3 1 .3 1.4.1l1.5-.7c.8-.4 1.8-.1 2.2.7l.8 1.5c.5.9.2 2-.8 2.5-1.2.6-2.7.8-4.1.3-3.2-1.2-6-3.9-7.1-.6-1.4-.5-3 .2-4.3Z' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--email .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='m5.5 7.5 6.5 5 6.5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--viber .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.4 2.1c-4.8.1-8.7 3.9-8.9 8.7-.1 2.3.7 4.4 2.1 6l-.7 3.3 3.4-.7c1.5 1 3.3 1.5 5.1 1.5h.2c4.9-.1 8.8-4.1 8.8-9 0-4.8-4-8.7-10-8.8Zm4.9 12.3c-.2.5-1.1.9-1.5 1-.4.1-.8.3-2.6-.6-2.2-1.1-3.6-3.5-3.7-3.7-.1-.2-.9-1.2-.9-2.3 0-1.1.6-1.6.8-1.8.2-.2.4-.3.6-.3h.4c.1 0 .3 0 .4.3.2.4.5 1.3.6 1.4.1.1.1.3 0 .4l-.3.4c-.1.1-.2.3-.1.5.1.2.5.8 1.1 1.3.7.7 1.3 1 1.5 1.1.2.1.3.1.5 0l.6-.7c.1-.2.3-.2.5-.1.2.1 1.2.6 1.4.7.2.1.3.2.4.3.1.1.1.6-.1 1.1Z'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--telegram .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21.5 4.3 3.9 11.1c-1.2.5-1.2 1.1-.2 1.4l4.5 1.4 1.7 5.3c.2.6.1.8.7.8.5 0 .7-.2 1-.5l2.3-2.2 4.8 3.5c.9.5 1.5.2 1.7-.8L22.9 5.5c.3-1.2-.5-1.7-1.4-1.2ZM9.6 14.3l8.8-5.5c.4-.3.8-.1.5.2l-7.1 6.4-.3 3.1-1.9-4.2Z'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--whatsapp .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.43-9.91 9.88 0 1.74.46 3.44 1.33 4.94L2 22l5.35-1.4a9.93 9.93 0 0 0 4.69 1.19h.01c5.46 0 9.91-4.43 9.91-9.88C21.96 6.43 17.5 2 12.04 2Zm0 18.07h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.17.83.85-3.09-.2-.32a8.14 8.14 0 0 1-1.25-4.36c0-4.5 3.68-8.16 8.2-8.16 4.52 0 8.2 3.66 8.2 8.16 0 4.5-3.68 8.16-8.14 8.16Zm4.5-6.12c-.25-.12-1.46-.72-1.69-.8-.23-.09-.39-.12-.56.12-.17.25-.64.8-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.09-.17.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.42h-.48c-.17 0-.43.06-.66.31-.23.25-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.24 3.74 1.49.64 1.91.65 2.6.55.42-.06 1.46-.6 1.67-1.17.21-.58.21-1.07.14-1.17-.06-.1-.23-.17-.48-.29Z'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__meta {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.op-cases-contacts .op-service-contact-btns__label {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.op-cases-contacts .op-service-contact-btns__value {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.25 !important;
  word-break: break-word;
}

.op-cases-content-panel {
  position: relative;
  padding: 28px 30px 32px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 253, 0.98) 100%);
  border: 1px solid #e6ecf4;
  box-shadow: 0 12px 32px rgba(9, 43, 150, 0.06);
  overflow: hidden;
}

.op-cases-content-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2a8ef0 0%, #092b96 100%);
  border-radius: 20px 0 0 20px;
}

.op-cases-single__excerpt--blog {
  margin: 0 0 24px;
}

.op-cases-single__inline-cta {
  margin: 24px 0 0;
}

.op-cases-single__inline-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(145deg, #2a8ef0 0%, #2380eb 45%, #092b96 100%);
}

.op-cases-faq {
  margin-top: 56px;
  padding-top: 40px;
  padding-bottom: 64px;
}

@media (max-width: 1100px) {
  .op-cases-sidebar-col {
    position: static;
    max-width: 100%;
    flex: 1 1 auto;
    margin-top: 0;
  }

  .op-cases-body-row {
    flex-direction: column;
    gap: 28px;
  }

  .op-cases-single-blog .op-cases-article-main {
    max-width: 100%;
  }

  .op-cases-single-blog .op-cases-hero-image,
  .op-cases-single-blog .article-wrap__content--image.op-cases-hero-image {
    height: 320px;
  }
}

/* Blog theme hides .article-wrap__sidebar below 1024px — keep Cases sidebars visible */
@media (max-width: 1024px) {
  .op-cases-single-blog .op-cases-sidebar-col,
  .op-cases-single-blog .article-wrap__sidebar {
    display: block !important;
  }

  .op-cases-single-blog .op-cases-sidebar-col {
    display: flex !important;
  }
}

@media (max-width: 668px) {
  .op-cases-single-blog .op-cases-hero-image,
  .op-cases-single-blog .article-wrap__content--image.op-cases-hero-image {
    height: 220px;
    margin-bottom: 24px;
  }

  .op-cases-hero-image__views,
  .op-cases-single-blog .op-cases-hero-image .article-wrap__content--image-date {
    font-size: 13px;
    line-height: 18px;
    padding: 4px 7px;
    top: 10px;
  }

  .op-cases-hero-image__views {
    left: 10px;
  }

  .op-cases-single-blog .op-cases-hero-image .article-wrap__content--image-date {
    right: 10px;
  }

  .op-cases-content-panel {
    padding: 20px 18px 22px;
  }
}