.service-icon {
  display: block;
  width: 48px;
  height: 48px;
  background-color: var(--copper);
  -webkit-mask-image: var(--service-icon-image);
  mask-image: var(--service-icon-image);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.service-icon-terrace {
  --service-icon-image: url("../icons/service-terrace.png");
  position: relative;
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.service-icon-terrace::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--copper);
  -webkit-mask: var(--service-icon-image) center / contain no-repeat;
  mask: var(--service-icon-image) center / contain no-repeat;
}

.service-icon-comfort {
  --service-icon-image: url("../icons/service-comfort.png");
}

.service-icon-cuisine {
  --service-icon-image: url("../icons/service-cuisine.png");
}

.service-grid .service-icon + h3 {
  margin-top: 26px;
}