.customer-styles {
  /* START article: salutation */
  /* END article: salutation */
}

.customer-styles .template_salutation.background-color .link-appearance-arrow::before {
  background-color: transparent;
  border: 1px solid transparent;
}

.customer-styles .template_salutation.background-color .link-appearance-arrow::after {
  top: 12px;
  background-color: #fff;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: left center;
          mask-position: left center;
  transition: width 0.4s ease;
  width: 17px;
  height: 15px;
}

.customer-styles .template_salutation.background-color .link-appearance-arrow:hover::after {
  width: 30px;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.customer-styles .template_salutation.background-color .link-appearance-primary::before {
  border-top: 1px solid #fff;
}

.customer-styles .template_salutation.background-color .left-container::after {
  background-color: var(--theme-primary);
}

.customer-styles .template_salutation .border-container {
  align-items: start;
  display: grid;
  grid-column: 1/7;
  grid-row-gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .border-container {
    grid-column: 3/15;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .border-container {
    grid-row-gap: 0;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .border-container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.customer-styles .template_salutation .border-container::before {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  border: 1px solid currentColor;
}

@media (min-width: 768px) and (max-width: 992px) {
  .customer-styles .template_salutation .border-container {
    grid-column: 2 / 16;
  }
}

.customer-styles .template_salutation .h3-container {
  grid-column: 1/7;
  text-align: center;
  margin-bottom: 32px;
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .h3-container {
    grid-column: 1/16;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .customer-styles .template_salutation .h3-container {
    grid-column: 2 / 16;
  }
}

.customer-styles .template_salutation .left-container {
  grid-column: 1/7;
  border-bottom: 1px solid currentColor;
  border-right: none;
  padding: 32px 20px;
  position: relative;
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container {
    grid-column: 1/8;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container {
    border-bottom: none;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container {
    border-right: 1px solid currentColor;
  }
}

@media (min-width: 768px) {
  .customer-styles .template_salutation .left-container {
    padding: 70px 40px;
  }
}

.customer-styles .template_salutation .left-container::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  left: 50%;
  bottom: -11px;
  top: unset;
  transform: translateX(-50%) rotate(135deg);
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container::after {
    left: calc(100% - 10px);
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container::after {
    bottom: unset;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container::after {
    top: 50%;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .left-container::after {
    transform: translateY(-50%) rotate(45deg);
  }
}

.customer-styles .template_salutation .right-container {
  display: grid;
  grid-row-gap: 20px;
  grid-column: 1/7;
  padding: 32px 20px;
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .right-container {
    grid-column: 8/13;
  }
}

@media (min-width: 992px) {
  .customer-styles .template_salutation .right-container {
    padding: 40px;
  }
}

.customer-styles .template_salutation .mobile-text-center {
  text-align: center;
}

.customer-styles .template_salutation .image-container {
  border-radius: 50%;
  height: 105px;
  width: 105px;
  justify-self: center;
  overflow: clip;
}

.customer-styles .template_salutation .image-container .image {
  width: 100%;
}

.customer-styles .template_salutation .link-appearance-arrow {
  display: inherit;
  border-top: 1px solid currentColor;
  padding: 5px 0;
  margin-bottom: 0;
}

.customer-styles .template_salutation .link-appearance-arrow::before {
  background-color: #fff;
  border: 1px solid #fff;
}

.customer-styles .template_salutation .link-appearance-arrow::after {
  top: 10px;
  background-color: currentColor;
}

.customer-styles .template_salutation .link-appearance-primary {
  margin-top: 12px;
}

.customer-styles .template_salutation .link-appearance-primary::before {
  content: "";
  position: absolute;
  width: 100%;
  border-top: 1px solid currentColor;
  top: -12px;
  left: 0;
}

.customer-styles .template_salutation .buttons-container {
  margin-top: 0;
}