.index {
  display: grid;
  row-gap: 16px;
  margin-bottom: 16px;
  padding-top: 16px;
}

.index__top-image {
  height: 652px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.index__block {
  padding: 40px 16px;
  background-color: var(--grey-background);
}

.index__section-top {
  margin-bottom: 48px;

  p {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    letter-spacing: -0.18px;
    text-transform: uppercase;
    color: var(--tertiary-grey);
  }
}

.index__block-content {
  position: relative;

  h2 {
    width: 227px;
    margin-bottom: 24px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.4px;
    color: var(--black-label);
  }

  p {
    margin-bottom: 40px;
  }
}

.index__block-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background-size: cover;
}

.index__block-content.service-1::after {
  background-image: url("../../assets/images/index-service-1.webp");
}

.index__block-content.service-2::after {
  background-image: url("../../assets/images/index-service-2.webp");
}

.index__block-content.service-3::after {
  background-image: url("../../assets/images/index-service-3.webp");
}

.index__block-content.service-4::after {
  background-image: url("../../assets/images/index-service-4.webp");
}

.index__block-content.service-5::after {
  background-image: url("../../assets/images/index-service-5.webp");
}

.index__block-content.service-6::after {
  background-image: url("../../assets/images/index-service-6.webp");
}

.index__block-content.service-7::after {
  background-image: url("../../assets/images/index-service-7.webp");
}

.index__block-content.service-8::after {
  background-image: url("../../assets/images/index-service-8.webp");
}

.index__block-content.service-9::after {
  background-image: url("../../assets/images/index-service-9.webp");
}

.index__block-content.service-10::after {
  background-image: url("../../assets/images/index-service-10.webp");
}

.index__block-content.service-11::after {
  background-image: url("../../assets/images/index-service-11.webp");
}

.index__block-content.service-12::after {
  background-image: url("../../assets/images/index-service-12.webp");
}

.index__block-content.service-13::after {
  background-image: url("../../assets/images/index-service-13.webp");
}

.index__block-btns {
  display: grid;
  row-gap: 21px;
}

/*mobile portrait*/
@media (min-width: 478px) {
  .index__top-image {
    height: 720px;
  }

  .index__block-content {
    h2 {
      width: 275px;
    }
  }

  .index__block-content::after {
    width: 80px;
    height: 80px;
  }
}

/*mobile landscape*/
@media (min-width: 767px) {
  .index__top-image {
    height: 748px;
  }

  .index__block {
    padding: 56px 20px 56px 40px;
  }

  .index__block-content {
    h2,
    p {
      width: 489px;
    }

    h2 {
      margin-bottom: 32px;
      font-size: 48px;
      line-height: 110%;
      letter-spacing: -0.48px;
    }

    p {
      margin-bottom: 48px;
      font-size: 20px;
      line-height: 150%;
    }
  }

  .index__block-content::after {
    width: 118px;
    height: 118px;
  }

  .index__block-btns {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
}

/*tablet*/
@media (min-width: 991px) {
  .index__block {
    padding: 100px 20px 100px 136px;
  }

  .index__block-content {
    h2,
    p,
    .index__block-btns {
      width: 498px;
    }
  }

  .index__block-content::after {
    width: 213px;
    height: 213px;
  }
}

/*desktop*/
@media (min-width: 1400px) {
  .index__top-image {
    height: 765px;
  }

  .index__block {
    padding: 100px 20px 100px 355px;
  }

  .index__block-content::after {
    top: auto;
    bottom: 0;
    width: 315px;
    height: 315px;
  }
}