.services {
  padding-top: 40px;
  padding-bottom: 20px;
}
.services ul {
  padding-left: 29px;
  padding-right: 15px;
}
.services li {
  position: relative;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;

  @media (max-width: 992px) {
    font-size: 18px;
  }
  @media (max-width: 768px) {
    font-size: 16px;
  }
  @media (max-width: 500px) {
    font-size: 14px;
  }
}

/*  */
/* TOP CONTAINER */
/*  */
.services__top-container {
  display: grid;
  grid-template-areas:
    'advantages inetTV inetTV'
    'advantages dvr domofon';
  grid-template-rows: minmax(230px, auto) minmax(358px, auto);
  grid-template-columns: auto minmax(auto, 291px) minmax(auto, 291px);
  gap: 12px;

  @media (max-width: 1200px) {
    grid-template-rows: 1fr minmax(300px, auto);
    grid-template-columns: auto minmax(auto, 260px) minmax(auto, 260px);
  }
  @media (max-width: 1100px) {
    grid-template-rows: 1fr minmax(300px, auto);
    grid-template-columns: auto auto auto;
  }
  @media (max-width: 930px) {
    grid-template-areas:
      'inetTV inetTV'
      'advantages dvr'
      'advantages domofon';
    grid-template-rows: minmax(230px, auto) auto;
    grid-template-columns: auto minmax(auto, 260px);
  }
  @media (max-width: 768px) {
    grid-template-rows: minmax(230px, auto) auto;
    grid-template-columns: auto minmax(auto, 230px);
    gap: 8px;
  }
  @media (max-width: 560px) {
    grid-template-areas:
      'inetTV inetTV'
      'advantages advantages'
      'dvr domofon';
    grid-template-rows: minmax(220px, auto) auto minmax(auto, 260px);
    grid-template-columns: 1fr 1fr;
  }
}

.services__top-container > *,
.services__bottom-container > * {
  cursor: default;
  user-select: none;
  border-radius: 12px;
  overflow: hidden;
}

.services__top-container img,
.services__bottom-container img {
  transition: transform 0.5s ease-in-out;
}

.services__top-container > *:hover img,
.services__bottom-container > *:hover img {
  @media (hover: hover) {
    transform: scale(1.07);
  }
}

.services__heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.53;
  letter-spacing: 0.1px;
  color: white;

  @media (max-width: 1200px) {
    font-size: 22px;
  }
  @media (max-width: 768px) {
    font-size: 20px;
  }
  @media (max-width: 500px) {
    font-size: 18px;
  }
}
.services__heading br,
.services__heading span {
  display: none;

  @media (max-width: 460px) {
    display: inline;
  }
}

/* Advantages */
.advantages {
  position: relative;

  grid-area: advantages;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 40px 20px 80px;

  overflow: hidden;

  @media (max-width: 1200px) {
    padding: 40px 20px 60px;
  }
  @media (max-width: 930px) {
    gap: 60px;

    padding: 40px 20px 80px;
  }
  @media (max-width: 670px) {
    gap: 55px;

    padding: 40px 20px 60px;
  }
  @media (max-width: 560px) {
    gap: 35px;

    padding: 40px 20px 40px;
  }
  @media (max-width: 460px) {
    gap: 30px;
  }
}
.advantages__image-wrapper,
.inetTV__image-wrapper,
.dvr__image-wrapper,
.domofon__image-wrapper,
.mobile__image-wrapper,
.gate__image-wrapper,
.prazdnik__image-wrapper {
  position: absolute;
  inset: 0;
  z-index: -1;

  display: flex;
}

.advantages__image {
  object-position: top;
}
.advantages__text {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;

  color: white;

  @media (max-width: 1200px) {
    font-size: 34px;
  }
  @media (max-width: 1100px) {
    font-size: 28px;
  }
  @media (max-width: 930px) {
    font-size: 34px;
  }
  @media (max-width: 830px) {
    font-size: 28px;
  }
  @media (max-width: 670px) {
    font-size: 20px;
  }
  @media (max-width: 560px) {
    font-size: 26px;
  }
  @media (max-width: 460px) {
    font-size: 22px;
  }
}
.advantages__text_1 {
  align-self: start;
}
.advantages__text_2 {
  align-self: end;
}
.advantages__text_3 {
  align-self: start;
}
.advantages__text_4 {
  align-self: end;
}

/* InetTV */
.inetTV {
  position: relative;

  grid-area: inetTV;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 17px 30px;

  @media (max-width: 1200px) {
    padding: 20px 17px;
  }
}
.inetTV__image-wrapper {
  background-color: #000;
}
.inetTV__image {
  object-position: left;

  @media (max-width: 500px) {
    opacity: 0.5;
  }
}
.inetTV__desc {
  margin-top: 20px;
  margin-right: 22px;

  text-align: end;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: white;

  @media (max-width: 768px) {
    margin-right: 0;
  }
  @media (max-width: 500px) {
    font-size: 14px;
  }
}

/* DVR */
.dvr {
  position: relative;

  grid-area: dvr;

  padding: 20px 10px;

  @media (max-width: 410px) {
    padding: 14px 10px;
  }
}
.dvr__image {
  object-position: bottom;
}

/* Domofon */
.domofon {
  position: relative;

  grid-area: domofon;

  padding: 20px 10px;

  @media (max-width: 410px) {
    padding: 14px 10px;
  }
}
.domofon__image-wrapper {
  background-color: #c6c6c6;
}
.domofon__image {
  object-position: top;
  @media (max-width: 410px) {
    object-position: right 25px;
  }
}

.domofon__heading {
  color: black;
}

/*  */
/* BOTTOM CONTAINER */
/*  */
.services__bottom-container {
  display: grid;
  grid-template-areas:
    'business mobile mobile'
    'business gate prazdnik';
  grid-template-columns: minmax(auto, 392px) minmax(auto, 291px) auto;
  grid-template-rows: minmax(230px, auto) minmax(258px, auto);
  gap: 12px;

  @media (max-width: 1100px) {
    grid-template-columns: minmax(300px, auto) minmax(216px, auto) minmax(
        340px,
        auto
      );
    grid-template-rows: minmax(220px, auto) minmax(220px, auto);
  }
  @media (max-width: 930px) {
    grid-template-areas:
      'business business mobile'
      'gate prazdnik prazdnik';
    grid-template-columns: 0.6fr 0.4fr 1fr;
    grid-template-rows: auto minmax(220px, auto);
  }
  @media (max-width: 768px) {
    grid-template-areas:
      'business business mobile mobile'
      'gate prazdnik prazdnik prazdnik';
    grid-template-columns: 0.8fr 0.2fr 0.8fr 0.2fr;
    gap: 8px;
  }
  @media (max-width: 500px) {
    grid-template-areas:
      'mobile'
      'business'
      'gate'
      'prazdnik';
    grid-template-columns: auto;
    grid-template-rows: auto auto minmax(230px, auto) minmax(180px, auto);

    gap: 8px;
  }
}
.services__bottom-container_mt {
  margin-top: 12px;

  @media (max-width: 768px) {
    margin-top: 8px;
  }
}

.services__heading.services__heading_black {
  color: black;
}

/* Business */
.business {
  position: relative;

  grid-area: business;
  display: flex;
  flex-direction: column;
  gap: 15px;

  padding-top: 20px;

  background-color: white;

  @media (max-width: 930px) {
    gap: 10px;
  }
}
.business .services__heading {
  margin-left: 22px;

  @media (max-width: 930px) {
    margin-left: 12px;
  }
}

.business__image-wrapper {
  margin-top: auto;

  background-color: white;
}
.business__image {
  object-position: bottom;
}
.business__desc-list {
  margin-left: 16px;

  @media (max-width: 930px) {
    margin-left: 2px;
  }
}

/* Mobile */
.mobile {
  position: relative;

  grid-area: mobile;
  display: flex;
  flex-direction: column;
  background-color: #d5f2f9;
}
.mobile .services__heading {
  position: relative;
  z-index: 2;

  padding: 20px 23px 0;

  @media (max-width: 930px) {
    padding: 20px 12px 0;
  }
}

.mobile__desc-list {
  position: relative;
  z-index: 2;

  margin-top: 20px;
  margin-left: 23px;

  @media (max-width: 930px) {
    margin-top: 10px;
    margin-left: 2px;
  }
  @media (max-width: 500px) {
    margin-bottom: 15px;
    margin-right: 130px;
  }
  @media (max-width: 420px) {
    margin-right: 15px;
  }
}

.mobile__image-wrapper {
  right: 0;
  left: 59%;
  z-index: 1;

  overflow: hidden;

  @media (max-width: 930px) {
    position: relative;
    left: 0;

    margin-top: auto;
  }
  @media (max-width: 500px) {
    position: absolute;
    left: 59%;
  }
  @media (max-width: 420px) {
    position: relative;
    left: 0;

    margin-top: auto;
  }
}
.mobile__image-wrapper::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;

  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(213, 242, 249, 0.2) 70%,
    rgba(213, 242, 249, 1) 100%
  );

  @media (min-width: 420px) {
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(213, 242, 249, 0.2) 70%,
      rgba(213, 242, 249, 1) 100%
    );
  }

  @media (min-width: 500px) {
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(213, 242, 249, 0.2) 70%,
      rgba(213, 242, 249, 1) 100%
    );
  }

  @media (min-width: 930px) {
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(213, 242, 249, 0.2) 70%,
      rgba(213, 242, 249, 1) 100%
    );
  }
}

.mobile__image {
  object-position: right;
}

/* Gate */
.gate {
  position: relative;

  grid-area: gate;
  padding: 20px 16px;

  @media (max-width: 500px) {
    padding: 20px 12px;
  }
}
.gate__image-wrapper {
  background-color: #c1c1c1;
  background: radial-gradient(
    circle,
    rgba(193, 193, 193, 0.3) 100%,
    rgba(255, 255, 255, 0.2) 0%
  );
}
.gate__image {
  object-position: 102%;

  @media (max-width: 500px) {
    object-position: 140%;
  }
  @media (max-width: 450px) {
    object-position: 120%;
  }
}

/* Prazdnik */
.prazdnik {
  position: relative;

  grid-area: prazdnik;
}
.prazdnik .services__heading {
  padding: 20px 16px 0;

  @media (max-width: 500px) {
    padding: 20px 12px 0;
  }
}
.prazdnik__image-wrapper {
  background-color: black;
}

.prazdnik__image {
  opacity: 0.4;
}
.prazdnik__desc-list {
  margin-top: 16px;
  margin-left: 23px;

  @media (max-width: 930px) {
    margin-top: 10px;
    margin-left: 2px;
  }
}
.prazdnik__desc-list li {
  color: white;
}