.services__item {
  --item-title-font-size: var(--font-size-24);
  --item-title-font-color: var(--color-text);
  --item-text-font-size: var(--font-size-18);
  --item-text-font-color: var(--color-main);
  --item-background-color: var(--color-light-blue);
  --item-shadow: var(--shadow-box);
  --item-link-color: var(--color-text);
  --item-link-shadow: none;
  --card-border-radius: 2em;
  overflow: hidden;
  position: relative;
  border-radius: var(--card-border-radius);
  max-width: 467px;
  padding: 8px;
  background-color: #f3f9fa;
  display: flex;
  flex-direction: column;
}
.services__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2051.51%2034'%3E%3Cpath%20d='M49.09%2019.92l-17.5-17.5c-3.22-3.22-8.45-3.22-11.67%200l-17.5%2017.5c-3.22%203.22-3.22%208.45%200%2011.67%203.22%203.22%208.45%203.22%2011.67%200l11.67-11.67%2011.67%2011.67c3.22%203.22%208.45%203.22%2011.67%200%203.22-3.22%203.22-8.45%200-11.67z'%20fill='%2369b4ba'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: auto 32px;
  background-position: 100%;
  z-index: 1;
  opacity: 0.15;
}
.services__item--clickable:hover {
  --item-link-color: var(--color-tertiary);
  --item-link-shadow: var(--shadow-text-hover);
}
.services__item--highlighted {
  --item-title-font-size: var(--font-size-36);
  --item-text-font-size: var(--font-size-20);
  background-color: var(--color-white);
  padding: clamp(1em, 5cqw, var(--gap));
  box-shadow: var(--item-shadow);
}
.services__item--highlighted:hover {
  --item-shadow: var(--shadow-box-hover);
}
.services__item-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
}
.services__item-image {
  border-radius: var(--card-border-radius);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.services__item-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  color: var(--item-title-font-color);
  font-size: var(--item-title-font-size);
  text-align: center;
  text-transform: uppercase;
}
.services__item-title br {
  display: none;
}
.services__item-text {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  font-size: var(--item-text-font-size);
  color: var(--item-text-font-color);
  line-height: var(--line-height);
  margin-top: 0.5em;
}
.services__item-button-wrapper {
  text-align: center;
}
.services__item-button {
  --button-text-color: var(--color-white);
  --button-text-color-hover: var(--color-white);
  --button-background-color: var(--color-purple-dark);
  --button-background-color-hover: var(--color-secondary);
  --button-font-size: var(--font-size-16);
  --button-border-radius: 5em;
  --button-border-color: transparent;
  --button-border: 1px solid var(--button-border-color);
  --button-border-color-hover: transparent;
  --button-shadow: none;
  --button-shadow-hover: none;
  --button-padding: 0.6em 1.6em 0.7em;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  display: inline-block;
  padding: var(--button-padding);
  line-height: 1;
  font-size: var(--button-font-size, var(--font-size-16));
  border: var(--button-border, none);
  transition: var(--transition);
  cursor: pointer;
  border-radius: var(--button-border-radius, var(--border-radius));
  text-align: center;
  color: var(--button-text-color, var(--color-white));
  background-color: var(--button-background-color, var(--color-main));
  box-shadow: var(--button-shadow, none);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}
.services__item-button:hover {
  color: var(--button-text-color-hover, var(--color-white));
  background-color: var(--button-background-color-hover, var(--color-secondary-light));
  box-shadow: var(--button-shadow-hover, none);
  border-color: var(--button-border-color-hover, var(--color-tertiary));
}
.services__item-number {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  color: var(--item-text-font-color);
}
.services__item-number-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2ch;
}
.services__item-number-prefix {
  opacity: 0.7;
}
.services__item-content {
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
  flex-grow: 1;
}

.block-editor__container .services__item-image {
  width: 100%;
  height: 100%;
}