.inline-buttons-form {
  /* Custom properties (CSS variables) */
  --form-gap: 0.75rem;
  --btn-group-gap: var(--form-gap);
  --btn-background-active: #eef1ff;
  max-width: 356px;
  margin-bottom: var(--form-gap);
}

.inline-buttons-form__title {
  margin-bottom: var(--form-gap);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  color: #f7f9ff;
}

.inline-buttons-form__button-group {
  display: flex;
  flex-direction: column;
  gap: var(--btn-group-gap);
}

.inline-buttons-form__button-group > .button {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #f7f9ff;
  border-color: #ebeff4;
  border-radius: 16px;
  font-weight: 600;
  color: #18181d;
  font-size: 1.6rem;
  width: 100%;
  /* Media query for above "sm" breakpoint */
}

.inline-buttons-form__button-content {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.inline-buttons-form__button-group > .button > b,
.inline-buttons-form__button_group > .button > strong,
.inline-buttons-form__button_group > .button > i:not([class^="fa-"]),
.inline-buttons-form__button_group > .button > em {
  display: contents;
  pointer-events: none;
}

@media (min-width: 576px) {
  .inline-buttons-form__button-group > .button {
    padding: 0.938rem 1.375rem;
  }
}

.inline-buttons-form__button-group > .button:focus,
.inline-buttons-form__button-group > .button:hover,
.inline-buttons-form__button-group > .button:active {
    box-shadow: 0 4px 15px 0 rgba(82, 96, 207, 0.5);
    background-color: var(--btn-background-active);
    border-color: #b1baff;
    color: #18181d;
    transform: scale(1.03);
    z-index: 1;
    transition: transform 0.60s cubic-bezier(.4,2,.3,1), box-shadow 0.18s cubic-bezier(.4,2,.3,1);
}

.inline-buttons-form__button-group > .button:focus > i[class^="fa-"],
.inline-buttons-form__button-group > .button:hover > i[class^="fa-"],
.inline-buttons-form__button-group > .button:active > i[class^="fa-"] {
  background-color: #6476ff;
}

.inline-buttons-form__button-group > .button:focus > i[class^="fa-"]::before,
.inline-buttons-form__button-group > .button:hover > i[class^="fa-"]::before,
.inline-buttons-form__button-group > .button:active > i[class^="fa-"]::before {
  color: #fff;
}

/* left icon */
.inline-buttons-form__button-group > .button::before {
  content: "";
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: 0.5rem;
  padding: 11px;
  background-color: var(--btn-background-active);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-size: contain;
  border-radius: 12px;
  pointer-events: none;
}

@media (min-width: 321px) {
  .inline-buttons-form__button-group > .button::before {
    display: inherit;
  }
}

/* right icon */
.inline-buttons-form__button-group > .button > i[class^="fa-"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0.5rem;
  transition: inherit;
  border-radius: 50%;
  color: #6476ff;
  pointer-events: none;
  margin-left: auto;
}

.inline-buttons-form__button-group > .button > i[class^="fa-"]::before {
  transition: inherit;
}

/* Button icon backgrounds */
.inline-buttons-form__button:nth-child(1)::before {
  background-image: url(../assets/img/form-svg-home.svg);
}

.inline-buttons-form__button:nth-child(2)::before {
  background-image: url(../assets/img/form-svg-people.svg);
}

.inline-buttons-form__button:nth-child(3)::before {
  background-image: url(../assets/img/form-svg-family.svg);
}

.inline-buttons-form__button:nth-child(4)::before {
  background-image: url(../assets/img/form-svg-chat.svg);
}