.fastech-services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.fastech-service-list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--wp--preset--color--contrast);
  overflow: hidden;
  transition: border-color 150ms ease, transform 150ms ease;
}

/* reset anchor default link styles when list item is an <a> */
.fastech-service-list__item,
.fastech-service-list__item:link,
.fastech-service-list__item:visited {
  color: inherit;
  text-decoration: none;
}
.fastech-service-list__item:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.fastech-service-list__item::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 9.13051C10.2652 9.13051 10.5196 9.02515 10.7071 8.83761C10.8946 8.65008 11 8.39572 11 8.13051V5.19151C10.9558 4.96504 10.9913 4.73026 11.1004 4.52696C11.2096 4.32367 11.3857 4.16438 11.5989 4.0761C11.8121 3.98781 12.0492 3.97596 12.2701 4.04256C12.491 4.10916 12.6821 4.25011 12.811 4.44151L19.647 11.2775C19.7591 11.3896 19.848 11.5226 19.9087 11.6691C19.9693 11.8155 20.0005 11.9725 20.0005 12.131C20.0005 12.2895 19.9693 12.4465 19.9087 12.5929C19.848 12.7394 19.7591 12.8724 19.647 12.9845L12.811 19.8195C12.6821 20.0109 12.491 20.1519 12.2701 20.2185C12.0492 20.2851 11.8121 20.2732 11.5989 20.1849C11.3857 20.0966 11.2096 19.9373 11.1004 19.734C10.9913 19.5308 10.9558 19.296 11 19.0695V16.1305C11 15.8653 10.8946 15.6109 10.7071 15.4234C10.5196 15.2359 10.2652 15.1305 10 15.1305H4C3.73478 15.1305 3.48043 15.0251 3.29289 14.8376C3.10536 14.6501 3 14.3957 3 14.1305V10.1305C3 9.86529 3.10536 9.61094 3.29289 9.4234C3.48043 9.23586 3.73478 9.13051 4 9.13051H10Z' stroke='%23ff2d55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  opacity: 0;
  pointer-events: none;
}

.fastech-service-list__item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.fastech-service-list__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  border-radius: inherit;
}

.fastech-service-list__item:hover::before {
  opacity: 0.06;
}

.fastech-service-list__item:hover {
  border-color: var(--wp--preset--color--primary);
}

.fastech-service-list__icon-svg {
  width: 48px;
  height: 48px;
  display: inline-block;
  vertical-align: middle;
}

.fastech-service-list__icon-svg path {
  fill: var(--wp--preset--color--contrast);
}

.fastech-service-list__item:hover .fastech-service-list__icon-svg path {
  fill: var(--wp--preset--color--primary);
}

.fastech-service-list__item:hover .fastech-service-list__title {
  color: var(--wp--preset--color--primary);
}

.fastech-service-list__title {
  color: inherit;
  transition: color 150ms ease;
}

@media (max-width: 900px) {
  .fastech-services-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .fastech-services-list {
    grid-template-columns: repeat(1, 1fr);
  }
}