:root { --t:500ms ease all; --d:250ms; } .card-image { background:linear-gradient(135deg, var(--bg-surface), var(--bg-surface-t-6)); border:1px solid var(--border); border-top:1px solid var(--primary); border-bottom:3px solid var(--secondary); border-radius:var(--radius-xs); box-shadow:inset 0 1px 0 var(--light-t-1); overflow:hidden; padding:var(--space-xs); position:relative; &:after { content:""; height:150px; opacity:0.1; position:absolute; right:0; bottom:0; transform:translate(40px, 40px); width:150px; background:url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 411 411" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-50.7839,-50.7839)"><g id="point" transform="matrix(8.57125,0,0,8.57125,-7904.83,-5327.47)"><path d="M947.346,652.845L929.6,652.845C928.813,652.845 928.174,652.205 928.174,651.418C928.174,650.631 928.813,649.992 929.6,649.992L947.346,649.992C947.442,649.668 947.571,649.359 947.728,649.067L936.173,637.512C935.617,636.955 935.617,636.052 936.173,635.495C936.73,634.938 937.634,634.938 938.19,635.495L949.739,647.044C950.039,646.881 950.357,646.747 950.69,646.648L950.69,628.902C950.69,628.115 951.329,627.476 952.116,627.476C952.903,627.476 953.542,628.115 953.542,628.902L953.542,646.648C953.87,646.746 954.183,646.876 954.479,647.036L966.02,635.495C966.576,634.938 967.48,634.938 968.037,635.495C968.594,636.052 968.594,636.955 968.037,637.512L956.496,649.053C956.657,649.349 956.788,649.663 956.886,649.992L974.632,649.992C975.419,649.992 976.058,650.631 976.058,651.418C976.058,652.205 975.419,652.845 974.632,652.845L956.886,652.845C956.787,653.177 956.654,653.495 956.49,653.795L968.037,665.342C968.594,665.898 968.594,666.802 968.037,667.359C967.48,667.915 966.576,667.915 966.02,667.359L954.467,655.806C954.175,655.963 953.866,656.092 953.542,656.189L953.542,673.934C953.542,674.721 952.903,675.361 952.116,675.361C951.329,675.361 950.69,674.721 950.69,673.934L950.69,656.189C950.361,656.09 950.047,655.959 949.751,655.799L938.21,667.339C937.653,667.896 936.75,667.896 936.193,667.339C935.636,666.782 935.636,665.879 936.193,665.322L947.734,653.781C947.574,653.485 947.444,653.172 947.346,652.845Z" style="fill:navy" /></g></g></svg>'); } img { border-radius:var(--radius-xs); } } a { transition:var(--t); &:hover { transition-duration:var(--d); } } .bricks-button { font-weight:400; letter-spacing:-0.01em; line-height:1.2; transition:var(--t); &:hover { --bshadow:rgba(0,0,0,0.15); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0px 1px 1px 0px inset rgba(255, 255, 255, 0.1), 0px 25px 50px -10px rgba(50, 50, 93, 0.25), 0px 15px 30px -15px rgba(0, 0, 0, 0.3); transition-duration:var(--d); } &.bricks-background-dark { border-width:1px solid var(--dark); &:hover { border-width:1px solid var(--secondary-l-3); } } }