/* ----- Mixins ----- */
@keyframes line-animation {
  0% {
    background-position: 100% var(--line-position);
    background-size: 100% var(--line-height);
  }
  35% {
    background-position: 100% var(--line-position);
    background-size: 0 var(--line-height);
  }
  36% {
    background-position: 0 var(--line-position);
    background-size: 0 var(--line-height);
  }
  100% {
    background-position: 0 var(--line-position);
    background-size: 100% var(--line-height);
  }
}
.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap) clamp(30px, 5vw, 80px);
  margin: var(--gap) 0;
}
.services__item {
  display: flex;
  gap: 1em;
}
.services__number {
  width: 1em;
  flex-shrink: 0;
  top: -0.1em;
  color: var(--color-secondary);
  font-size: var(--font-size-14);
  letter-spacing: var(--letter-spacing-bigger);
}
.services__title {
  font-family: "Lora", serif;
  font-weight: var(--regular);
  font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  font-size: var(--font-size-30);
  color: var(--color-primary);
  margin-bottom: 0.5em;
}
.services__description {
  font-size: var(--font-size-16);
  color: var(--color-main);
}
.services__description > *:first-child {
  margin-top: 0;
}
.services__description > *:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 660px) {
  .services {
    grid-template-columns: 1fr;
    gap: 2em;
  }
}