/* BUTTONS */

	button, button.btn, .btn, .lnk {
		margin: 0;
		border: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		display: inline-block;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;
    color: inherit;
    
		font-family: var(--base-font-1-regular);
    font-size: max(var(--min-font-size, 1rem), min(var(--this-font-size), var(--max-font-size, var(--this-font-size))));
    --this-font-size: calc(var(--font-size) * (100 / var(--scale-breakpoint)) * 1vw);
    --scale-breakpoint: 1400;
    
	}
	
  
  
  
  
  
  
  
  
  /* OUTLINED BUTTON */
  
	.btn-a,
  button.btn-a {
		--font-size: 16;
    --min-font-size: 1rem;
    --max-font-size: 1rem;
    border: 2px solid;
    border-image: linear-gradient(to top, #E1B000, #DC267F) 1;
    padding: 0.6em 1.7em 0.7em;
    position: relative;
	}
  
  .btn-a .inner {
    position: relative;
    z-index: 2;
  }
  
  .btn-a .loading {
    z-index: 2;
  }
  
  .btn-a::before {
    content: '';
    display: block;
    position: absolute;
    inset: -4px;
    background: linear-gradient(180deg, #DC267F 0%, #E1B000 100%);
    z-index: 1;
    pointer-events: none;
    transform: scale(1.05, 1.2);
    transform-origin: center center;
    transition: 300ms var(--ttf-6);
    transition-property: transform, opacity;
    opacity: 0;
  }
  
  @media (hover: hover) {
    
    .btn-a:is(:hover, :focus)::before {
      transform: none;
      opacity: 1;
    }
    
  }
  
  @media (max-width: 750px) {
    .btn-a,
    button.btn-a {
      padding: 0.6em 1.2em 0.7em;
    }
  }
  
  @media (max-width: 500px) {
    .btn-a,
    button.btn-a {
      --min-font-size: 1.25rem;
    }
  }












  /* GRADIENT BUTTON */
  
  .btn-b {
		--font-size: 16;
    --min-font-size: 1rem;
    --max-font-size: 1rem;
    padding: 0.65em 2em 0.75em;
    background: rgb(219,38,128);
    background: linear-gradient(90deg, rgba(219,38,128,1) 0%, rgba(151,108,255,1) 100%);
  }
  
  @media (max-width: 750px) {
    .btn-b {
      padding: 0.6em 1.2em 0.7em;
    }
  }

  @media (max-width: 500px) {
    .btn-b {
      --min-font-size: 1.25rem;
    }
  }












	/* LINKS */



	.lnk-a {
		--font-size: 16;
    --min-font-size: 1rem;
    --max-font-size: 1rem;
    background: linear-gradient(180deg, #DC267F 0%, #E1B000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; 
	}
  
  .lnk-a[data-icon="triangle-right"] span.icon {
    margin-left: max(5px, calc(5 * var(--px)));
    transform: translateY(1px);
    display: inline-block;
  }
  
  .lnk-a[data-icon="triangle-left"] span.icon {
    margin-right: max(5px, calc(5 * var(--px)));
    transform: translateY(1px);
    display: inline-block;
  }
  
  .lnk-a[data-icon="triangle-right"] svg,
  .lnk-a[data-icon="triangle-left"] svg {
    width: max(var(--icon-width-px), calc(var(--icon-width) * var(--px)));
    height: auto;
  }
  
  @media (max-width: 500px) {
    .lnk-a {
      --min-font-size: 1.25rem;
    }
  }
  
  
  
  
  
  .lnk-back {
		--font-size: 20;
    --min-font-size: 1.25rem;
    --max-font-size: 1.25rem;
  }
  
  .lnk-back[data-icon="arrow-left"] span.icon {
    margin-right: .4em;
  }