.link-button-selection-section {
  background-image: var(--link-button-selection-bg, url("/assets/images/backgrounds/bg-link-button-selection.webp"));
  background-attachment: var(--link-button-selection-bg-attachment, fixed);
  background-size: cover;
  background-position: var(--link-button-selection-bg-position, center);
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  color: #fff;
}

.link-button-selection-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--link-button-selection-overlay, rgba(0, 0, 0, 0.75));
  z-index: -1;
}

.link-button-selection-link {
  padding: 0.75rem 1rem;
  font-weight: 500;
  border: 4px solid var(--white);
  border-radius: 0.5rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
  font-style: italic;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -moz-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  user-select: none !important;
  outline: none !important;
}

.link-button-selection-link:active,
.link-button-selection-link:focus,
.link-button-selection-link:focus-visible,
.link-button-selection-link:focus-within {
  background-color: var(--color-primary) !important;
  color: var(--white) !important;
  border-color: var(--color-primary) !important;
}

@media (hover: hover) {
  .link-button-selection-link:hover {
    background-color: var(--color-primary);
    color: var(--white);
  }
}

@media (max-width: 768px) {
  .link-button-selection-section {
    background-attachment: scroll;
  }
}