@font-face {
  font-family: "Gotham Pro";
  src: url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothaproreg-webfont.eot");
  src: url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothaproreg-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothapromed-webfont.eot");
  src: url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothapromed-webfont.woff") format("woff"),
    url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothapromed-webfont.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothaprobol-webfont.eot");
  src: url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothaprobol-webfont.woff") format("woff"),
    url("https://cdn3.mbschool.ru/mti.edu.ru/fonts/gothaprobol-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;  
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
  clip: auto !important;
  -webkit-clip-path: none !important;
    clip-path: none !important;
  height: auto !important;
  margin: auto !important;
  overflow: visible !important;
  width: auto !important;
  white-space: normal !important;
}

body {
  margin: 0;
}

.row-container {
  max-width: 100%;
}

.article-container {
  --fontSize: clamp(12px, 3vw, 16px);
  --h2_font_size: clamp(18px, 3vw, 22px);
  --h3_font_size: clamp(16px, 3vw, 20px);
  --container-width: 938px;
  --brand-color: #484350;
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
}

.article-container * {
  box-sizing: border-box;
  font-size: var(--fontSize);
  line-height: 1.5em;

}

.article-container ul {
  padding: 0;
}

.article-container li {
  list-style: none;
}

img {
  max-width: 100%;
}

.article-container h3 {
  margin-bottom: 0.4em;
  font-size: var(--h3_font_size);
  line-height: 1.1;
  color: var(--brand-color)
}

.article-container h4 {
  color: var(--brand-color);
  margin-bottom: 0;
  margin: .7em 0 0;
}

.article-container h4+p {
  margin-top: 0;
}

.article-container h3+p {
  margin: .4em 0;
}

.types-list {
  margin-top: .4em;
}

.types-list b {
  color: var(--brand-color);
}

.types-list li {
  margin-bottom: .5em;
}

.row-img {
  max-width: var(--container-width);
  position: relative;
  padding: 0 0 45% 0;
  height: 0;
  overflow: hidden;
  margin-top: 50px;
  margin-bottom: 33px;

}

.row-img__title {
  position: absolute;
  top: 50%;
  left: 35px;
  transform: translateY(-50%);
  line-height: 1.1;
  font-weight: 700;
  font-size: clamp(22px, 5vw, 50px);
  color: #fff;
}


.row-img.top {
  padding: 0 0 59% 0;
}

.article-block.conclusion {
  background-color: var(--brand-color);
  color: white;
  margin: 30px 0;
  background-image: url(https://cdn3.mbschool.ru/mbschool/articles/subsidii-i-raznye-pliushki-dlia-biznesa/img/bg_baner.jpg);
  font-weight: 700;
  padding: 2em;
}
.programms-list {
  padding: 0;
  margin: 2em 0 1em;
}
.programms-list a {
  font-size: 15px;
  font-weight: 700;
  color: #C52A39;
}
.article-block.conclusion .article-title {
  color: white;
}

.row-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-block {
  padding: 0 1em;
}

.article-container h2 {
  font-weight: 700;
  color: var(--brand-color);
  font-size: var(--h2_font_size);
  margin-bottom: 12px;
  margin-top: 27px;
  line-height: 1.1;
}

.article-accent {
  font-size: var(--fontSize);
  font-weight: 700;
  line-height: 1.6em;
  color: var(--brand-color);
}
.bg-block {
  padding: 4em 2.5em;
  background-color: var(--brand-color);
  
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  margin: 3em 0 1em;
}
.bg-block.first {
  background-image: url(https://cdn3.mbschool.ru/mbschool/articles/chto-takoe-greiding/img/baner_bg_1.jpg);
}
.bg-block.second {
  background-image: url(https://cdn3.mbschool.ru/mbschool/articles/chto-takoe-greiding/img/baner_bg_2.jpg);
}
.bg-block h2 {
  font-size: var(--fontSize);
  color: #fff;
  text-decoration: underline;
  margin: 0 0 1.7em;
}
.bg-block a {
  color: #fff;
}

h3.number {
  position: relative;
  --left-offset: 2.8em;
  padding-left: var(--left-offset);
  margin: 2em 0 1.5em;
}
h3.number::before {
  content: attr(data-number);
  position: absolute;
  --size: calc(var(--left-offset) - .9em);
  width: var(--size);
  height: var(--size);
  color: #fff;
  font-weight: 700;
  background-color: var(--brand-color);
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
}

/* table _____________________________________________ */
.mb-table {
  border-collapse: collapse;
}
.mb-table thead {
  background-color: #B6A9A5;
  color: #fff;
}
.mb-table td {
  background-color: #E0DBDA;
}
.mb-table :where(td, th) {
  border: 1px solid #707070;
}
.mb-table td {
  padding: 1em;
}
.mb-table th {
  padding: .5em;
}

/* list-elements ________________________________________________________________*/

.circle-num-list {
  counter-reset: number;
}
.circle-num-list li {
  counter-increment: number;
  position: relative;
  --top-offset: 4em;
  margin-top: var(--top-offset);
}
.circle-num-list li::before {
  content: counter(number);
  position: absolute;
  top: calc(var(--top-offset) * -0.6);
  left: 0;
  --size: calc(var(--top-offset) * 0.5);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: var(--brand-color);
  color: #fff;
  font-size: clamp(12px, 5vw, 18px);
  font-weight: 700;
  display: grid;
  place-items: center;
}


.recommended-list {
  margin: 2em 0;
}
.recommended-list a {
  color: var(--brand-color);
  font-weight: 700;
}
.recommended-list li {
  margin-bottom: .5em;
}

.just-list li {
  margin-bottom: .5em;
}
.just-list b {
  text-transform: uppercase;
  font-size: calc(var(--fontSize) + 2px);
  color: var(--brand-color);
}

.check-list li,
.check-list-image li {
  position: relative;
  padding-left: 2.2em;
  margin-bottom: 0.6em;
}
.check-list li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 6px;
  border: 4px solid transparent;
  border-bottom-color: var(--brand-color);
  border-left-color: var(--brand-color);
  border-radius: 4px;
  transform: rotate(-45deg);
}

.check-list-image li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  --size: 1.2em;
  width: var(--size);
  height: var(--size);
  background: url(https://cdn3.mbschool.ru/mbschool/articles/subsidii-i-raznye-pliushki-dlia-biznesa/img/check_circle.svg) no-repeat center / contain;
}
b.colored {
  color: var(--brand-color);
  font-weight: 700;
}
.note {
  position: relative;
  color: #fff;
  width: max-content;
  font-weight: 700;
  padding: .1em 1em .1em 0;
}

.note span {
  position: relative;
  z-index: 4;
  color: #fff;
}

.note::before {
  content: '';
  position: absolute;
  width: calc(100% + 2em);
  height: 100%;
  background-color: var(--brand-color);
  left: -2em;
  top: 0;
  z-index: 0;
}
.conclusion-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-color);
}
h3.note {
  margin: 2em 0 1em;
  padding-left: 1em;
}
h3.note::before {
  width: 100%;
  left: 0;
}
.triangle-item {
  position: relative;
  padding-left: 35px;
  margin-bottom: 25px;
}

.triangle-item::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 22px;
  height: 35px;
  background-size: contain;
  background-image: url(https://cdn3.mbschool.ru/mbschool-article/healthy_business/dark_gray_triangle.svg);
  background-repeat: no-repeat;
}

.circle-list li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.6em;
}

.circle-list li::before {
  position: absolute;
  content: '';
  top: 8px;
  left: 0;
  width: 9px;
  height: 9px;
  background-color: var(--brand-color);
  border-radius: 50%;
}

.circle-list.white li::before {
  background-color: white;
}

.number-list {
  counter-reset: number;
}

.number-list li {
  position: relative;
  padding-left: 2em;
  margin: 0;
  margin-bottom: 1em;
}

.number-list li::before {
  content: counter(number);
  counter-increment: number;
  position: absolute;
  top: -3px;
  left: 3px;
  font-size: clamp(14px, 4vw, 23px);
  font-weight: bold;
  color: var(--brand-color);
}

/* footer-block ___________________________________________________________________ */

.article-footer_link {
  margin-top: 60px;
  max-width: 343px;
  margin-inline: auto;
}

.article-footer_link a {
  white-space: nowrap;
  display: block;
  text-align: center;
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  background-color: #E20404;
  transition: background-color .3s ease-out;
}

.article-footer_link a:hover {
  background-color: #a11616;
}

.author {
  width: 200px;
  margin: 70px auto 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.author img {
  width: 107px;
  margin-bottom: 30px;
}

.author__desc {
  text-align: center;
  position: relative;
}

.author__desc::after {
  content: '';
  position: absolute;
  width: 173px;
  height: 1px;
  background-color: #464646;
  top: -10px;
  left: 10px;
}

@media (max-width: 480px) {

  .article-footer_link a {
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    width: max-content;
  }

  .digital-transform-footer {
    padding: 0 7%;
  }

  .triangle-item {
    margin-bottom: 10px;
    padding-left: 30px;
  }

  .row-img {
    margin-bottom: 20px;
    margin-top: 30px;
  }

  .row-img__title {
    left: 7%;
  }

  .triangle-item::before {
    width: 18px;
    height: 30px;
  }

  .check-list li {
    padding-left: 1.9em;
  }

  .check-list li::before {
    width: 10px;
    height: 4px;
    border-width: 3px;
    top: 0;
  }
}