/* =============================================================================
   Service Slider
   ========================================================================== */

.service__icon {
  color: rgb(var(--c-primary));
  margin-bottom: 1rem;
}

.service .service__icon > span {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.service__item {
  text-align: center;
}

.service .slider__iteminner {
  margin: 0 1rem;
}

.page .slider .slider__arrow {
  stroke-width: 3;
}

a .service__text p {
  font-family: var(--f-family);
  font-weight: var(--f-weight-n);
}

a:hover .service__text p {
  color: rgb(var(--c-neutral-dark));
}

.service__text .headline.-small {
  font-weight: var(--f-weight-b);
}

/* =============================================================================
   Text Image
   ========================================================================== */

.textimage {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
}

.textimage .textimage__content {
  background: rgb(var(--c-neutral-lighter));
  padding: 2rem;
  height: 100%;
}

.content > .frame:nth-child(2n) .textimage__content {
  background: rgb(var(--c-neutral-lightest));
}

.textimage .-subheader {
  font-family: "FaLight", sans-serif;
  font-size: 50px;
  color: rgb(var(--c-primary));
  margin-bottom: 0.3rem;
  font-weight: var(--f-weight-n);
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 640px) {
  .textimage {
    grid-template-columns: 50% 50%;
  }

  .textimage.-right {
    grid-template-columns: 50% 50%;
  }

  .textimage.-right .textimage__content,
  .textimage .textimage__imagewrap {
    grid-column: 1;
  }

  .textimage .textimage__content,
  .textimage.-right .textimage__imagewrap {
    grid-column: 2;
  }

  .textimage .textimage__content {
    padding: 3rem 2rem;
  }
}

@media (min-width: 1280px) {
  .textimage {
    grid-template-columns: 67% 33%;
  }

  .textimage.-right {
    grid-template-columns: 33% 67%;
  }

  .textimage .textimage__content {
    padding: 4rem 3rem;
  }
}