.services-block {
  position: relative;
  margin-top: calc(var(--xxl) * 2);
}

.services-block--title-1 {
  color: var(--gray-400);
  font-size: clamp(1rem, 3rem, 4rem);
  padding-bottom: var(--gap-base);
}

.services-block--title-2 {
  font-size: clamp(3rem, 5rem, 10rem);
  padding-bottom: var(--gap-base);
}

.services-block--title-header-text {
  color: var(--light);
  padding: var(--xxl);
  border-radius: var(--border-radius-base);
  font-size: clamp(1.2rem, 2.2rem, 3.2rem);
  line-height: 2.0;
  background: url(assets/services_001.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.services-block--services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-base);
  margin-top: var(--gap-base);
}

.services-block--services-box {
  position: relative;
  background: var(--light);
  border-radius: var(--border-radius-base);
  padding: var(--xxl);
  display: flex;
  gap: var(--xxl);
  flex-direction: column;
  justify-content: space-between;
}

.services-block--services-box-icon {
  position: absolute;
  top: 3rem;
  right: 3rem;
}

.services-block--services-box-icon svg {
  width: 8rem;
  height: 8rem;
  fill: var(--gray);
  transition: var(--transition-base);
}

.services-block--services-box:hover svg {
  width: 10rem;
  height: 10rem;
  fill: var(--gray-300);
}

.services-block--services-box-title {
  font-size: clamp(2.2rem, 3.4rem, 3.8rem);
  padding-right: 10rem;
}

.services-block--services-box ul {
  list-style-type: circle;
  padding-left: var(--lg);
  display: flex;
  flex-direction: column;
  gap: var(--base);
}

.services-block--services-box ul li {
  font-size: 1.6rem;
  color: var(--secondary);
}


/* Mobile */
@media only screen and (orientation: portrait) and (min-width: 1px) and (max-width: 999px) {
.services-block--services {
  grid-template-columns: 1fr;
}
}