.wpplatform-contact-methods {
  padding-block: var(--school-section-padding-y-lg);
  background: var(--school-background);
}

.wpplatform-contact-pattern-heading {
  max-width: var(--school-layout-text);
  margin-bottom: var(--school-space-5);
}

.wpplatform-contact-pattern-heading h2 {
  margin: 0;
  color: var(--school-heading);
}

.wpplatform-contact-methods__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--school-space-3);
}

.wpplatform-contact-method {
  position:relative;
  overflow: hidden;
  min-width: 0;
  padding: var(--wp--preset--spacing--50);
  border: var(--school-card-border-width) solid var(--school-card-border-color);
  border-top: 0.25rem solid var(--school-primary);
  border-radius: var(--school-card-radius);
  background: var(--school-card-background);
  box-shadow: var(--school-shadow-sm);
  font-style: normal;
  margin-block-start: 0px;
}

.wpplatform-contact-method::before {
      position: absolute;
    inset: 0 0 auto;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    content: "";
}
.wpplatform-contact-method::after {
      position: absolute;
    top: -3rem;
    right: -3rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(123, 63, 200, 0.08);
    content: "";
}

.wpplatform-contact-method .wpplatform-contact-method__mark {
    display: grid;
    place-items: center;
    border-radius: var(--school-radius-circle);
    background: var(--school-primary);
    color: var(--school-background);
    font-weight: 800;
    position: relative;
    z-index: 1;
    width: 3.75rem;
    height: 3.75rem;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), transparent 35%), linear-gradient(135deg, #8b4be2, var(--color-primary));
    box-shadow: 0 12px 26px rgba(123, 63, 200, 0.25);
    margin-block: var(--school-space-5);
}

.wpplatform-contact-method h3 {
  margin: 0 0 0.5rem;
  color: var(--school-heading);
  font-size: var(--wp--preset--font-size--medium);
}

.wpplatform-contact-method p {
  overflow-wrap: anywhere;
}

.wpplatform-contact-method__meta {
  color: var(--school-text);
  font-size: var(--wp--preset--font-size--x-small);
}

@media (max-width: 959px) {
  .wpplatform-contact-methods__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .wpplatform-contact-methods {
    padding-block: var(--school-section-padding-y-mobile);
  }

  .wpplatform-contact-methods__grid {
    grid-template-columns: 1fr;
  }
}