@property --gradient-color-1 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --gradient-color-2 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --gradient-color-3 { syntax: "<color>"; inherits: false; initial-value: transparent; } @property --gradient-color-4 { syntax: "<color>"; inherits: false; initial-value: transparent; }  .btn--primary.btn--primary { --gradient-angle: 45deg; --gradient-transition: --gradient-color-1 .6s ease, --gradient-color-2 var(--transition-duration) var(--transition-timing); position: relative; border: none !important; background: transparent; color: var(--primary); padding-block: calc(var(--btn-padding-block) + var(--btn-outline-border-width)); padding-inline: calc(var(--btn-padding-inline) + var(--btn-outline-border-width)); transition: var(--gradient-transition); z-index: 1; } .btn--primary.btn--primary::before { --gradient-color-1: var(--accent); --gradient-color-2: var(--secondary); content: ''; position: absolute; inset: 0; border-radius: inherit; padding: var(--btn-outline-border-width); background: linear-gradient(var(--gradient-angle), var(--gradient-color-1), var(--gradient-color-2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: all var(--transition-duration) var(--transition-timing); z-index: -1; } .btn--primary.btn--primary:hover { color: var(--white); --gradient-color-1: var(--accent); --gradient-color-2: var(--secondary); } .btn--primary.btn--primary:hover::before { --gradient-color-1: var(--accent); --gradient-color-2: var(--secondary); padding: 0; }  .btn--secondary.btn--secondary { --gradient-angle: 45deg; --gradient-color-3: var(--secondary); --gradient-color-4: var(--accent); position: relative; border: none !important; background: linear-gradient(var(--gradient-angle), var(--gradient-color-4), var(--gradient-color-3)); color: #fff; transition: background var(--transition-duration) var(--transition-timing); } .btn--secondary.btn--secondary:hover{ --gradient-color-3: var(--secondary); --gradient-color-4: var(--accent); } .btn--secondary.btn--secondary::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--gradient-angle), var(--gradient-color-3), var(--gradient-color-4)); opacity: 0; transition: opacity var(--transition-duration) var(--transition-timing); z-index: -1; } .btn--secondary.btn--secondary:hover::before { opacity: 1; }  .reviews-text { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }