/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
@media (max-width: 767.98px) {
  .snk-next-best-action.snk-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 768px) {
  .snk-next-best-action.snk-section {
    padding-top: 2rem;
  }
}
.snk-next-best-action-text {
  margin-top: -0.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .snk-next-best-action-text {
    margin-top: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.snk-next-best-action-text > *:last-child {
  margin-bottom: 0;
}
.snk-next-best-action-links {
  display: grid;
  gap: 1rem;
}
@media (min-width: 576px) {
  .snk-next-best-action-links {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.snk-next-best-action .snk-btn-secondary {
  padding: 1.1875rem 1rem;
  gap: 0.75rem;
  font-size: 0.9375rem;
}
.snk-next-best-action .snk-btn-secondary:hover {
  background-color: var(--snk-btn-secondary-hover-color);
}
.snk-next-best-action .snk-btn-secondary:hover::before {
  right: 100%;
}
@media (min-width: 768px) {
  .snk-next-best-action .snk-btn-secondary {
    padding: 1.25rem 2.5rem;
    gap: 1.25rem;
    font-size: 1rem;
    line-height: 1.875;
  }
}