Pick a card (CSS 3D transforms)

index.html

<div class="surface angle">
  <h1 class="header">Pick a card</h1>
  
  <div class="card">
    <svg class="icon fire" viewBox="0 0 257 310" xmlns="http://www.w3.org/2000/svg" ><g color="#000"><path style="marker:none" d="M26.604 238.398c-15.72-13.475-16.584-33.341-14.857-45.261 1.458-10.057 14.904-21.512 17.722-32.209 1.079-4.093 3.95-12.469-3.343-24.181-6.33-10.164-9.245-14.986-9.245-14.986s12.71 7.074 18.584 11.565c5.873 4.492 19.997 18.616 21.38 21.725 1.381 3.11 8.155-14.832 3.091-24.977-3.81-7.635-8.11-16.403-8.11-16.403s22.665 16.813 26.314 26.321c4.39 11.438.635 26.541.635 26.541l9.412 5.713s12.337-11.342 14.756-22.744c1.649-7.772 1.995-10.64-8.163-16.29-3.096-1.721-8.513-3.615-12.032-6.585-11.056-9.328-15.202-15.547-14.165-23.148 1.036-7.602 10.192-24.704 10.192-24.704s2.246 17.275 8.465 22.112c6.219 4.837 31.268 3.11 38.87 12.093 7.6 8.983 9.673 23.84 8.982 29.368-.69 5.528 2.073.345 3.8-8.983 1.728-9.329 2.42-20.385 2.42-20.385s4.145 1.036 6.564-5.528c2.418-6.565 2.418-15.893 1.727-17.275-.69-1.382-8.637 2.764-13.474-1.037-4.837-3.8-11.056-16.584-12.093-24.876-1.036-8.292 6.565-25.222 6.565-30.75 0-5.528 4.837-.346 6.91 7.947 2.073 8.292 0 21.766 4.837 29.022 4.837 7.255 19.694 18.312 22.112 21.076 2.419 2.764-.345 14.165-2.418 25.221-2.073 11.057 3.11 19.003 5.182 25.913 2.073 6.91 2.073 22.804-2.073 30.75-4.146 7.947-12.438 22.458-12.438 22.458s6.872-8.687 13.782-11.796c6.91-3.11 12.361-.816 14.78-8.763 2.418-7.947 9.262-16.647 10.299-17.684 1.036-1.036-3.965-11.855-5.002-22.22-1.036-10.365 1.53-21.498 6.02-29.445 4.492-7.946 17.967-17.275 22.458-21.076 4.492-3.8 4.69-10.288 4.69-10.288s-3.454 12.093-5.527 18.312c-2.073 6.219-6.496 21.65-6.91 32.823-.193 5.196 2.073 15.46 2.073 15.46s12.665-1.804 17.62-5.44c8.01-5.88 15.203-15.203 16.93-24.532 1.728-9.328 1.728-16.93 1.728-16.93s3.455 6.91 7.6 16.24c4.147 9.328 3.888 21.248 1.815 27.122-2.073 5.873-9.07 16.584-13.561 19.693-3.383 2.342-9.166 6.518-13.268 7.798-9.033-5.8-8.931-2.01-4.18 4.468 0 0 23.148 38.696 23.148 49.407 0 10.71-3.627 16.93-7.428 23.84-3.8 6.91-19.348 22.112-27.295 25.221-2.5.979-1.927-5.25-4.364-4.336-5.307 1.99-13 10.882-13.948 11.592-1.382 1.037-8.925 10.974-14.51 15.202-10.393 7.868-21.622 16.659-34.551 18.312-13.855 1.772-28.25-3.482-40.77-9.674-2.934-1.452-7.6-6.22-7.6-6.22s-53.208-.69-63.92-22.803c-10.71-22.112-6.564-24.53-6.564-25.912 0-1.382.346-5.874.346-5.874zM0 54.59c2.419 7.946-1.382 30.75 1.037 38.35 2.418 7.602 12.438 20.731 13.474 25.568 1.037 4.837 5.874-4.837 6.565-14.857.69-10.02 3.11-15.547-3.8-27.295C10.365 64.61 0 54.59 0 54.59z" overflow="visible"/><path style="marker:none" d="M120.581 11.056c-5.874 14.511-27.295 33.514-35.241 44.57-7.947 11.056-5.528 20.73-5.528 20.73s14.165-4.146 24.185-10.71c10.02-6.565 17.275-19.003 20.04-26.604 2.763-7.601 4.145-17.966 3.109-24.876C126.109 7.256 123 0 123 0zm104.688 32.132c-8.292 12.438-10.04 17.84-10.02 27.64.014 6.012 6.22 16.93 6.22 16.93 4.49-4.146 7.534-6.651 9.673-11.056 2.457-5.06 3.957-11.024 3.11-16.584-.963-6.316-8.983-16.93-8.983-16.93z" overflow="visible"/><path d="M84.032 71.167c3.664-11.971 7.96-16.51 19.932-26.77 11.97-10.261 14.17-15.88 16.124-18.812 1.954-2.932 1.466 2.443-.244 7.818s-10.893 22.373-16.756 27.014c-5.864 4.642-19.056 10.75-19.056 10.75zm-78.036-.874c-1.71 12.216-3.543 15.758-.61 23.088 2.93 7.329 7.328 12.948 8.794 16.368 1.466 3.42 2.932-2.198 3.91-9.528.976-7.329.121-9.161-2.566-15.269-2.687-6.108-9.528-14.659-9.528-14.659zm125.33-27.851c-2.443 16.613-4.03 21.133-1.588 28.95 2.443 7.819 9.284 11.972 14.414 13.926 5.13 1.955 3.176-.977.978-3.42-2.2-2.443-9.773-13.193-10.506-21.988-.733-8.795-.366-9.405-1.343-15.025-.978-5.619-1.955-2.443-1.955-2.443zm93.326 7.452c-6.108 14.658-3.054 23.82-3.054 27.484 0 3.665 4.153.49 5.864-4.397 1.71-4.886 3.786-13.07 1.832-17.712-1.955-4.642-4.642-5.375-4.642-5.375zM76.823 89.856c-4.398 15.88-4.591 22.438 1.028 27.813s25.523 10.905 30.05 17.353c8.062 11.483-8.629 28.36-15.66 41.296-.571 1.051-1.32 2.008-2.056 2.963-2.249-.083-5.391-.51-7.98-2.237-4.398-2.932-7.796-5.35-8.284-8.525-.489-3.176 3.144-14.69 3.144-21.042 0-6.352-10.963-19.746-15.116-22.19-4.153-2.443 2.167 4.634 3.144 6.833.977 2.199 1.73 11.223-1.935 19.53-3.664 8.306-5.865 8.767-5.865 8.767s-18.82-20.47-23.218-23.158c-4.397-2.687-3.666-2.955-5.865-3.688-2.198-.733.726 2.66.726 2.66 6.352 7.818 5.147 16.14 4.414 22.493-.733 6.352-16.87 28.331-16.87 36.882 0 8.551 1.015 15.666 8.344 27.148 7.33 11.483 8.037 18.538 8.526 20.981.488 2.443 3.453 8.348 8.827 13.967 5.375 5.62 9.04 8.743 11.972 11.186 2.932 2.443-1.52 4.397-6.65 0-5.131-4.398-13.65-15.832-15.117-16.81-1.465-.976-1.233 6.07 1.21 9.736 2.443 3.664 9.801 10.249 15.176 13.18 5.375 2.932 16.122 1.993 18.32 2.238 2.2.244.454 3.182 9.493 5.38 9.04 2.2 14.693 2.661 14.693 2.661s-18.014-22.9-20.212-45.131c-2.2-22.232.52-31.001 2.997-36.304 2.016-4.317 2.934-5.54 5.545-9.562-5.611 17.334-5.968 37.098-1.028 54.598 4.382 15.522 16.101 32.509 26.362 40.571 10.261 8.062 22.479 11.234 35.916 12.456 13.436 1.221 39.808-20.74 43.473-26.604 3.664-5.864 22.498-22.264 27.873-26.906 5.375-4.642 11.004-12.963 11.004-16.628 0-3.664-.483-10.702-.483-10.702s4.892 7.57 5.381 12.456c.489 4.886-9.29 14.119-11.488 17.05-2.199 2.932 4.866.98 8.042-.242 3.176-1.221 13.947-19.787 15.901-24.185 1.955-4.397-7.35-41.03-22.008-55.445-14.659-14.414-5.595-22.466-2.419-19.046 3.176 3.42 8.508 7.795 10.219 8.284 1.71.489 19.805-10.258 22.492-18.32 2.687-8.063 3.095-13.49 2.418-20.256-.359-3.59-3.385-10.278-3.385-10.278s-.8 4.012-2.721 9.19c-3.221 8.68-9.682 20.713-21.465 22.855-18.812 3.42-16.366 2.93-18.32.242-1.955-2.687-3.693-13.44-3.205-23.702.105-2.207.634-4.55 1.39-6.892 2.763-8.547 8.647-17.129 8.647-19.046 0-2.443-5.644 1.709-9.553 6.106-1.727 1.944-5.385 5.71-8.283 11.247-3.661 6.992-6.056 16.856-1.693 29.808 7.817 23.21-6.153 33.225-7.619 36.157-1.466 2.932-.44 9.022-10.702 19.771-10.26 10.75-13.687 10.505-23.46 18.079-9.772 7.574-12.987 12.22-14.208 17.595-.889 3.909-.874 18.123-.424 26.543-.51-2.955-1.073-6.222-1.753-9.916-1.71-9.284-3.645-11.465-1.935-19.771 1.71-8.307 31.38-25.76 36.021-32.845 4.642-7.085.824-5.875-4.062-3.92-4.886 1.954-12.942 9.65-16.118 12.338-3.176 2.687-.256-3.937 1.21-9.312s7.654-13.813 10.278-21.222c1.903-5.371 4-10.932 3.87-16.628-.183-8.034-5.308-15.275-6.53-23.218-1.226-7.971-3.657-16.367-.725-24.185a132.378 132.378 0 0 0 1.995-5.744c1.266-3.886 1.598-5.848.907-5.502-.377.188-1.797 2.335-3.447 5.018-2.623 4.268-6.414 9.474-8.283 14.814-2.289 6.536-1.027 13.986-3.386 20.497-3.346 9.232-11.026 18.31-14.934 25.394-3.91 7.085-4.414 5.382-4.414 5.382s4.141-18.317 4.172-27.632c.02-6.322.775-13.476-2.721-18.744-3.937-5.932-5.8-9.599-18.26-11.064-12.46-1.466-16.861-3.881-23.702-8.768-6.84-4.886-7.618-14.148-7.618-14.148z" style="marker:none" overflow="visible" fill="#fc0"/><path d="M73.18 164.108c.978-3.665 0 0 0 0z" style="marker:none" overflow="visible"/><path d="M113.464 124.078c-1.711.5 2.6 8.223 2.6 8.223 4.146 21.421-12.74 45.261-17.232 58.045-4.492 12.784-8.284 29.411-1.028 48.068 2.626 6.754 5.344 11.571 8.283 15.358 11.783 6.887 20.199 11.342 26.483 14.27-3.549-10.241-7.756-31.677-6.107-38.274 2.073-8.292 22.432-18.32 27.27-23.157 4.836-4.838-6.211 3.463-10.703 3.809-4.491.345 4.518-19.383 9.01-29.748 4.49-10.365 7.22-24.505 6.53-27.27-.692-2.763-24.143 22.804-31.744 24.186-7.601 1.382-2.444-19.374-4.172-30.776-1.727-11.401-.674-17.275-6.893-21.766-1.166-.843-1.903-1.083-2.297-.968zm92.81 42.627c-1.111-.248.057 2.768 1.029 5.683 1.727 5.183-.354 25.594-6.228 35.613-5.874 10.02-4.466-23.131-5.502-28.66-1.037-5.527-7.645 9.286-11.79 17.233-4.147 7.946-15.531 18.691-26.242 27.329-10.71 8.638-13.103 15.54-10.339 22.795 2.233 5.86 1.556 10.812 2.298 15.962 1.632 1.192 3.581 2.27 5.925 3.144 17.087-5.266 35.882-14.455 43.594-22.553 13.82-14.51 21.741-22.846 22.432-26.301.691-3.455 8.284 8.983 8.284 14.51 0 5.529 4.543-3.437 3.506-14.147-1.036-10.711-7.99-29.377-19.046-42.506-4.837-5.744-7.055-7.91-7.92-8.102zm-159.259-6.047c-1.728 19.349-10.411 27.472-8.647 41.478 1.7 13.491 5.865 27.252 17.958 36.58 5.87 4.53 9.835 4.827 12.395 3.93a43.857 43.857 0 0 1-.423-3.023c-2.2-22.232-.465-33.505 3.688-38.636 1.452-1.793 4.402-4.244 7.618-6.711-.24.743-.444 1.486-.665 2.237 4.828-5.073 10.444-9.88 6.41-13.423-3.342-2.933-6.304 7.335-10.703 7.981-4.361.641-9.479-1.222-12.455-4.474-4.263-4.657-1.282-13.103-4.837-18.32-2.413-3.54-10.34-7.619-10.34-7.619z" style="marker:none" overflow="visible" fill="#f60"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon crystal" viewBox="0 0 265 313" xmlns="http://www.w3.org/2000/svg"><g color="#000"><path style="marker:none" d="M49.139 161.531l39.219-30.684 30.911 134.47-19.65 28.464-25.764-63.853-5.857-11.206-16.28-55.43z" overflow="visible" fill="#0082a3"/><path style="marker:none" d="M88.359 130.843l-32.874 25.708c.486 2.422.87 4.029.87 4.029.778-.433 27.134-16.743 27.134-16.743l33.264 123.946s.776-5.757 1.139-8.418z" overflow="visible" fill="#5cddff"/><path style="marker:none" d="M51.069 109.125L2.255 156.887l44.791 4.287z" overflow="visible" fill="#95eaff"/><path style="marker:none" d="M51.77 105.417l35.624 25.015-38.315 31.4 1.484-54.22z" overflow="visible" fill="#007795"/><path style="marker:none" d="M51.018 107.082l19.635 27.864-23.31 25.749 40.839-28.952-.242-1.798z" overflow="visible" fill="#5cddff"/><path style="marker:none" d="M2.919 158.802c9.364 5.499 66.958 127.187 59.335 128.458l36.48 3.968s-20.002-50.082-20.356-51.103c-.355-1.02-10.734-22.424-10.734-22.424l-17.823-56.093z" overflow="visible" fill="#6ae0ff"/><path style="marker:none" d="M48.683 106.915L2.257 156.882l44.788 4.3zM2.926 158.809c.26.872 1.497 3.74 3.373 7.967l9.806 6.382s25.345 51.294 25.111 49.673c-.234-1.621-10.98-50.54-10.98-50.54l15.287 12.878 1.772-21.393.46-2.301z" overflow="visible" opacity=".876" fill="#fff"/><path style="marker:none" d="M17.957 183.449c4.031 8.83 7.09 14.968 12.412 26.421l39.974 13.426c-1.032-2.133-2.692-5.591-2.692-5.591l-5.736-18.054c-15.697-6.24-28.507-9.72-43.958-16.202zm23.356 49.645c1.69 3.62 3.379 7.206 5.007 10.686l37.039 8.897c-1.907-4.788-3.007-7.532-3.79-9.517zm12.759 30.089c6.268 13.361 10.723 22.832 10.723 22.832l33.928 5.209s-3.983-9.991-7.497-18.797z" overflow="visible" opacity=".726" fill="#fff"/><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M49.373 103.527c-.086.026-.17.058-.252.093-.592.236-1.08.678-1.329 1.202L.196 156.909a1.912 1.912 0 0 0-.012 1.66c.027.176.08.349.157.511 26.042 42.34 47.956 85.156 59.672 129.154.285.626.942 1.1 1.705 1.231l35.15 5.479.023.01c.626.41 1.504.517 2.268.277l.018-.005c1.099-.12 2.078-.956 2.24-1.912l19.12-26.792c.463-.51.656-1.193.51-1.81L90.44 130.408a1.8 1.8 0 0 0-.014-.1 1.882 1.882 0 0 0-.02-.116l-.033-.095-.057-.105-.033-.094-.056-.106-.046-.073a2.03 2.03 0 0 0-.214-.267 2.092 2.092 0 0 0-.07-.084 2.425 2.425 0 0 0-.088-.078l-.064-.068a2.415 2.415 0 0 0-.106-.073 1.793 1.793 0 0 0-.19-.134 2.278 2.278 0 0 0-.095-.042 2.197 2.197 0 0 0-.1-.056l-.024-.01-37.965-25.252a2.782 2.782 0 0 0-1.892-.128zm4.515 6.229l29.877 21.597-33.972 26.928zm-4.381 2.347l-4.335 47.777-31.536-2.846-7.764-1.083zm36.931 22.858l29.572 129.802-16.099 23.51-29.615-71.137-16.126-53.604zM6.491 160.72l6.39.572 33.283 3.601c2.739.745 3.67 6.923 3.842 6.914l15.459 46.382 29.328 72.008-30.686-4.728c-11.642-42.148-30.048-83.79-57.616-124.75z" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M85.68 152.02l-27.87 32 4.643 15.836 28.11-29.665zm14.549 30.525l1.627 7.028-1.609-7.033c-.004.006-.016-.001-.018.005zm-4.634 6.417c-11.542 15.913-19.769 26.746-25.413 33.93l2.18 4.175 24.962-31.718zm11.18 41.637L84.86 257.18l14.75 36.603 19.657-28.464-1.375-5.953c-.363 2.661-1.139 8.418-1.139 8.418z" overflow="visible" opacity=".088"/><path style="marker:none" d="M139.197 90.094l58.306-25.7-18.412 195.63-34.523 30.687-4.22-97.432-2.301-17.645 3.452-82.088z" overflow="visible" fill="#006a85"/><path style="marker:none" d="M197.506 64.389l-48.867 21.526c-.415 3.495-.617 5.838-.617 5.838 1.084-.271 38.519-11.677 38.519-11.677l-11.392 182.272s3.242-7.516 4.746-10.988z" overflow="visible" fill="#9debff"/><path style="marker:none" d="M136.129 6.472L86.262 64.585l50.634 24.166z" overflow="visible" fill="#95eaff"/><path style="marker:none" d="M140.348 5.704l56.196 57.73-57.538 27.043-.96-82.28z" overflow="visible" fill="#007e9d"/><path style="marker:none" d="M138.793 7.663l36.346 55.061-37.703 25.497 59.497-22.68.447-2.545z" overflow="visible" fill="#9debff"/><path style="marker:none" d="M86.262 67.462c-.383 9.973 17.262 199.083 17.262 199.083l41.044 20.33s-3.07-76.334-3.07-77.869c0-1.534-3.451-34.906-3.451-34.906l1.918-83.623z" overflow="visible" fill="#6ae0ff"/><path style="marker:none" d="M136.131 6.48L86.267 64.578l50.624 24.184zM86.267 67.473c-.049 1.294.233 5.703.712 12.223l8.877 12.697s8.825 80.17 9.208 77.869c.384-2.302 7.666-73.265 7.666-73.265l12.65 23.781 10.751-28.385 1.472-2.943z" overflow="visible" opacity=".841" fill="#fff"/><path style="marker:none" d="M88.882 106.422c1.131 13.667 2.219 23.27 3.793 41.033l46.257 35.363c-.342-3.325-.878-8.71-.878-8.71l.617-26.914c-15.823-14.916-34.352-25.626-49.789-40.772zm6.95 76.301c.508 5.617 1.027 11.188 1.519 16.59l44.88 28.812c-.287-7.296-.46-11.48-.57-14.501zm4.414 48.368c1.91 20.747 3.276 35.458 3.276 35.458l41.034 20.316s-.602-15.226-1.139-28.646z" overflow="visible" opacity=".504" fill="#fff"/><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M138.29 0c-.11 0-.221.01-.331.024-.788.08-1.538.48-2.041 1.092L83.847 63.77a3.076 3.076 0 0 0-.689 2.255c-.04.25-.048.507-.023.76l17.373 200.166c.08.969.656 1.883 1.495 2.374l38.875 21.841.023.024a3.093 3.093 0 0 0 2.54 1.305h.023c1.334.288 2.818-.45 3.394-1.685l33.227-28.63a3.084 3.084 0 0 0 1.329-2.254L200.116 64.65a2.21 2.21 0 0 0 .023-.142c.01-.056.018-.11.024-.166v-.143l-.024-.166v-.142a4.42 4.42 0 0 0-.023-.166c-.008-.04-.015-.08-.024-.119a3.044 3.044 0 0 0-.142-.45 3.123 3.123 0 0 0-.047-.143 3.412 3.412 0 0 0-.072-.143 4.945 4.945 0 0 0-.047-.118 3.222 3.222 0 0 0-.095-.143 3.22 3.22 0 0 0-.166-.261 2.797 2.797 0 0 0-.095-.095 2.13 2.13 0 0 0-.095-.118l-.023-.024L140.45.95a3.076 3.076 0 0 0-2.16-.95zm2.754 10.324l50.884 52.878-50.647 22.737zm-6.076 1.4l.261 74.5-35.718-16.78-8.64-4.652zm58.621 57.483l-18.084 188.727-28.362 25.401-5.767-108.919 2.892-79.54zM89.661 71.532l7.239 3.394 37.455 18.524c2.901 2.134 1.483 10.922 1.688 10.98l-.743 69.44 5.08 109.987-33.963-18.993z" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M185.781 92.11l-45.568 32.134-.997 23.449 44.904-28.86zm4.628 47.49l-.95 10.229.974-10.23c-.008.008-.02-.007-.024 0zm-8.022 6.835c-19.95 16.929-33.965 28.302-43.48 35.766l.855 6.574 42.056-32.942zm-3.82 61.232l-36.408 27.198 2.397 55.845 34.532-30.688.807-8.662c-1.504 3.472-4.746 10.988-4.746 10.988z" overflow="visible" opacity=".027"/><path d="M211.032 149.46l51.266-10.289-69.63 148.362-35.116 10.148 24.745-72.556 3.31-13.685 26.188-58.646z" style="marker:none" overflow="visible" fill="#007998"/><path d="M262.302 139.169l-42.876 10.589c-1.319 2.402-2.145 4.04-2.145 4.04.904.186 32.163-7.073 32.163-7.073l-60.448 141.107s4.628-4.333 6.77-6.333z" style="marker:none" overflow="visible" opacity=".814" fill="#fff"/><path d="M235.185 96.974l-57.173 15.124 31.651 35.567z" style="marker:none" overflow="visible" fill="#95eaff"/><path d="M235.744 99.444l27.184 38.417-52.152 11.811 22.498-49.226z" style="marker:none" overflow="visible" fill="#006077"/><path d="M232.845 99.745l13.431 42.49-34.42 8.761 49.137-11.732 1.07-1.698z" style="marker:none" overflow="visible" opacity=".509" fill="#fff"/><path d="M177.186 114.196c-3.154 7.138-43.978 151.315-43.978 151.315l25.444 29.372s19.568-56.76 20.009-57.88c.44-1.119 7.386-26.682 7.386-26.682l25.46-60.31z" style="marker:none" overflow="visible" fill="#6ae0ff"/><path d="M232.308 98.514l-54.29 13.58 31.638 35.578zm-55.121 15.692c-.409.927-1.459 4.242-2.965 9.167l3.12 12.406s-28.964 101.995-28.011 100.452c.952-1.542 39.55-91.114 39.55-91.114l-14.095 62.693 33.25-57.759 1.965-1.625z" style="marker:none" overflow="visible" opacity=".867" fill="#fff"/><path d="M168.002 143.54c-3.06 10.368-4.987 17.757-8.885 31.27l25.103 42.183c.694-2.545 1.83-6.664 1.83-6.664l8.194-19.41c-7.777-16.486-18.824-30.863-26.242-47.38zm-16.6 58.111c-1.225 4.277-2.428 8.524-3.604 12.638l25.933 36.917c1.875-5.422 2.945-8.535 3.728-10.778zm-10.517 36.842c-4.5 15.808-7.68 27.02-7.68 27.02l25.442 29.359s3.91-11.318 7.352-21.297z" style="marker:none" overflow="visible" opacity=".504" fill="#fff"/><path d="M235.813 94.554a2.408 2.408 0 0 0-.26-.1c-.623-.222-1.31-.195-1.869.073l-57.28 16.121a2.19 2.19 0 0 0-1.17 1.4 2.205 2.205 0 0 0-.237.546L130.793 264.74c-.217.735-.04 1.606.458 2.26l23.358 29.706.01.026c.198.793.802 1.51 1.562 1.852l.017.008c.934.682 2.276.67 3.07-.026l33.538-9.107a2.217 2.217 0 0 0 1.66-1.173l69.75-148.273.059-.096c.023-.037.045-.074.066-.113l.04-.104c.01-.043.021-.086.03-.13l.041-.103.03-.13.016-.094c.017-.125.024-.252.02-.38l.006-.12a2.812 2.812 0 0 0-.014-.13c0-.034 0-.068-.002-.103a2.743 2.743 0 0 0-.031-.137 2.054 2.054 0 0 0-.052-.25 2.492 2.492 0 0 0-.045-.102 2.456 2.456 0 0 0-.038-.12l-.012-.026-27.143-41.863a2.844 2.844 0 0 0-1.374-1.458zm-.865 8.505l23.444 32.997-44.58 11.112zm-5.032-1.131L209.12 145.23l-22.405-24.895-5.249-6.454zm28.019 39.096l-67.4 143.714-28.904 8.476 26.862-81.482 25.031-56.987zm-79.326-22.655l4.542 5.04 23.228 26.783c1.598 2.584-2.005 8.491-1.865 8.606l-20.494 50.383-27.693 82.017-20.432-25.887z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path d="M245.954 167.437l-43.948 7.29-7.489 16.749 42.502-5.137zm-10.102 36.277l-3.659 7.124 3.677-7.116c-.008.003-.012-.012-.018-.008zm-8.075 2.142c-20.062 5.278-34.006 8.606-43.398 10.679l-1.236 5.097 41.503-9.123zm-20.484 43.305l-35.55 6.936-14.2 41.579 35.123-10.145 3.1-6.032c-2.142 2-6.77 6.333-6.77 6.333z" style="marker:none" overflow="visible" opacity=".142"/><path d="M111.669 191.291L76.95 210.55l28.752 21.97 31.734-27.937z" style="marker:none" overflow="visible" fill="#a0ffff"/><path d="M73.153 212.99c0 1.628 17.902 79.202 17.902 79.202l33.09 17.901-19.528-79.744z" style="marker:none" overflow="visible" fill="#98eaff"/><path d="M77.96 234.96c4.379 19.372 8.979 36.592 11.013 45.419l28.361 12.443-2.682-15.545-29.358-14.383-4.2-16.874 30.497 14.002-2.706-8.638-28.195-16.305s-1.173-.063-2.73-.119z" style="marker:none" overflow="visible" opacity=".354" fill="#fff"/><path d="M105.16 231.434s33.361-27.937 33.361-26.852c0 1.085 20.886 91.95 20.886 91.95l-34.448 13.561z" style="marker:none" overflow="visible" fill="#009ec6"/><path d="M148.188 247.515l-.997.475-34.271 14.24 2.089 8.33 32.728-13.077 4.082 14.359-33.345 12.53 3.488 13.861c.964-.331 19.566-6.709 35.007-12.365-1.77-7.706-4.51-19.642-8.781-38.353z" style="marker:none" overflow="visible" opacity=".522" fill="#007998"/><path d="M105.702 230.892l30.378-21.97 21.7 87.88-25.226-70.792-25.496 5.424z" style="marker:none" overflow="visible" fill="#8affff"/><path d="M111.126 192.105c1.085 0 27.395 14.375 25.497 14.375-1.899 0-31.464 24.412-31.464 24.412l16.546-26.581-14.105-12.206z" style="marker:none" overflow="visible" fill="#cbffff"/><path d="M109.81 186.781l-1.4.831-36.05 21.075-.926.665c-1.379.242-2.265 1.965-1.661 3.228.034.109.1.27.166.498.132.456.317 1.135.546 1.97a701.35 701.35 0 0 1 1.85 6.906 2072.203 2072.203 0 0 1 5.65 22.072c4.266 17.022 7.503 36.488 9.651 47.945.116.634 2.042 1.563 2.595 1.895l31.47 18.465c.597.346 1.354.4 1.994.142l35.79-14.098c1.02-.39 1.655-1.594 1.4-2.658l-21.123-88.905.546-.474-.702-2.408.061-2.624-28.385-13.813zm.286 6.883l22.736 11.06-28.788 24.587-24.612-17.728zm25.774 16.47l20.126 84.705-30.046 11.82-17.706-72.933zm-60.116 6.979l25.442 17.657 1.21.878.047.047 17.017 70.037-26.06-15.284c-2.26-11.803-6.836-30.855-11.012-47.514a2061.692 2061.692 0 0 0-5.672-22.143c-.402-1.528-.648-2.464-.973-3.679z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon earth" viewBox="0 0 350 212" xmlns="http://www.w4.org/2000/svg"><g color="#000"><path d="M170.533 35.373C114.926 37.658 55.72 49.086.113 51.366 8.056 67.5 16.067 85.76 20.246 97.342c13.245 29.509 21.434 39.14 35.083 68.464 7.96 3.767 15.977 7.416 23.948 11.16 4.41-5.015 8.184 5.254 11 9.093 8.514 5.189 20.29 10.107 29.323 14.667 11.596 5.16 19.68 4.532 31.415 9.203 12.646.706 25.294 1.385 37.944 2.029 23.902-16.885 48.477-32.754 73.004-48.709 13.95 1.379 27.904 2.72 41.85 4.127 3.52-20.468 7.136-40.919 10.695-61.38 5.56-1.532 11.111-3.1 16.683-4.592 4.78-21.344 12.5-34.893 17.23-56.249-58.298-.685-119.597-9.127-177.887-9.782zm.232 14.88c52.06.573 104.122 1.164 156.183 1.744l-8.312 37.49c-5.715 1.572-11.42 3.183-17.147 4.709-3.33 19.007-6.666 38.014-9.998 57.02-11.081-1.114-22.172-2.144-33.248-3.312-24.617 16.156-49.487 31.926-73.526 48.94-10.496-.769-21.184-.768-31.563-2.009l-53.998-25.019c-4.427-5.82-8.849-11.644-13.31-17.437-3.665 3.01-7.049 9.975-12.155 5.563-9.12-1.735-10.467-11.273-14.177-18.43-12.735-27.608-25.558-55.182-37.606-83.098l148.857-6.161z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path d="M170.823 42.813l-159.67 6.568c0 3.758 49.755 110.845 49.755 110.845l17.903 8.312c3.585-2.206 6.277-4.882 6.277-4.882l9.242 12.09 57.719 26.795 34.759 1.86 27.26-18.774 46.035-30.051 37.55 3.72 10.346-59.171 16.914-4.709L341.006 46.5z" style="marker:none" overflow="visible" fill="#502d16"/><path d="M164.313 43.104l-24.413.988c8.686 18.567 17.581 39.35 18.891 49.174 2.224 16.68-4.548 86.019-6.917 109.217l.175.058 19.24 1.046c4.918-42.477 11.878-106.86 10.114-117.006-2.049-11.775-5.803-21.66-17.09-43.478zm-24.413.988l-12.148.465-.058.058 12.206-.523z" style="marker:none" overflow="visible" opacity=".274"/><path d="M67.244 47.056l-56.091 2.325c0 3.758 49.755 110.845 49.755 110.845l17.903 8.312c3.585-2.206 6.277-4.882 6.277-4.882l1.047 1.395c-2.109-27.705-7.052-70.465-18.891-117.995z" style="marker:none" overflow="visible" opacity=".292" fill="#c87137"/><path d="M139.9 44.092l-32.608 1.337c6.317 57.359 3.963 106.174.93 136.769l43.652 20.285c2.369-23.198 9.141-92.537 6.917-109.217-1.31-9.824-10.205-30.607-18.89-49.174z" style="marker:none" overflow="visible" opacity=".221" fill="#c87137"/><path d="M201.048 43.162c8.38 50.488-1.96 120.598-8.719 157.403l21.74-14.938 2.906-1.86 21.564-138.338-3.08-1.86z" style="marker:none" overflow="visible" opacity=".319"/><path d="M248.42 43.685c3.496 35.209 7.696 82.681 10.288 112.821l1.395-.93 37.55 3.72 10.346-59.171 1.57-.465 9.939-55.161z" style="marker:none" overflow="visible" opacity=".301"/><path d="M147.864 1.08c-12.12.096-12.743 23.579-23.483 9.067-7.508-6.18-21.746-14.614-29.64-7.33 1.74 8.984 21.416 16.284 16.964 21.95-10.81 1.552-21.618 5.62-31.132-1.747-3.98-3.22-15.258-6.657-18.896-4.116-3.11 2.173.748 9.7 4.18 14.576-16.298 10.457-27.023 6.479-47.454 11.59C14.32 46.23-1.65 50.71.14 51.234c13.232 3.87 23.583 6.839 29.855 8.66 38.12 4.969 73.216 7.492 111.336 12.462 18.778.14 18.486-3.828 34.009-6.058 16.19 4.205 32 10.97 48.923 11.148 38.666-8.154 75.268-18.157 109.287-25.457 6.908-2.26 17.55-6.78 15.324-7.511-2.753-.903-15.877-5.307-21.864-6.698-21.497-3.624-33.75-7.43-58.183-11.477-7.338-3.965-24.059-9.245-32.546-7.247-21.235 1.353-38.814 8.133-64.024 3.9l-18.638-1.999c.596-6.438 5.168-15.332-2.558-19.236l-1.553-.517-1.643-.125zm97.65 32.317c18.038 3.836 36.417 7.923 52.288 11.358-26.679 4.683-58.817 10.613-89.14 15.844-11.37-2.314-22.588-5.758-34.06-7.324-10.733.953-21.441 3.465-32.189 3.393l-82.493-7.81c11.294-.02 21.335-7.379 30.98-5.639 14.35-2.527 29.625-4.868 43.444-7.216 7.646-1.616 11.707-.988 19.26-.097 10.848 1.212 21.698 2.891 32.607 1.354l59.303-3.864z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M148.27 8.52s-8.365 2.344-11.74 19.994c-.36.043-.79.07-1.163.116a24.46 24.46 0 0 0-1.628-1.802c-5.167-5.167-23.482-17.38-23.482-17.38s6.58 3.793 16.914 19.763l.697.465c-10.445 1.506-23.973 3.728-38.246 6.22-8.972-6.48-19.298-8.138-19.298-8.138l8.022 10.114C42.559 44.256 16.19 51.123 16.19 51.123l129.29 13.312 30.05-3.778 32.9 7.498L338.98 45.66l-93-19.762-72.309 4.708-26.33-2.848c-.523-.095-1.395-.037-2.5 0z" overflow="visible" fill="#aad400"/><path d="M245.98 25.899l-49.524 3.196c-15.5 4.6-32.019 8.41-42.954 9.707-39.193 4.65 59.769 10.62 73.72 10.62 3.382 0-75.798 9.55-74.534 14.084l22.843-2.848 32.9 7.498L338.98 45.66z" style="marker:none" overflow="visible" opacity=".075"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon water" viewBox="0 0 180 265" xmlns="http://www.w3.org/2000/svg"><g color="#000"><path d="M64.207 14.367c10.298 80.222-49.852 99.726-62.995 158.29-13.143 58.566 83.524 126.128 150.005 71.21 80.37-66.391-29.65-179.028-57.118-215.438C66.629-7.98 60.647-.424 61.888 3.245c1.24 3.67 2.319 11.122 2.319 11.122z" style="marker:none" overflow="visible"/><path d="M71.91 14.91c5.624 37.788-9.552 75.41-33.544 103.799-17.09 23.04-38.575 51.832-27.565 81.899 18.826 50.723 90.72 74.287 133.826 39.263 24.62-17.849 34.655-51.932 24.08-80.338-15.988-55.263-58.47-97.107-92.83-141.739-.78-.439-5.035-6.373-3.966-2.885z" style="marker:none" overflow="visible" fill="#6ddaff"/><path d="M62.236 97.344a160.468 160.468 0 0 1-15.232 21.359c-17.09 23.04-38.577 51.838-27.567 81.905 4.827 13.005 13.148 24.226 23.573 33.13.02.017.047-.022.058-.005 4.773 1.035 9.69 1.428 14.72 1.019 32.321-2.63 47.353-35.783 44.24-74.05-2.596-31.893-14.364-57.31-39.792-63.358z" style="marker:none" overflow="visible" opacity=".482" fill="#fff"/><path d="M86.04 190.026a16.91 20.433-4.652 0 1-14.845 21.704 16.91 20.433-4.652 0 1-18.78-18.114 16.91 20.433-4.652 0 1 14.064-22.459 16.91 20.433-4.652 0 1 19.365 17.178" style="marker:none" overflow="visible" opacity=".482" fill="#fff"/><path d="M71.826 13.867c-.116.09-.116.388.085 1.042.3 2.02.543 4.048.727 6.065 44.671 50.543 76.099 110.675 60.502 168.746-7.726 28.764-23.086 55.254-58.273 64.342 24.033 5.61 49.943 1.91 69.76-14.191 24.62-17.849 34.655-51.932 24.08-80.338-15.988-55.263-58.47-97.107-92.83-141.739-.633-.356-3.548-4.317-4.051-3.927z" style="marker:none" overflow="visible" opacity=".327"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon fire" viewBox="0 0 257 310" xmlns="http://www.w3.org/2000/svg" ><g color="#000"><path style="marker:none" d="M26.604 238.398c-15.72-13.475-16.584-33.341-14.857-45.261 1.458-10.057 14.904-21.512 17.722-32.209 1.079-4.093 3.95-12.469-3.343-24.181-6.33-10.164-9.245-14.986-9.245-14.986s12.71 7.074 18.584 11.565c5.873 4.492 19.997 18.616 21.38 21.725 1.381 3.11 8.155-14.832 3.091-24.977-3.81-7.635-8.11-16.403-8.11-16.403s22.665 16.813 26.314 26.321c4.39 11.438.635 26.541.635 26.541l9.412 5.713s12.337-11.342 14.756-22.744c1.649-7.772 1.995-10.64-8.163-16.29-3.096-1.721-8.513-3.615-12.032-6.585-11.056-9.328-15.202-15.547-14.165-23.148 1.036-7.602 10.192-24.704 10.192-24.704s2.246 17.275 8.465 22.112c6.219 4.837 31.268 3.11 38.87 12.093 7.6 8.983 9.673 23.84 8.982 29.368-.69 5.528 2.073.345 3.8-8.983 1.728-9.329 2.42-20.385 2.42-20.385s4.145 1.036 6.564-5.528c2.418-6.565 2.418-15.893 1.727-17.275-.69-1.382-8.637 2.764-13.474-1.037-4.837-3.8-11.056-16.584-12.093-24.876-1.036-8.292 6.565-25.222 6.565-30.75 0-5.528 4.837-.346 6.91 7.947 2.073 8.292 0 21.766 4.837 29.022 4.837 7.255 19.694 18.312 22.112 21.076 2.419 2.764-.345 14.165-2.418 25.221-2.073 11.057 3.11 19.003 5.182 25.913 2.073 6.91 2.073 22.804-2.073 30.75-4.146 7.947-12.438 22.458-12.438 22.458s6.872-8.687 13.782-11.796c6.91-3.11 12.361-.816 14.78-8.763 2.418-7.947 9.262-16.647 10.299-17.684 1.036-1.036-3.965-11.855-5.002-22.22-1.036-10.365 1.53-21.498 6.02-29.445 4.492-7.946 17.967-17.275 22.458-21.076 4.492-3.8 4.69-10.288 4.69-10.288s-3.454 12.093-5.527 18.312c-2.073 6.219-6.496 21.65-6.91 32.823-.193 5.196 2.073 15.46 2.073 15.46s12.665-1.804 17.62-5.44c8.01-5.88 15.203-15.203 16.93-24.532 1.728-9.328 1.728-16.93 1.728-16.93s3.455 6.91 7.6 16.24c4.147 9.328 3.888 21.248 1.815 27.122-2.073 5.873-9.07 16.584-13.561 19.693-3.383 2.342-9.166 6.518-13.268 7.798-9.033-5.8-8.931-2.01-4.18 4.468 0 0 23.148 38.696 23.148 49.407 0 10.71-3.627 16.93-7.428 23.84-3.8 6.91-19.348 22.112-27.295 25.221-2.5.979-1.927-5.25-4.364-4.336-5.307 1.99-13 10.882-13.948 11.592-1.382 1.037-8.925 10.974-14.51 15.202-10.393 7.868-21.622 16.659-34.551 18.312-13.855 1.772-28.25-3.482-40.77-9.674-2.934-1.452-7.6-6.22-7.6-6.22s-53.208-.69-63.92-22.803c-10.71-22.112-6.564-24.53-6.564-25.912 0-1.382.346-5.874.346-5.874zM0 54.59c2.419 7.946-1.382 30.75 1.037 38.35 2.418 7.602 12.438 20.731 13.474 25.568 1.037 4.837 5.874-4.837 6.565-14.857.69-10.02 3.11-15.547-3.8-27.295C10.365 64.61 0 54.59 0 54.59z" overflow="visible"/><path style="marker:none" d="M120.581 11.056c-5.874 14.511-27.295 33.514-35.241 44.57-7.947 11.056-5.528 20.73-5.528 20.73s14.165-4.146 24.185-10.71c10.02-6.565 17.275-19.003 20.04-26.604 2.763-7.601 4.145-17.966 3.109-24.876C126.109 7.256 123 0 123 0zm104.688 32.132c-8.292 12.438-10.04 17.84-10.02 27.64.014 6.012 6.22 16.93 6.22 16.93 4.49-4.146 7.534-6.651 9.673-11.056 2.457-5.06 3.957-11.024 3.11-16.584-.963-6.316-8.983-16.93-8.983-16.93z" overflow="visible"/><path d="M84.032 71.167c3.664-11.971 7.96-16.51 19.932-26.77 11.97-10.261 14.17-15.88 16.124-18.812 1.954-2.932 1.466 2.443-.244 7.818s-10.893 22.373-16.756 27.014c-5.864 4.642-19.056 10.75-19.056 10.75zm-78.036-.874c-1.71 12.216-3.543 15.758-.61 23.088 2.93 7.329 7.328 12.948 8.794 16.368 1.466 3.42 2.932-2.198 3.91-9.528.976-7.329.121-9.161-2.566-15.269-2.687-6.108-9.528-14.659-9.528-14.659zm125.33-27.851c-2.443 16.613-4.03 21.133-1.588 28.95 2.443 7.819 9.284 11.972 14.414 13.926 5.13 1.955 3.176-.977.978-3.42-2.2-2.443-9.773-13.193-10.506-21.988-.733-8.795-.366-9.405-1.343-15.025-.978-5.619-1.955-2.443-1.955-2.443zm93.326 7.452c-6.108 14.658-3.054 23.82-3.054 27.484 0 3.665 4.153.49 5.864-4.397 1.71-4.886 3.786-13.07 1.832-17.712-1.955-4.642-4.642-5.375-4.642-5.375zM76.823 89.856c-4.398 15.88-4.591 22.438 1.028 27.813s25.523 10.905 30.05 17.353c8.062 11.483-8.629 28.36-15.66 41.296-.571 1.051-1.32 2.008-2.056 2.963-2.249-.083-5.391-.51-7.98-2.237-4.398-2.932-7.796-5.35-8.284-8.525-.489-3.176 3.144-14.69 3.144-21.042 0-6.352-10.963-19.746-15.116-22.19-4.153-2.443 2.167 4.634 3.144 6.833.977 2.199 1.73 11.223-1.935 19.53-3.664 8.306-5.865 8.767-5.865 8.767s-18.82-20.47-23.218-23.158c-4.397-2.687-3.666-2.955-5.865-3.688-2.198-.733.726 2.66.726 2.66 6.352 7.818 5.147 16.14 4.414 22.493-.733 6.352-16.87 28.331-16.87 36.882 0 8.551 1.015 15.666 8.344 27.148 7.33 11.483 8.037 18.538 8.526 20.981.488 2.443 3.453 8.348 8.827 13.967 5.375 5.62 9.04 8.743 11.972 11.186 2.932 2.443-1.52 4.397-6.65 0-5.131-4.398-13.65-15.832-15.117-16.81-1.465-.976-1.233 6.07 1.21 9.736 2.443 3.664 9.801 10.249 15.176 13.18 5.375 2.932 16.122 1.993 18.32 2.238 2.2.244.454 3.182 9.493 5.38 9.04 2.2 14.693 2.661 14.693 2.661s-18.014-22.9-20.212-45.131c-2.2-22.232.52-31.001 2.997-36.304 2.016-4.317 2.934-5.54 5.545-9.562-5.611 17.334-5.968 37.098-1.028 54.598 4.382 15.522 16.101 32.509 26.362 40.571 10.261 8.062 22.479 11.234 35.916 12.456 13.436 1.221 39.808-20.74 43.473-26.604 3.664-5.864 22.498-22.264 27.873-26.906 5.375-4.642 11.004-12.963 11.004-16.628 0-3.664-.483-10.702-.483-10.702s4.892 7.57 5.381 12.456c.489 4.886-9.29 14.119-11.488 17.05-2.199 2.932 4.866.98 8.042-.242 3.176-1.221 13.947-19.787 15.901-24.185 1.955-4.397-7.35-41.03-22.008-55.445-14.659-14.414-5.595-22.466-2.419-19.046 3.176 3.42 8.508 7.795 10.219 8.284 1.71.489 19.805-10.258 22.492-18.32 2.687-8.063 3.095-13.49 2.418-20.256-.359-3.59-3.385-10.278-3.385-10.278s-.8 4.012-2.721 9.19c-3.221 8.68-9.682 20.713-21.465 22.855-18.812 3.42-16.366 2.93-18.32.242-1.955-2.687-3.693-13.44-3.205-23.702.105-2.207.634-4.55 1.39-6.892 2.763-8.547 8.647-17.129 8.647-19.046 0-2.443-5.644 1.709-9.553 6.106-1.727 1.944-5.385 5.71-8.283 11.247-3.661 6.992-6.056 16.856-1.693 29.808 7.817 23.21-6.153 33.225-7.619 36.157-1.466 2.932-.44 9.022-10.702 19.771-10.26 10.75-13.687 10.505-23.46 18.079-9.772 7.574-12.987 12.22-14.208 17.595-.889 3.909-.874 18.123-.424 26.543-.51-2.955-1.073-6.222-1.753-9.916-1.71-9.284-3.645-11.465-1.935-19.771 1.71-8.307 31.38-25.76 36.021-32.845 4.642-7.085.824-5.875-4.062-3.92-4.886 1.954-12.942 9.65-16.118 12.338-3.176 2.687-.256-3.937 1.21-9.312s7.654-13.813 10.278-21.222c1.903-5.371 4-10.932 3.87-16.628-.183-8.034-5.308-15.275-6.53-23.218-1.226-7.971-3.657-16.367-.725-24.185a132.378 132.378 0 0 0 1.995-5.744c1.266-3.886 1.598-5.848.907-5.502-.377.188-1.797 2.335-3.447 5.018-2.623 4.268-6.414 9.474-8.283 14.814-2.289 6.536-1.027 13.986-3.386 20.497-3.346 9.232-11.026 18.31-14.934 25.394-3.91 7.085-4.414 5.382-4.414 5.382s4.141-18.317 4.172-27.632c.02-6.322.775-13.476-2.721-18.744-3.937-5.932-5.8-9.599-18.26-11.064-12.46-1.466-16.861-3.881-23.702-8.768-6.84-4.886-7.618-14.148-7.618-14.148z" style="marker:none" overflow="visible" fill="#fc0"/><path d="M73.18 164.108c.978-3.665 0 0 0 0z" style="marker:none" overflow="visible"/><path d="M113.464 124.078c-1.711.5 2.6 8.223 2.6 8.223 4.146 21.421-12.74 45.261-17.232 58.045-4.492 12.784-8.284 29.411-1.028 48.068 2.626 6.754 5.344 11.571 8.283 15.358 11.783 6.887 20.199 11.342 26.483 14.27-3.549-10.241-7.756-31.677-6.107-38.274 2.073-8.292 22.432-18.32 27.27-23.157 4.836-4.838-6.211 3.463-10.703 3.809-4.491.345 4.518-19.383 9.01-29.748 4.49-10.365 7.22-24.505 6.53-27.27-.692-2.763-24.143 22.804-31.744 24.186-7.601 1.382-2.444-19.374-4.172-30.776-1.727-11.401-.674-17.275-6.893-21.766-1.166-.843-1.903-1.083-2.297-.968zm92.81 42.627c-1.111-.248.057 2.768 1.029 5.683 1.727 5.183-.354 25.594-6.228 35.613-5.874 10.02-4.466-23.131-5.502-28.66-1.037-5.527-7.645 9.286-11.79 17.233-4.147 7.946-15.531 18.691-26.242 27.329-10.71 8.638-13.103 15.54-10.339 22.795 2.233 5.86 1.556 10.812 2.298 15.962 1.632 1.192 3.581 2.27 5.925 3.144 17.087-5.266 35.882-14.455 43.594-22.553 13.82-14.51 21.741-22.846 22.432-26.301.691-3.455 8.284 8.983 8.284 14.51 0 5.529 4.543-3.437 3.506-14.147-1.036-10.711-7.99-29.377-19.046-42.506-4.837-5.744-7.055-7.91-7.92-8.102zm-159.259-6.047c-1.728 19.349-10.411 27.472-8.647 41.478 1.7 13.491 5.865 27.252 17.958 36.58 5.87 4.53 9.835 4.827 12.395 3.93a43.857 43.857 0 0 1-.423-3.023c-2.2-22.232-.465-33.505 3.688-38.636 1.452-1.793 4.402-4.244 7.618-6.711-.24.743-.444 1.486-.665 2.237 4.828-5.073 10.444-9.88 6.41-13.423-3.342-2.933-6.304 7.335-10.703 7.981-4.361.641-9.479-1.222-12.455-4.474-4.263-4.657-1.282-13.103-4.837-18.32-2.413-3.54-10.34-7.619-10.34-7.619z" style="marker:none" overflow="visible" fill="#f60"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon ice" viewBox="0 0 265 313" xmlns="http://www.w3.org/2000/svg"><g color="#000"><path style="marker:none" d="M49.139 161.531l39.219-30.684 30.911 134.47-19.65 28.464-25.764-63.853-5.857-11.206-16.28-55.43z" overflow="visible" fill="#0082a3"/><path style="marker:none" d="M88.359 130.843l-32.874 25.708c.486 2.422.87 4.029.87 4.029.778-.433 27.134-16.743 27.134-16.743l33.264 123.946s.776-5.757 1.139-8.418z" overflow="visible" fill="#5cddff"/><path style="marker:none" d="M51.069 109.125L2.255 156.887l44.791 4.287z" overflow="visible" fill="#95eaff"/><path style="marker:none" d="M51.77 105.417l35.624 25.015-38.315 31.4 1.484-54.22z" overflow="visible" fill="#007795"/><path style="marker:none" d="M51.018 107.082l19.635 27.864-23.31 25.749 40.839-28.952-.242-1.798z" overflow="visible" fill="#5cddff"/><path style="marker:none" d="M2.919 158.802c9.364 5.499 66.958 127.187 59.335 128.458l36.48 3.968s-20.002-50.082-20.356-51.103c-.355-1.02-10.734-22.424-10.734-22.424l-17.823-56.093z" overflow="visible" fill="#6ae0ff"/><path style="marker:none" d="M48.683 106.915L2.257 156.882l44.788 4.3zM2.926 158.809c.26.872 1.497 3.74 3.373 7.967l9.806 6.382s25.345 51.294 25.111 49.673c-.234-1.621-10.98-50.54-10.98-50.54l15.287 12.878 1.772-21.393.46-2.301z" overflow="visible" opacity=".876" fill="#fff"/><path style="marker:none" d="M17.957 183.449c4.031 8.83 7.09 14.968 12.412 26.421l39.974 13.426c-1.032-2.133-2.692-5.591-2.692-5.591l-5.736-18.054c-15.697-6.24-28.507-9.72-43.958-16.202zm23.356 49.645c1.69 3.62 3.379 7.206 5.007 10.686l37.039 8.897c-1.907-4.788-3.007-7.532-3.79-9.517zm12.759 30.089c6.268 13.361 10.723 22.832 10.723 22.832l33.928 5.209s-3.983-9.991-7.497-18.797z" overflow="visible" opacity=".726" fill="#fff"/><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M49.373 103.527c-.086.026-.17.058-.252.093-.592.236-1.08.678-1.329 1.202L.196 156.909a1.912 1.912 0 0 0-.012 1.66c.027.176.08.349.157.511 26.042 42.34 47.956 85.156 59.672 129.154.285.626.942 1.1 1.705 1.231l35.15 5.479.023.01c.626.41 1.504.517 2.268.277l.018-.005c1.099-.12 2.078-.956 2.24-1.912l19.12-26.792c.463-.51.656-1.193.51-1.81L90.44 130.408a1.8 1.8 0 0 0-.014-.1 1.882 1.882 0 0 0-.02-.116l-.033-.095-.057-.105-.033-.094-.056-.106-.046-.073a2.03 2.03 0 0 0-.214-.267 2.092 2.092 0 0 0-.07-.084 2.425 2.425 0 0 0-.088-.078l-.064-.068a2.415 2.415 0 0 0-.106-.073 1.793 1.793 0 0 0-.19-.134 2.278 2.278 0 0 0-.095-.042 2.197 2.197 0 0 0-.1-.056l-.024-.01-37.965-25.252a2.782 2.782 0 0 0-1.892-.128zm4.515 6.229l29.877 21.597-33.972 26.928zm-4.381 2.347l-4.335 47.777-31.536-2.846-7.764-1.083zm36.931 22.858l29.572 129.802-16.099 23.51-29.615-71.137-16.126-53.604zM6.491 160.72l6.39.572 33.283 3.601c2.739.745 3.67 6.923 3.842 6.914l15.459 46.382 29.328 72.008-30.686-4.728c-11.642-42.148-30.048-83.79-57.616-124.75z" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M85.68 152.02l-27.87 32 4.643 15.836 28.11-29.665zm14.549 30.525l1.627 7.028-1.609-7.033c-.004.006-.016-.001-.018.005zm-4.634 6.417c-11.542 15.913-19.769 26.746-25.413 33.93l2.18 4.175 24.962-31.718zm11.18 41.637L84.86 257.18l14.75 36.603 19.657-28.464-1.375-5.953c-.363 2.661-1.139 8.418-1.139 8.418z" overflow="visible" opacity=".088"/><path style="marker:none" d="M139.197 90.094l58.306-25.7-18.412 195.63-34.523 30.687-4.22-97.432-2.301-17.645 3.452-82.088z" overflow="visible" fill="#006a85"/><path style="marker:none" d="M197.506 64.389l-48.867 21.526c-.415 3.495-.617 5.838-.617 5.838 1.084-.271 38.519-11.677 38.519-11.677l-11.392 182.272s3.242-7.516 4.746-10.988z" overflow="visible" fill="#9debff"/><path style="marker:none" d="M136.129 6.472L86.262 64.585l50.634 24.166z" overflow="visible" fill="#95eaff"/><path style="marker:none" d="M140.348 5.704l56.196 57.73-57.538 27.043-.96-82.28z" overflow="visible" fill="#007e9d"/><path style="marker:none" d="M138.793 7.663l36.346 55.061-37.703 25.497 59.497-22.68.447-2.545z" overflow="visible" fill="#9debff"/><path style="marker:none" d="M86.262 67.462c-.383 9.973 17.262 199.083 17.262 199.083l41.044 20.33s-3.07-76.334-3.07-77.869c0-1.534-3.451-34.906-3.451-34.906l1.918-83.623z" overflow="visible" fill="#6ae0ff"/><path style="marker:none" d="M136.131 6.48L86.267 64.578l50.624 24.184zM86.267 67.473c-.049 1.294.233 5.703.712 12.223l8.877 12.697s8.825 80.17 9.208 77.869c.384-2.302 7.666-73.265 7.666-73.265l12.65 23.781 10.751-28.385 1.472-2.943z" overflow="visible" opacity=".841" fill="#fff"/><path style="marker:none" d="M88.882 106.422c1.131 13.667 2.219 23.27 3.793 41.033l46.257 35.363c-.342-3.325-.878-8.71-.878-8.71l.617-26.914c-15.823-14.916-34.352-25.626-49.789-40.772zm6.95 76.301c.508 5.617 1.027 11.188 1.519 16.59l44.88 28.812c-.287-7.296-.46-11.48-.57-14.501zm4.414 48.368c1.91 20.747 3.276 35.458 3.276 35.458l41.034 20.316s-.602-15.226-1.139-28.646z" overflow="visible" opacity=".504" fill="#fff"/><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M138.29 0c-.11 0-.221.01-.331.024-.788.08-1.538.48-2.041 1.092L83.847 63.77a3.076 3.076 0 0 0-.689 2.255c-.04.25-.048.507-.023.76l17.373 200.166c.08.969.656 1.883 1.495 2.374l38.875 21.841.023.024a3.093 3.093 0 0 0 2.54 1.305h.023c1.334.288 2.818-.45 3.394-1.685l33.227-28.63a3.084 3.084 0 0 0 1.329-2.254L200.116 64.65a2.21 2.21 0 0 0 .023-.142c.01-.056.018-.11.024-.166v-.143l-.024-.166v-.142a4.42 4.42 0 0 0-.023-.166c-.008-.04-.015-.08-.024-.119a3.044 3.044 0 0 0-.142-.45 3.123 3.123 0 0 0-.047-.143 3.412 3.412 0 0 0-.072-.143 4.945 4.945 0 0 0-.047-.118 3.222 3.222 0 0 0-.095-.143 3.22 3.22 0 0 0-.166-.261 2.797 2.797 0 0 0-.095-.095 2.13 2.13 0 0 0-.095-.118l-.023-.024L140.45.95a3.076 3.076 0 0 0-2.16-.95zm2.754 10.324l50.884 52.878-50.647 22.737zm-6.076 1.4l.261 74.5-35.718-16.78-8.64-4.652zm58.621 57.483l-18.084 188.727-28.362 25.401-5.767-108.919 2.892-79.54zM89.661 71.532l7.239 3.394 37.455 18.524c2.901 2.134 1.483 10.922 1.688 10.98l-.743 69.44 5.08 109.987-33.963-18.993z" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M185.781 92.11l-45.568 32.134-.997 23.449 44.904-28.86zm4.628 47.49l-.95 10.229.974-10.23c-.008.008-.02-.007-.024 0zm-8.022 6.835c-19.95 16.929-33.965 28.302-43.48 35.766l.855 6.574 42.056-32.942zm-3.82 61.232l-36.408 27.198 2.397 55.845 34.532-30.688.807-8.662c-1.504 3.472-4.746 10.988-4.746 10.988z" overflow="visible" opacity=".027"/><path d="M211.032 149.46l51.266-10.289-69.63 148.362-35.116 10.148 24.745-72.556 3.31-13.685 26.188-58.646z" style="marker:none" overflow="visible" fill="#007998"/><path d="M262.302 139.169l-42.876 10.589c-1.319 2.402-2.145 4.04-2.145 4.04.904.186 32.163-7.073 32.163-7.073l-60.448 141.107s4.628-4.333 6.77-6.333z" style="marker:none" overflow="visible" opacity=".814" fill="#fff"/><path d="M235.185 96.974l-57.173 15.124 31.651 35.567z" style="marker:none" overflow="visible" fill="#95eaff"/><path d="M235.744 99.444l27.184 38.417-52.152 11.811 22.498-49.226z" style="marker:none" overflow="visible" fill="#006077"/><path d="M232.845 99.745l13.431 42.49-34.42 8.761 49.137-11.732 1.07-1.698z" style="marker:none" overflow="visible" opacity=".509" fill="#fff"/><path d="M177.186 114.196c-3.154 7.138-43.978 151.315-43.978 151.315l25.444 29.372s19.568-56.76 20.009-57.88c.44-1.119 7.386-26.682 7.386-26.682l25.46-60.31z" style="marker:none" overflow="visible" fill="#6ae0ff"/><path d="M232.308 98.514l-54.29 13.58 31.638 35.578zm-55.121 15.692c-.409.927-1.459 4.242-2.965 9.167l3.12 12.406s-28.964 101.995-28.011 100.452c.952-1.542 39.55-91.114 39.55-91.114l-14.095 62.693 33.25-57.759 1.965-1.625z" style="marker:none" overflow="visible" opacity=".867" fill="#fff"/><path d="M168.002 143.54c-3.06 10.368-4.987 17.757-8.885 31.27l25.103 42.183c.694-2.545 1.83-6.664 1.83-6.664l8.194-19.41c-7.777-16.486-18.824-30.863-26.242-47.38zm-16.6 58.111c-1.225 4.277-2.428 8.524-3.604 12.638l25.933 36.917c1.875-5.422 2.945-8.535 3.728-10.778zm-10.517 36.842c-4.5 15.808-7.68 27.02-7.68 27.02l25.442 29.359s3.91-11.318 7.352-21.297z" style="marker:none" overflow="visible" opacity=".504" fill="#fff"/><path d="M235.813 94.554a2.408 2.408 0 0 0-.26-.1c-.623-.222-1.31-.195-1.869.073l-57.28 16.121a2.19 2.19 0 0 0-1.17 1.4 2.205 2.205 0 0 0-.237.546L130.793 264.74c-.217.735-.04 1.606.458 2.26l23.358 29.706.01.026c.198.793.802 1.51 1.562 1.852l.017.008c.934.682 2.276.67 3.07-.026l33.538-9.107a2.217 2.217 0 0 0 1.66-1.173l69.75-148.273.059-.096c.023-.037.045-.074.066-.113l.04-.104c.01-.043.021-.086.03-.13l.041-.103.03-.13.016-.094c.017-.125.024-.252.02-.38l.006-.12a2.812 2.812 0 0 0-.014-.13c0-.034 0-.068-.002-.103a2.743 2.743 0 0 0-.031-.137 2.054 2.054 0 0 0-.052-.25 2.492 2.492 0 0 0-.045-.102 2.456 2.456 0 0 0-.038-.12l-.012-.026-27.143-41.863a2.844 2.844 0 0 0-1.374-1.458zm-.865 8.505l23.444 32.997-44.58 11.112zm-5.032-1.131L209.12 145.23l-22.405-24.895-5.249-6.454zm28.019 39.096l-67.4 143.714-28.904 8.476 26.862-81.482 25.031-56.987zm-79.326-22.655l4.542 5.04 23.228 26.783c1.598 2.584-2.005 8.491-1.865 8.606l-20.494 50.383-27.693 82.017-20.432-25.887z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path d="M245.954 167.437l-43.948 7.29-7.489 16.749 42.502-5.137zm-10.102 36.277l-3.659 7.124 3.677-7.116c-.008.003-.012-.012-.018-.008zm-8.075 2.142c-20.062 5.278-34.006 8.606-43.398 10.679l-1.236 5.097 41.503-9.123zm-20.484 43.305l-35.55 6.936-14.2 41.579 35.123-10.145 3.1-6.032c-2.142 2-6.77 6.333-6.77 6.333z" style="marker:none" overflow="visible" opacity=".142"/><path d="M111.669 191.291L76.95 210.55l28.752 21.97 31.734-27.937z" style="marker:none" overflow="visible" fill="#a0ffff"/><path d="M73.153 212.99c0 1.628 17.902 79.202 17.902 79.202l33.09 17.901-19.528-79.744z" style="marker:none" overflow="visible" fill="#98eaff"/><path d="M77.96 234.96c4.379 19.372 8.979 36.592 11.013 45.419l28.361 12.443-2.682-15.545-29.358-14.383-4.2-16.874 30.497 14.002-2.706-8.638-28.195-16.305s-1.173-.063-2.73-.119z" style="marker:none" overflow="visible" opacity=".354" fill="#fff"/><path d="M105.16 231.434s33.361-27.937 33.361-26.852c0 1.085 20.886 91.95 20.886 91.95l-34.448 13.561z" style="marker:none" overflow="visible" fill="#009ec6"/><path d="M148.188 247.515l-.997.475-34.271 14.24 2.089 8.33 32.728-13.077 4.082 14.359-33.345 12.53 3.488 13.861c.964-.331 19.566-6.709 35.007-12.365-1.77-7.706-4.51-19.642-8.781-38.353z" style="marker:none" overflow="visible" opacity=".522" fill="#007998"/><path d="M105.702 230.892l30.378-21.97 21.7 87.88-25.226-70.792-25.496 5.424z" style="marker:none" overflow="visible" fill="#8affff"/><path d="M111.126 192.105c1.085 0 27.395 14.375 25.497 14.375-1.899 0-31.464 24.412-31.464 24.412l16.546-26.581-14.105-12.206z" style="marker:none" overflow="visible" fill="#cbffff"/><path d="M109.81 186.781l-1.4.831-36.05 21.075-.926.665c-1.379.242-2.265 1.965-1.661 3.228.034.109.1.27.166.498.132.456.317 1.135.546 1.97a701.35 701.35 0 0 1 1.85 6.906 2072.203 2072.203 0 0 1 5.65 22.072c4.266 17.022 7.503 36.488 9.651 47.945.116.634 2.042 1.563 2.595 1.895l31.47 18.465c.597.346 1.354.4 1.994.142l35.79-14.098c1.02-.39 1.655-1.594 1.4-2.658l-21.123-88.905.546-.474-.702-2.408.061-2.624-28.385-13.813zm.286 6.883l22.736 11.06-28.788 24.587-24.612-17.728zm25.774 16.47l20.126 84.705-30.046 11.82-17.706-72.933zm-60.116 6.979l25.442 17.657 1.21.878.047.047 17.017 70.037-26.06-15.284c-2.26-11.803-6.836-30.855-11.012-47.514a2061.692 2061.692 0 0 0-5.672-22.143c-.402-1.528-.648-2.464-.973-3.679z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon earth" viewBox="0 0 350 212" xmlns="http://www.w4.org/2000/svg"><g color="#000"><path d="M170.533 35.373C114.926 37.658 55.72 49.086.113 51.366 8.056 67.5 16.067 85.76 20.246 97.342c13.245 29.509 21.434 39.14 35.083 68.464 7.96 3.767 15.977 7.416 23.948 11.16 4.41-5.015 8.184 5.254 11 9.093 8.514 5.189 20.29 10.107 29.323 14.667 11.596 5.16 19.68 4.532 31.415 9.203 12.646.706 25.294 1.385 37.944 2.029 23.902-16.885 48.477-32.754 73.004-48.709 13.95 1.379 27.904 2.72 41.85 4.127 3.52-20.468 7.136-40.919 10.695-61.38 5.56-1.532 11.111-3.1 16.683-4.592 4.78-21.344 12.5-34.893 17.23-56.249-58.298-.685-119.597-9.127-177.887-9.782zm.232 14.88c52.06.573 104.122 1.164 156.183 1.744l-8.312 37.49c-5.715 1.572-11.42 3.183-17.147 4.709-3.33 19.007-6.666 38.014-9.998 57.02-11.081-1.114-22.172-2.144-33.248-3.312-24.617 16.156-49.487 31.926-73.526 48.94-10.496-.769-21.184-.768-31.563-2.009l-53.998-25.019c-4.427-5.82-8.849-11.644-13.31-17.437-3.665 3.01-7.049 9.975-12.155 5.563-9.12-1.735-10.467-11.273-14.177-18.43-12.735-27.608-25.558-55.182-37.606-83.098l148.857-6.161z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path d="M170.823 42.813l-159.67 6.568c0 3.758 49.755 110.845 49.755 110.845l17.903 8.312c3.585-2.206 6.277-4.882 6.277-4.882l9.242 12.09 57.719 26.795 34.759 1.86 27.26-18.774 46.035-30.051 37.55 3.72 10.346-59.171 16.914-4.709L341.006 46.5z" style="marker:none" overflow="visible" fill="#502d16"/><path d="M164.313 43.104l-24.413.988c8.686 18.567 17.581 39.35 18.891 49.174 2.224 16.68-4.548 86.019-6.917 109.217l.175.058 19.24 1.046c4.918-42.477 11.878-106.86 10.114-117.006-2.049-11.775-5.803-21.66-17.09-43.478zm-24.413.988l-12.148.465-.058.058 12.206-.523z" style="marker:none" overflow="visible" opacity=".274"/><path d="M67.244 47.056l-56.091 2.325c0 3.758 49.755 110.845 49.755 110.845l17.903 8.312c3.585-2.206 6.277-4.882 6.277-4.882l1.047 1.395c-2.109-27.705-7.052-70.465-18.891-117.995z" style="marker:none" overflow="visible" opacity=".292" fill="#c87137"/><path d="M139.9 44.092l-32.608 1.337c6.317 57.359 3.963 106.174.93 136.769l43.652 20.285c2.369-23.198 9.141-92.537 6.917-109.217-1.31-9.824-10.205-30.607-18.89-49.174z" style="marker:none" overflow="visible" opacity=".221" fill="#c87137"/><path d="M201.048 43.162c8.38 50.488-1.96 120.598-8.719 157.403l21.74-14.938 2.906-1.86 21.564-138.338-3.08-1.86z" style="marker:none" overflow="visible" opacity=".319"/><path d="M248.42 43.685c3.496 35.209 7.696 82.681 10.288 112.821l1.395-.93 37.55 3.72 10.346-59.171 1.57-.465 9.939-55.161z" style="marker:none" overflow="visible" opacity=".301"/><path d="M147.864 1.08c-12.12.096-12.743 23.579-23.483 9.067-7.508-6.18-21.746-14.614-29.64-7.33 1.74 8.984 21.416 16.284 16.964 21.95-10.81 1.552-21.618 5.62-31.132-1.747-3.98-3.22-15.258-6.657-18.896-4.116-3.11 2.173.748 9.7 4.18 14.576-16.298 10.457-27.023 6.479-47.454 11.59C14.32 46.23-1.65 50.71.14 51.234c13.232 3.87 23.583 6.839 29.855 8.66 38.12 4.969 73.216 7.492 111.336 12.462 18.778.14 18.486-3.828 34.009-6.058 16.19 4.205 32 10.97 48.923 11.148 38.666-8.154 75.268-18.157 109.287-25.457 6.908-2.26 17.55-6.78 15.324-7.511-2.753-.903-15.877-5.307-21.864-6.698-21.497-3.624-33.75-7.43-58.183-11.477-7.338-3.965-24.059-9.245-32.546-7.247-21.235 1.353-38.814 8.133-64.024 3.9l-18.638-1.999c.596-6.438 5.168-15.332-2.558-19.236l-1.553-.517-1.643-.125zm97.65 32.317c18.038 3.836 36.417 7.923 52.288 11.358-26.679 4.683-58.817 10.613-89.14 15.844-11.37-2.314-22.588-5.758-34.06-7.324-10.733.953-21.441 3.465-32.189 3.393l-82.493-7.81c11.294-.02 21.335-7.379 30.98-5.639 14.35-2.527 29.625-4.868 43.444-7.216 7.646-1.616 11.707-.988 19.26-.097 10.848 1.212 21.698 2.891 32.607 1.354l59.303-3.864z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M148.27 8.52s-8.365 2.344-11.74 19.994c-.36.043-.79.07-1.163.116a24.46 24.46 0 0 0-1.628-1.802c-5.167-5.167-23.482-17.38-23.482-17.38s6.58 3.793 16.914 19.763l.697.465c-10.445 1.506-23.973 3.728-38.246 6.22-8.972-6.48-19.298-8.138-19.298-8.138l8.022 10.114C42.559 44.256 16.19 51.123 16.19 51.123l129.29 13.312 30.05-3.778 32.9 7.498L338.98 45.66l-93-19.762-72.309 4.708-26.33-2.848c-.523-.095-1.395-.037-2.5 0z" overflow="visible" fill="#aad400"/><path d="M245.98 25.899l-49.524 3.196c-15.5 4.6-32.019 8.41-42.954 9.707-39.193 4.65 59.769 10.62 73.72 10.62 3.382 0-75.798 9.55-74.534 14.084l22.843-2.848 32.9 7.498L338.98 45.66z" style="marker:none" overflow="visible" opacity=".075"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon water" viewBox="0 0 180 265" xmlns="http://www.w3.org/2000/svg"><g color="#000"><path d="M64.207 14.367c10.298 80.222-49.852 99.726-62.995 158.29-13.143 58.566 83.524 126.128 150.005 71.21 80.37-66.391-29.65-179.028-57.118-215.438C66.629-7.98 60.647-.424 61.888 3.245c1.24 3.67 2.319 11.122 2.319 11.122z" style="marker:none" overflow="visible"/><path d="M71.91 14.91c5.624 37.788-9.552 75.41-33.544 103.799-17.09 23.04-38.575 51.832-27.565 81.899 18.826 50.723 90.72 74.287 133.826 39.263 24.62-17.849 34.655-51.932 24.08-80.338-15.988-55.263-58.47-97.107-92.83-141.739-.78-.439-5.035-6.373-3.966-2.885z" style="marker:none" overflow="visible" fill="#6ddaff"/><path d="M62.236 97.344a160.468 160.468 0 0 1-15.232 21.359c-17.09 23.04-38.577 51.838-27.567 81.905 4.827 13.005 13.148 24.226 23.573 33.13.02.017.047-.022.058-.005 4.773 1.035 9.69 1.428 14.72 1.019 32.321-2.63 47.353-35.783 44.24-74.05-2.596-31.893-14.364-57.31-39.792-63.358z" style="marker:none" overflow="visible" opacity=".482" fill="#fff"/><path d="M86.04 190.026a16.91 20.433-4.652 0 1-14.845 21.704 16.91 20.433-4.652 0 1-18.78-18.114 16.91 20.433-4.652 0 1 14.064-22.459 16.91 20.433-4.652 0 1 19.365 17.178" style="marker:none" overflow="visible" opacity=".482" fill="#fff"/><path d="M71.826 13.867c-.116.09-.116.388.085 1.042.3 2.02.543 4.048.727 6.065 44.671 50.543 76.099 110.675 60.502 168.746-7.726 28.764-23.086 55.254-58.273 64.342 24.033 5.61 49.943 1.91 69.76-14.191 24.62-17.849 34.655-51.932 24.08-80.338-15.988-55.263-58.47-97.107-92.83-141.739-.633-.356-3.548-4.317-4.051-3.927z" style="marker:none" overflow="visible" opacity=".327"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon fire" viewBox="0 0 257 310" xmlns="http://www.w3.org/2000/svg" ><g color="#000"><path style="marker:none" d="M26.604 238.398c-15.72-13.475-16.584-33.341-14.857-45.261 1.458-10.057 14.904-21.512 17.722-32.209 1.079-4.093 3.95-12.469-3.343-24.181-6.33-10.164-9.245-14.986-9.245-14.986s12.71 7.074 18.584 11.565c5.873 4.492 19.997 18.616 21.38 21.725 1.381 3.11 8.155-14.832 3.091-24.977-3.81-7.635-8.11-16.403-8.11-16.403s22.665 16.813 26.314 26.321c4.39 11.438.635 26.541.635 26.541l9.412 5.713s12.337-11.342 14.756-22.744c1.649-7.772 1.995-10.64-8.163-16.29-3.096-1.721-8.513-3.615-12.032-6.585-11.056-9.328-15.202-15.547-14.165-23.148 1.036-7.602 10.192-24.704 10.192-24.704s2.246 17.275 8.465 22.112c6.219 4.837 31.268 3.11 38.87 12.093 7.6 8.983 9.673 23.84 8.982 29.368-.69 5.528 2.073.345 3.8-8.983 1.728-9.329 2.42-20.385 2.42-20.385s4.145 1.036 6.564-5.528c2.418-6.565 2.418-15.893 1.727-17.275-.69-1.382-8.637 2.764-13.474-1.037-4.837-3.8-11.056-16.584-12.093-24.876-1.036-8.292 6.565-25.222 6.565-30.75 0-5.528 4.837-.346 6.91 7.947 2.073 8.292 0 21.766 4.837 29.022 4.837 7.255 19.694 18.312 22.112 21.076 2.419 2.764-.345 14.165-2.418 25.221-2.073 11.057 3.11 19.003 5.182 25.913 2.073 6.91 2.073 22.804-2.073 30.75-4.146 7.947-12.438 22.458-12.438 22.458s6.872-8.687 13.782-11.796c6.91-3.11 12.361-.816 14.78-8.763 2.418-7.947 9.262-16.647 10.299-17.684 1.036-1.036-3.965-11.855-5.002-22.22-1.036-10.365 1.53-21.498 6.02-29.445 4.492-7.946 17.967-17.275 22.458-21.076 4.492-3.8 4.69-10.288 4.69-10.288s-3.454 12.093-5.527 18.312c-2.073 6.219-6.496 21.65-6.91 32.823-.193 5.196 2.073 15.46 2.073 15.46s12.665-1.804 17.62-5.44c8.01-5.88 15.203-15.203 16.93-24.532 1.728-9.328 1.728-16.93 1.728-16.93s3.455 6.91 7.6 16.24c4.147 9.328 3.888 21.248 1.815 27.122-2.073 5.873-9.07 16.584-13.561 19.693-3.383 2.342-9.166 6.518-13.268 7.798-9.033-5.8-8.931-2.01-4.18 4.468 0 0 23.148 38.696 23.148 49.407 0 10.71-3.627 16.93-7.428 23.84-3.8 6.91-19.348 22.112-27.295 25.221-2.5.979-1.927-5.25-4.364-4.336-5.307 1.99-13 10.882-13.948 11.592-1.382 1.037-8.925 10.974-14.51 15.202-10.393 7.868-21.622 16.659-34.551 18.312-13.855 1.772-28.25-3.482-40.77-9.674-2.934-1.452-7.6-6.22-7.6-6.22s-53.208-.69-63.92-22.803c-10.71-22.112-6.564-24.53-6.564-25.912 0-1.382.346-5.874.346-5.874zM0 54.59c2.419 7.946-1.382 30.75 1.037 38.35 2.418 7.602 12.438 20.731 13.474 25.568 1.037 4.837 5.874-4.837 6.565-14.857.69-10.02 3.11-15.547-3.8-27.295C10.365 64.61 0 54.59 0 54.59z" overflow="visible"/><path style="marker:none" d="M120.581 11.056c-5.874 14.511-27.295 33.514-35.241 44.57-7.947 11.056-5.528 20.73-5.528 20.73s14.165-4.146 24.185-10.71c10.02-6.565 17.275-19.003 20.04-26.604 2.763-7.601 4.145-17.966 3.109-24.876C126.109 7.256 123 0 123 0zm104.688 32.132c-8.292 12.438-10.04 17.84-10.02 27.64.014 6.012 6.22 16.93 6.22 16.93 4.49-4.146 7.534-6.651 9.673-11.056 2.457-5.06 3.957-11.024 3.11-16.584-.963-6.316-8.983-16.93-8.983-16.93z" overflow="visible"/><path d="M84.032 71.167c3.664-11.971 7.96-16.51 19.932-26.77 11.97-10.261 14.17-15.88 16.124-18.812 1.954-2.932 1.466 2.443-.244 7.818s-10.893 22.373-16.756 27.014c-5.864 4.642-19.056 10.75-19.056 10.75zm-78.036-.874c-1.71 12.216-3.543 15.758-.61 23.088 2.93 7.329 7.328 12.948 8.794 16.368 1.466 3.42 2.932-2.198 3.91-9.528.976-7.329.121-9.161-2.566-15.269-2.687-6.108-9.528-14.659-9.528-14.659zm125.33-27.851c-2.443 16.613-4.03 21.133-1.588 28.95 2.443 7.819 9.284 11.972 14.414 13.926 5.13 1.955 3.176-.977.978-3.42-2.2-2.443-9.773-13.193-10.506-21.988-.733-8.795-.366-9.405-1.343-15.025-.978-5.619-1.955-2.443-1.955-2.443zm93.326 7.452c-6.108 14.658-3.054 23.82-3.054 27.484 0 3.665 4.153.49 5.864-4.397 1.71-4.886 3.786-13.07 1.832-17.712-1.955-4.642-4.642-5.375-4.642-5.375zM76.823 89.856c-4.398 15.88-4.591 22.438 1.028 27.813s25.523 10.905 30.05 17.353c8.062 11.483-8.629 28.36-15.66 41.296-.571 1.051-1.32 2.008-2.056 2.963-2.249-.083-5.391-.51-7.98-2.237-4.398-2.932-7.796-5.35-8.284-8.525-.489-3.176 3.144-14.69 3.144-21.042 0-6.352-10.963-19.746-15.116-22.19-4.153-2.443 2.167 4.634 3.144 6.833.977 2.199 1.73 11.223-1.935 19.53-3.664 8.306-5.865 8.767-5.865 8.767s-18.82-20.47-23.218-23.158c-4.397-2.687-3.666-2.955-5.865-3.688-2.198-.733.726 2.66.726 2.66 6.352 7.818 5.147 16.14 4.414 22.493-.733 6.352-16.87 28.331-16.87 36.882 0 8.551 1.015 15.666 8.344 27.148 7.33 11.483 8.037 18.538 8.526 20.981.488 2.443 3.453 8.348 8.827 13.967 5.375 5.62 9.04 8.743 11.972 11.186 2.932 2.443-1.52 4.397-6.65 0-5.131-4.398-13.65-15.832-15.117-16.81-1.465-.976-1.233 6.07 1.21 9.736 2.443 3.664 9.801 10.249 15.176 13.18 5.375 2.932 16.122 1.993 18.32 2.238 2.2.244.454 3.182 9.493 5.38 9.04 2.2 14.693 2.661 14.693 2.661s-18.014-22.9-20.212-45.131c-2.2-22.232.52-31.001 2.997-36.304 2.016-4.317 2.934-5.54 5.545-9.562-5.611 17.334-5.968 37.098-1.028 54.598 4.382 15.522 16.101 32.509 26.362 40.571 10.261 8.062 22.479 11.234 35.916 12.456 13.436 1.221 39.808-20.74 43.473-26.604 3.664-5.864 22.498-22.264 27.873-26.906 5.375-4.642 11.004-12.963 11.004-16.628 0-3.664-.483-10.702-.483-10.702s4.892 7.57 5.381 12.456c.489 4.886-9.29 14.119-11.488 17.05-2.199 2.932 4.866.98 8.042-.242 3.176-1.221 13.947-19.787 15.901-24.185 1.955-4.397-7.35-41.03-22.008-55.445-14.659-14.414-5.595-22.466-2.419-19.046 3.176 3.42 8.508 7.795 10.219 8.284 1.71.489 19.805-10.258 22.492-18.32 2.687-8.063 3.095-13.49 2.418-20.256-.359-3.59-3.385-10.278-3.385-10.278s-.8 4.012-2.721 9.19c-3.221 8.68-9.682 20.713-21.465 22.855-18.812 3.42-16.366 2.93-18.32.242-1.955-2.687-3.693-13.44-3.205-23.702.105-2.207.634-4.55 1.39-6.892 2.763-8.547 8.647-17.129 8.647-19.046 0-2.443-5.644 1.709-9.553 6.106-1.727 1.944-5.385 5.71-8.283 11.247-3.661 6.992-6.056 16.856-1.693 29.808 7.817 23.21-6.153 33.225-7.619 36.157-1.466 2.932-.44 9.022-10.702 19.771-10.26 10.75-13.687 10.505-23.46 18.079-9.772 7.574-12.987 12.22-14.208 17.595-.889 3.909-.874 18.123-.424 26.543-.51-2.955-1.073-6.222-1.753-9.916-1.71-9.284-3.645-11.465-1.935-19.771 1.71-8.307 31.38-25.76 36.021-32.845 4.642-7.085.824-5.875-4.062-3.92-4.886 1.954-12.942 9.65-16.118 12.338-3.176 2.687-.256-3.937 1.21-9.312s7.654-13.813 10.278-21.222c1.903-5.371 4-10.932 3.87-16.628-.183-8.034-5.308-15.275-6.53-23.218-1.226-7.971-3.657-16.367-.725-24.185a132.378 132.378 0 0 0 1.995-5.744c1.266-3.886 1.598-5.848.907-5.502-.377.188-1.797 2.335-3.447 5.018-2.623 4.268-6.414 9.474-8.283 14.814-2.289 6.536-1.027 13.986-3.386 20.497-3.346 9.232-11.026 18.31-14.934 25.394-3.91 7.085-4.414 5.382-4.414 5.382s4.141-18.317 4.172-27.632c.02-6.322.775-13.476-2.721-18.744-3.937-5.932-5.8-9.599-18.26-11.064-12.46-1.466-16.861-3.881-23.702-8.768-6.84-4.886-7.618-14.148-7.618-14.148z" style="marker:none" overflow="visible" fill="#fc0"/><path d="M73.18 164.108c.978-3.665 0 0 0 0z" style="marker:none" overflow="visible"/><path d="M113.464 124.078c-1.711.5 2.6 8.223 2.6 8.223 4.146 21.421-12.74 45.261-17.232 58.045-4.492 12.784-8.284 29.411-1.028 48.068 2.626 6.754 5.344 11.571 8.283 15.358 11.783 6.887 20.199 11.342 26.483 14.27-3.549-10.241-7.756-31.677-6.107-38.274 2.073-8.292 22.432-18.32 27.27-23.157 4.836-4.838-6.211 3.463-10.703 3.809-4.491.345 4.518-19.383 9.01-29.748 4.49-10.365 7.22-24.505 6.53-27.27-.692-2.763-24.143 22.804-31.744 24.186-7.601 1.382-2.444-19.374-4.172-30.776-1.727-11.401-.674-17.275-6.893-21.766-1.166-.843-1.903-1.083-2.297-.968zm92.81 42.627c-1.111-.248.057 2.768 1.029 5.683 1.727 5.183-.354 25.594-6.228 35.613-5.874 10.02-4.466-23.131-5.502-28.66-1.037-5.527-7.645 9.286-11.79 17.233-4.147 7.946-15.531 18.691-26.242 27.329-10.71 8.638-13.103 15.54-10.339 22.795 2.233 5.86 1.556 10.812 2.298 15.962 1.632 1.192 3.581 2.27 5.925 3.144 17.087-5.266 35.882-14.455 43.594-22.553 13.82-14.51 21.741-22.846 22.432-26.301.691-3.455 8.284 8.983 8.284 14.51 0 5.529 4.543-3.437 3.506-14.147-1.036-10.711-7.99-29.377-19.046-42.506-4.837-5.744-7.055-7.91-7.92-8.102zm-159.259-6.047c-1.728 19.349-10.411 27.472-8.647 41.478 1.7 13.491 5.865 27.252 17.958 36.58 5.87 4.53 9.835 4.827 12.395 3.93a43.857 43.857 0 0 1-.423-3.023c-2.2-22.232-.465-33.505 3.688-38.636 1.452-1.793 4.402-4.244 7.618-6.711-.24.743-.444 1.486-.665 2.237 4.828-5.073 10.444-9.88 6.41-13.423-3.342-2.933-6.304 7.335-10.703 7.981-4.361.641-9.479-1.222-12.455-4.474-4.263-4.657-1.282-13.103-4.837-18.32-2.413-3.54-10.34-7.619-10.34-7.619z" style="marker:none" overflow="visible" fill="#f60"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon ice" viewBox="0 0 265 313" xmlns="http://www.w3.org/2000/svg"><g color="#000"><path style="marker:none" d="M49.139 161.531l39.219-30.684 30.911 134.47-19.65 28.464-25.764-63.853-5.857-11.206-16.28-55.43z" overflow="visible" fill="#0082a3"/><path style="marker:none" d="M88.359 130.843l-32.874 25.708c.486 2.422.87 4.029.87 4.029.778-.433 27.134-16.743 27.134-16.743l33.264 123.946s.776-5.757 1.139-8.418z" overflow="visible" fill="#5cddff"/><path style="marker:none" d="M51.069 109.125L2.255 156.887l44.791 4.287z" overflow="visible" fill="#95eaff"/><path style="marker:none" d="M51.77 105.417l35.624 25.015-38.315 31.4 1.484-54.22z" overflow="visible" fill="#007795"/><path style="marker:none" d="M51.018 107.082l19.635 27.864-23.31 25.749 40.839-28.952-.242-1.798z" overflow="visible" fill="#5cddff"/><path style="marker:none" d="M2.919 158.802c9.364 5.499 66.958 127.187 59.335 128.458l36.48 3.968s-20.002-50.082-20.356-51.103c-.355-1.02-10.734-22.424-10.734-22.424l-17.823-56.093z" overflow="visible" fill="#6ae0ff"/><path style="marker:none" d="M48.683 106.915L2.257 156.882l44.788 4.3zM2.926 158.809c.26.872 1.497 3.74 3.373 7.967l9.806 6.382s25.345 51.294 25.111 49.673c-.234-1.621-10.98-50.54-10.98-50.54l15.287 12.878 1.772-21.393.46-2.301z" overflow="visible" opacity=".876" fill="#fff"/><path style="marker:none" d="M17.957 183.449c4.031 8.83 7.09 14.968 12.412 26.421l39.974 13.426c-1.032-2.133-2.692-5.591-2.692-5.591l-5.736-18.054c-15.697-6.24-28.507-9.72-43.958-16.202zm23.356 49.645c1.69 3.62 3.379 7.206 5.007 10.686l37.039 8.897c-1.907-4.788-3.007-7.532-3.79-9.517zm12.759 30.089c6.268 13.361 10.723 22.832 10.723 22.832l33.928 5.209s-3.983-9.991-7.497-18.797z" overflow="visible" opacity=".726" fill="#fff"/><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M49.373 103.527c-.086.026-.17.058-.252.093-.592.236-1.08.678-1.329 1.202L.196 156.909a1.912 1.912 0 0 0-.012 1.66c.027.176.08.349.157.511 26.042 42.34 47.956 85.156 59.672 129.154.285.626.942 1.1 1.705 1.231l35.15 5.479.023.01c.626.41 1.504.517 2.268.277l.018-.005c1.099-.12 2.078-.956 2.24-1.912l19.12-26.792c.463-.51.656-1.193.51-1.81L90.44 130.408a1.8 1.8 0 0 0-.014-.1 1.882 1.882 0 0 0-.02-.116l-.033-.095-.057-.105-.033-.094-.056-.106-.046-.073a2.03 2.03 0 0 0-.214-.267 2.092 2.092 0 0 0-.07-.084 2.425 2.425 0 0 0-.088-.078l-.064-.068a2.415 2.415 0 0 0-.106-.073 1.793 1.793 0 0 0-.19-.134 2.278 2.278 0 0 0-.095-.042 2.197 2.197 0 0 0-.1-.056l-.024-.01-37.965-25.252a2.782 2.782 0 0 0-1.892-.128zm4.515 6.229l29.877 21.597-33.972 26.928zm-4.381 2.347l-4.335 47.777-31.536-2.846-7.764-1.083zm36.931 22.858l29.572 129.802-16.099 23.51-29.615-71.137-16.126-53.604zM6.491 160.72l6.39.572 33.283 3.601c2.739.745 3.67 6.923 3.842 6.914l15.459 46.382 29.328 72.008-30.686-4.728c-11.642-42.148-30.048-83.79-57.616-124.75z" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M85.68 152.02l-27.87 32 4.643 15.836 28.11-29.665zm14.549 30.525l1.627 7.028-1.609-7.033c-.004.006-.016-.001-.018.005zm-4.634 6.417c-11.542 15.913-19.769 26.746-25.413 33.93l2.18 4.175 24.962-31.718zm11.18 41.637L84.86 257.18l14.75 36.603 19.657-28.464-1.375-5.953c-.363 2.661-1.139 8.418-1.139 8.418z" overflow="visible" opacity=".088"/><path style="marker:none" d="M139.197 90.094l58.306-25.7-18.412 195.63-34.523 30.687-4.22-97.432-2.301-17.645 3.452-82.088z" overflow="visible" fill="#006a85"/><path style="marker:none" d="M197.506 64.389l-48.867 21.526c-.415 3.495-.617 5.838-.617 5.838 1.084-.271 38.519-11.677 38.519-11.677l-11.392 182.272s3.242-7.516 4.746-10.988z" overflow="visible" fill="#9debff"/><path style="marker:none" d="M136.129 6.472L86.262 64.585l50.634 24.166z" overflow="visible" fill="#95eaff"/><path style="marker:none" d="M140.348 5.704l56.196 57.73-57.538 27.043-.96-82.28z" overflow="visible" fill="#007e9d"/><path style="marker:none" d="M138.793 7.663l36.346 55.061-37.703 25.497 59.497-22.68.447-2.545z" overflow="visible" fill="#9debff"/><path style="marker:none" d="M86.262 67.462c-.383 9.973 17.262 199.083 17.262 199.083l41.044 20.33s-3.07-76.334-3.07-77.869c0-1.534-3.451-34.906-3.451-34.906l1.918-83.623z" overflow="visible" fill="#6ae0ff"/><path style="marker:none" d="M136.131 6.48L86.267 64.578l50.624 24.184zM86.267 67.473c-.049 1.294.233 5.703.712 12.223l8.877 12.697s8.825 80.17 9.208 77.869c.384-2.302 7.666-73.265 7.666-73.265l12.65 23.781 10.751-28.385 1.472-2.943z" overflow="visible" opacity=".841" fill="#fff"/><path style="marker:none" d="M88.882 106.422c1.131 13.667 2.219 23.27 3.793 41.033l46.257 35.363c-.342-3.325-.878-8.71-.878-8.71l.617-26.914c-15.823-14.916-34.352-25.626-49.789-40.772zm6.95 76.301c.508 5.617 1.027 11.188 1.519 16.59l44.88 28.812c-.287-7.296-.46-11.48-.57-14.501zm4.414 48.368c1.91 20.747 3.276 35.458 3.276 35.458l41.034 20.316s-.602-15.226-1.139-28.646z" overflow="visible" opacity=".504" fill="#fff"/><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M138.29 0c-.11 0-.221.01-.331.024-.788.08-1.538.48-2.041 1.092L83.847 63.77a3.076 3.076 0 0 0-.689 2.255c-.04.25-.048.507-.023.76l17.373 200.166c.08.969.656 1.883 1.495 2.374l38.875 21.841.023.024a3.093 3.093 0 0 0 2.54 1.305h.023c1.334.288 2.818-.45 3.394-1.685l33.227-28.63a3.084 3.084 0 0 0 1.329-2.254L200.116 64.65a2.21 2.21 0 0 0 .023-.142c.01-.056.018-.11.024-.166v-.143l-.024-.166v-.142a4.42 4.42 0 0 0-.023-.166c-.008-.04-.015-.08-.024-.119a3.044 3.044 0 0 0-.142-.45 3.123 3.123 0 0 0-.047-.143 3.412 3.412 0 0 0-.072-.143 4.945 4.945 0 0 0-.047-.118 3.222 3.222 0 0 0-.095-.143 3.22 3.22 0 0 0-.166-.261 2.797 2.797 0 0 0-.095-.095 2.13 2.13 0 0 0-.095-.118l-.023-.024L140.45.95a3.076 3.076 0 0 0-2.16-.95zm2.754 10.324l50.884 52.878-50.647 22.737zm-6.076 1.4l.261 74.5-35.718-16.78-8.64-4.652zm58.621 57.483l-18.084 188.727-28.362 25.401-5.767-108.919 2.892-79.54zM89.661 71.532l7.239 3.394 37.455 18.524c2.901 2.134 1.483 10.922 1.688 10.98l-.743 69.44 5.08 109.987-33.963-18.993z" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M185.781 92.11l-45.568 32.134-.997 23.449 44.904-28.86zm4.628 47.49l-.95 10.229.974-10.23c-.008.008-.02-.007-.024 0zm-8.022 6.835c-19.95 16.929-33.965 28.302-43.48 35.766l.855 6.574 42.056-32.942zm-3.82 61.232l-36.408 27.198 2.397 55.845 34.532-30.688.807-8.662c-1.504 3.472-4.746 10.988-4.746 10.988z" overflow="visible" opacity=".027"/><path d="M211.032 149.46l51.266-10.289-69.63 148.362-35.116 10.148 24.745-72.556 3.31-13.685 26.188-58.646z" style="marker:none" overflow="visible" fill="#007998"/><path d="M262.302 139.169l-42.876 10.589c-1.319 2.402-2.145 4.04-2.145 4.04.904.186 32.163-7.073 32.163-7.073l-60.448 141.107s4.628-4.333 6.77-6.333z" style="marker:none" overflow="visible" opacity=".814" fill="#fff"/><path d="M235.185 96.974l-57.173 15.124 31.651 35.567z" style="marker:none" overflow="visible" fill="#95eaff"/><path d="M235.744 99.444l27.184 38.417-52.152 11.811 22.498-49.226z" style="marker:none" overflow="visible" fill="#006077"/><path d="M232.845 99.745l13.431 42.49-34.42 8.761 49.137-11.732 1.07-1.698z" style="marker:none" overflow="visible" opacity=".509" fill="#fff"/><path d="M177.186 114.196c-3.154 7.138-43.978 151.315-43.978 151.315l25.444 29.372s19.568-56.76 20.009-57.88c.44-1.119 7.386-26.682 7.386-26.682l25.46-60.31z" style="marker:none" overflow="visible" fill="#6ae0ff"/><path d="M232.308 98.514l-54.29 13.58 31.638 35.578zm-55.121 15.692c-.409.927-1.459 4.242-2.965 9.167l3.12 12.406s-28.964 101.995-28.011 100.452c.952-1.542 39.55-91.114 39.55-91.114l-14.095 62.693 33.25-57.759 1.965-1.625z" style="marker:none" overflow="visible" opacity=".867" fill="#fff"/><path d="M168.002 143.54c-3.06 10.368-4.987 17.757-8.885 31.27l25.103 42.183c.694-2.545 1.83-6.664 1.83-6.664l8.194-19.41c-7.777-16.486-18.824-30.863-26.242-47.38zm-16.6 58.111c-1.225 4.277-2.428 8.524-3.604 12.638l25.933 36.917c1.875-5.422 2.945-8.535 3.728-10.778zm-10.517 36.842c-4.5 15.808-7.68 27.02-7.68 27.02l25.442 29.359s3.91-11.318 7.352-21.297z" style="marker:none" overflow="visible" opacity=".504" fill="#fff"/><path d="M235.813 94.554a2.408 2.408 0 0 0-.26-.1c-.623-.222-1.31-.195-1.869.073l-57.28 16.121a2.19 2.19 0 0 0-1.17 1.4 2.205 2.205 0 0 0-.237.546L130.793 264.74c-.217.735-.04 1.606.458 2.26l23.358 29.706.01.026c.198.793.802 1.51 1.562 1.852l.017.008c.934.682 2.276.67 3.07-.026l33.538-9.107a2.217 2.217 0 0 0 1.66-1.173l69.75-148.273.059-.096c.023-.037.045-.074.066-.113l.04-.104c.01-.043.021-.086.03-.13l.041-.103.03-.13.016-.094c.017-.125.024-.252.02-.38l.006-.12a2.812 2.812 0 0 0-.014-.13c0-.034 0-.068-.002-.103a2.743 2.743 0 0 0-.031-.137 2.054 2.054 0 0 0-.052-.25 2.492 2.492 0 0 0-.045-.102 2.456 2.456 0 0 0-.038-.12l-.012-.026-27.143-41.863a2.844 2.844 0 0 0-1.374-1.458zm-.865 8.505l23.444 32.997-44.58 11.112zm-5.032-1.131L209.12 145.23l-22.405-24.895-5.249-6.454zm28.019 39.096l-67.4 143.714-28.904 8.476 26.862-81.482 25.031-56.987zm-79.326-22.655l4.542 5.04 23.228 26.783c1.598 2.584-2.005 8.491-1.865 8.606l-20.494 50.383-27.693 82.017-20.432-25.887z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path d="M245.954 167.437l-43.948 7.29-7.489 16.749 42.502-5.137zm-10.102 36.277l-3.659 7.124 3.677-7.116c-.008.003-.012-.012-.018-.008zm-8.075 2.142c-20.062 5.278-34.006 8.606-43.398 10.679l-1.236 5.097 41.503-9.123zm-20.484 43.305l-35.55 6.936-14.2 41.579 35.123-10.145 3.1-6.032c-2.142 2-6.77 6.333-6.77 6.333z" style="marker:none" overflow="visible" opacity=".142"/><path d="M111.669 191.291L76.95 210.55l28.752 21.97 31.734-27.937z" style="marker:none" overflow="visible" fill="#a0ffff"/><path d="M73.153 212.99c0 1.628 17.902 79.202 17.902 79.202l33.09 17.901-19.528-79.744z" style="marker:none" overflow="visible" fill="#98eaff"/><path d="M77.96 234.96c4.379 19.372 8.979 36.592 11.013 45.419l28.361 12.443-2.682-15.545-29.358-14.383-4.2-16.874 30.497 14.002-2.706-8.638-28.195-16.305s-1.173-.063-2.73-.119z" style="marker:none" overflow="visible" opacity=".354" fill="#fff"/><path d="M105.16 231.434s33.361-27.937 33.361-26.852c0 1.085 20.886 91.95 20.886 91.95l-34.448 13.561z" style="marker:none" overflow="visible" fill="#009ec6"/><path d="M148.188 247.515l-.997.475-34.271 14.24 2.089 8.33 32.728-13.077 4.082 14.359-33.345 12.53 3.488 13.861c.964-.331 19.566-6.709 35.007-12.365-1.77-7.706-4.51-19.642-8.781-38.353z" style="marker:none" overflow="visible" opacity=".522" fill="#007998"/><path d="M105.702 230.892l30.378-21.97 21.7 87.88-25.226-70.792-25.496 5.424z" style="marker:none" overflow="visible" fill="#8affff"/><path d="M111.126 192.105c1.085 0 27.395 14.375 25.497 14.375-1.899 0-31.464 24.412-31.464 24.412l16.546-26.581-14.105-12.206z" style="marker:none" overflow="visible" fill="#cbffff"/><path d="M109.81 186.781l-1.4.831-36.05 21.075-.926.665c-1.379.242-2.265 1.965-1.661 3.228.034.109.1.27.166.498.132.456.317 1.135.546 1.97a701.35 701.35 0 0 1 1.85 6.906 2072.203 2072.203 0 0 1 5.65 22.072c4.266 17.022 7.503 36.488 9.651 47.945.116.634 2.042 1.563 2.595 1.895l31.47 18.465c.597.346 1.354.4 1.994.142l35.79-14.098c1.02-.39 1.655-1.594 1.4-2.658l-21.123-88.905.546-.474-.702-2.408.061-2.624-28.385-13.813zm.286 6.883l22.736 11.06-28.788 24.587-24.612-17.728zm25.774 16.47l20.126 84.705-30.046 11.82-17.706-72.933zm-60.116 6.979l25.442 17.657 1.21.878.047.047 17.017 70.037-26.06-15.284c-2.26-11.803-6.836-30.855-11.012-47.514a2061.692 2061.692 0 0 0-5.672-22.143c-.402-1.528-.648-2.464-.973-3.679z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon earth" viewBox="0 0 350 212" xmlns="http://www.w4.org/2000/svg"><g color="#000"><path d="M170.533 35.373C114.926 37.658 55.72 49.086.113 51.366 8.056 67.5 16.067 85.76 20.246 97.342c13.245 29.509 21.434 39.14 35.083 68.464 7.96 3.767 15.977 7.416 23.948 11.16 4.41-5.015 8.184 5.254 11 9.093 8.514 5.189 20.29 10.107 29.323 14.667 11.596 5.16 19.68 4.532 31.415 9.203 12.646.706 25.294 1.385 37.944 2.029 23.902-16.885 48.477-32.754 73.004-48.709 13.95 1.379 27.904 2.72 41.85 4.127 3.52-20.468 7.136-40.919 10.695-61.38 5.56-1.532 11.111-3.1 16.683-4.592 4.78-21.344 12.5-34.893 17.23-56.249-58.298-.685-119.597-9.127-177.887-9.782zm.232 14.88c52.06.573 104.122 1.164 156.183 1.744l-8.312 37.49c-5.715 1.572-11.42 3.183-17.147 4.709-3.33 19.007-6.666 38.014-9.998 57.02-11.081-1.114-22.172-2.144-33.248-3.312-24.617 16.156-49.487 31.926-73.526 48.94-10.496-.769-21.184-.768-31.563-2.009l-53.998-25.019c-4.427-5.82-8.849-11.644-13.31-17.437-3.665 3.01-7.049 9.975-12.155 5.563-9.12-1.735-10.467-11.273-14.177-18.43-12.735-27.608-25.558-55.182-37.606-83.098l148.857-6.161z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path d="M170.823 42.813l-159.67 6.568c0 3.758 49.755 110.845 49.755 110.845l17.903 8.312c3.585-2.206 6.277-4.882 6.277-4.882l9.242 12.09 57.719 26.795 34.759 1.86 27.26-18.774 46.035-30.051 37.55 3.72 10.346-59.171 16.914-4.709L341.006 46.5z" style="marker:none" overflow="visible" fill="#502d16"/><path d="M164.313 43.104l-24.413.988c8.686 18.567 17.581 39.35 18.891 49.174 2.224 16.68-4.548 86.019-6.917 109.217l.175.058 19.24 1.046c4.918-42.477 11.878-106.86 10.114-117.006-2.049-11.775-5.803-21.66-17.09-43.478zm-24.413.988l-12.148.465-.058.058 12.206-.523z" style="marker:none" overflow="visible" opacity=".274"/><path d="M67.244 47.056l-56.091 2.325c0 3.758 49.755 110.845 49.755 110.845l17.903 8.312c3.585-2.206 6.277-4.882 6.277-4.882l1.047 1.395c-2.109-27.705-7.052-70.465-18.891-117.995z" style="marker:none" overflow="visible" opacity=".292" fill="#c87137"/><path d="M139.9 44.092l-32.608 1.337c6.317 57.359 3.963 106.174.93 136.769l43.652 20.285c2.369-23.198 9.141-92.537 6.917-109.217-1.31-9.824-10.205-30.607-18.89-49.174z" style="marker:none" overflow="visible" opacity=".221" fill="#c87137"/><path d="M201.048 43.162c8.38 50.488-1.96 120.598-8.719 157.403l21.74-14.938 2.906-1.86 21.564-138.338-3.08-1.86z" style="marker:none" overflow="visible" opacity=".319"/><path d="M248.42 43.685c3.496 35.209 7.696 82.681 10.288 112.821l1.395-.93 37.55 3.72 10.346-59.171 1.57-.465 9.939-55.161z" style="marker:none" overflow="visible" opacity=".301"/><path d="M147.864 1.08c-12.12.096-12.743 23.579-23.483 9.067-7.508-6.18-21.746-14.614-29.64-7.33 1.74 8.984 21.416 16.284 16.964 21.95-10.81 1.552-21.618 5.62-31.132-1.747-3.98-3.22-15.258-6.657-18.896-4.116-3.11 2.173.748 9.7 4.18 14.576-16.298 10.457-27.023 6.479-47.454 11.59C14.32 46.23-1.65 50.71.14 51.234c13.232 3.87 23.583 6.839 29.855 8.66 38.12 4.969 73.216 7.492 111.336 12.462 18.778.14 18.486-3.828 34.009-6.058 16.19 4.205 32 10.97 48.923 11.148 38.666-8.154 75.268-18.157 109.287-25.457 6.908-2.26 17.55-6.78 15.324-7.511-2.753-.903-15.877-5.307-21.864-6.698-21.497-3.624-33.75-7.43-58.183-11.477-7.338-3.965-24.059-9.245-32.546-7.247-21.235 1.353-38.814 8.133-64.024 3.9l-18.638-1.999c.596-6.438 5.168-15.332-2.558-19.236l-1.553-.517-1.643-.125zm97.65 32.317c18.038 3.836 36.417 7.923 52.288 11.358-26.679 4.683-58.817 10.613-89.14 15.844-11.37-2.314-22.588-5.758-34.06-7.324-10.733.953-21.441 3.465-32.189 3.393l-82.493-7.81c11.294-.02 21.335-7.379 30.98-5.639 14.35-2.527 29.625-4.868 43.444-7.216 7.646-1.616 11.707-.988 19.26-.097 10.848 1.212 21.698 2.891 32.607 1.354l59.303-3.864z" style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" font-weight="400" font-family="Sans" overflow="visible"/><path style="marker:none" d="M148.27 8.52s-8.365 2.344-11.74 19.994c-.36.043-.79.07-1.163.116a24.46 24.46 0 0 0-1.628-1.802c-5.167-5.167-23.482-17.38-23.482-17.38s6.58 3.793 16.914 19.763l.697.465c-10.445 1.506-23.973 3.728-38.246 6.22-8.972-6.48-19.298-8.138-19.298-8.138l8.022 10.114C42.559 44.256 16.19 51.123 16.19 51.123l129.29 13.312 30.05-3.778 32.9 7.498L338.98 45.66l-93-19.762-72.309 4.708-26.33-2.848c-.523-.095-1.395-.037-2.5 0z" overflow="visible" fill="#aad400"/><path d="M245.98 25.899l-49.524 3.196c-15.5 4.6-32.019 8.41-42.954 9.707-39.193 4.65 59.769 10.62 73.72 10.62 3.382 0-75.798 9.55-74.534 14.084l22.843-2.848 32.9 7.498L338.98 45.66z" style="marker:none" overflow="visible" opacity=".075"/></g></svg>
  </div>

  <div class="card">
    <svg class="icon water" viewBox="0 0 180 265" xmlns="http://www.w3.org/2000/svg"><g color="#000"><path d="M64.207 14.367c10.298 80.222-49.852 99.726-62.995 158.29-13.143 58.566 83.524 126.128 150.005 71.21 80.37-66.391-29.65-179.028-57.118-215.438C66.629-7.98 60.647-.424 61.888 3.245c1.24 3.67 2.319 11.122 2.319 11.122z" style="marker:none" overflow="visible"/><path d="M71.91 14.91c5.624 37.788-9.552 75.41-33.544 103.799-17.09 23.04-38.575 51.832-27.565 81.899 18.826 50.723 90.72 74.287 133.826 39.263 24.62-17.849 34.655-51.932 24.08-80.338-15.988-55.263-58.47-97.107-92.83-141.739-.78-.439-5.035-6.373-3.966-2.885z" style="marker:none" overflow="visible" fill="#6ddaff"/><path d="M62.236 97.344a160.468 160.468 0 0 1-15.232 21.359c-17.09 23.04-38.577 51.838-27.567 81.905 4.827 13.005 13.148 24.226 23.573 33.13.02.017.047-.022.058-.005 4.773 1.035 9.69 1.428 14.72 1.019 32.321-2.63 47.353-35.783 44.24-74.05-2.596-31.893-14.364-57.31-39.792-63.358z" style="marker:none" overflow="visible" opacity=".482" fill="#fff"/><path d="M86.04 190.026a16.91 20.433-4.652 0 1-14.845 21.704 16.91 20.433-4.652 0 1-18.78-18.114 16.91 20.433-4.652 0 1 14.064-22.459 16.91 20.433-4.652 0 1 19.365 17.178" style="marker:none" overflow="visible" opacity=".482" fill="#fff"/><path d="M71.826 13.867c-.116.09-.116.388.085 1.042.3 2.02.543 4.048.727 6.065 44.671 50.543 76.099 110.675 60.502 168.746-7.726 28.764-23.086 55.254-58.273 64.342 24.033 5.61 49.943 1.91 69.76-14.191 24.62-17.849 34.655-51.932 24.08-80.338-15.988-55.263-58.47-97.107-92.83-141.739-.633-.356-3.548-4.317-4.051-3.927z" style="marker:none" overflow="visible" opacity=".327"/></g></svg>
  </div>
</div>

pick-a-card-css-3d-transforms.markdown

Pick a card (CSS 3D transforms)

Inspired by keyframers

[Icons] (https://opengameart.org/users/game-developer-studio)

A Pen by Stanislav on CodePen.

License.

script.js

console.clear();

const toggleVisibility = element => {
  element.style.visibility = getComputedStyle(element).visibility !== 'hidden'
    ? 'hidden'
  : 'visible';
};

const centerElement = (element, parent) => {
  const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = element;
  const elementCenter = [
    offsetLeft + offsetWidth / 2,
    offsetTop + offsetHeight / 2
  ];
  const parentCenter = [
    parent.offsetWidth / 2,
    parent.offsetHeight / 2
  ];
  const elementOffsetToCenter = parentCenter.map((val, i) => val - elementCenter[i]);

  element.style.transform = `translate(${elementOffsetToCenter[0]}px, ${elementOffsetToCenter[1]}px)`;
};

const getTransitionDuration = element => {
  const duration = getComputedStyle(element)['transitionDuration'];
  return duration.includes('ms') ? parseInt(duration) : parseInt(duration) * 1000;
};



const surface = document.getElementsByClassName('surface')[0];
const surfaceBlocker = surface.cloneNode();
surfaceBlocker.classList.add('blocker');

surface.addEventListener('click', e => {
  if (!e.target.classList.contains('card')) return;

  const surfaceClone = surface.cloneNode(true);
  const card = e.target;
  const cardIndex = [...surface.children].indexOf(card);
  let cardClone;
  let isTransitionLocked = false;

  [...surfaceClone.children].forEach((c, i) => {
    if (i !== cardIndex) toggleVisibility(c);
    else cardClone = c;
  });
  
  cardClone.addEventListener('click', function reverseTransition() {
    if (isTransitionLocked) return;
    
    cardClone.style.transform = '';
    surfaceClone.classList.add('angle');
    const transitionDuration = getTransitionDuration(surfaceClone);
    
    setTimeout(() => {
      document.body.removeChild(surfaceClone);
      document.body.removeChild(surfaceBlocker);
      toggleVisibility(card);
    }, transitionDuration);
    
    cardClone.removeEventListener('click', reverseTransition);
  });

  toggleVisibility(card);
  
  document.body.appendChild(surfaceBlocker);
  document.body.appendChild(surfaceClone);
  
  const transitionDuration = getTransitionDuration(surfaceClone);
  
  setTimeout(() => {
    isTransitionLocked = true;
    surfaceClone.classList.remove('angle');
    
    setTimeout(() => {
      centerElement(cardClone, surfaceClone);
    });
    
    setTimeout(() => {
      isTransitionLocked = false;
    }, transitionDuration)
  });
});

new Footer().appendToDocument().stylize({
  footer: {
    background: 'rgba(11, 11, 11, 0.2)',
    color: '#666'
  }
});

scripts

<script src="https://codepen.io/Beaglefoot/pen/YRgEoW.js"></script>

style.scss

$background_color: #222;
$card_color_main: #555;
$card_color_alt: #333;
$text_color: #fff;
$card_border_width: 12px;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: $background_color;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.surface {
  position: absolute; // For clone aligning
  display: grid;
  padding: 50px;
  width: 1000px;
  height: 1000px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  transition: transform 1s;
  transform-style: preserve-3d;
  
  &.angle {
    transform: perspective(800px) rotateX(50deg) rotateZ(-20deg) translate3d(30px, -270px, 0);
  }
  
  &.blocker {
    transform-style: flat; // Fixes FF surfaces interaction
  }
  
  @media screen and (max-width: 900px) {
    width: 500px;
    height: 700px;

    &.angle {
      transform: perspective(800px) rotateX(50deg) rotateZ(-20deg) translate3d(150px, -500px, -400px);
    }
  }
}

.header {
  grid-column-start: 1;
  grid-column-end: 5;
  color: $text_color;
  font-size: 64px;
  font-family: Noto Sans, Helvetica, Arial, sans-serif;
  text-align: center;
}

.card {
  position: relative;
  justify-self: center;
  width: 150px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(lighten($card_color_main, 20%) 30%, $card_color_main);
  border: $card_border_width solid $card_color_alt;
  border-radius: 20px;
  transition: transform 0.5s;

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background: #fff;
    opacity: 0;
    border-radius: inherit;
    transform: translate3d(
      -1 * $card_border_width,
      -1 * $card_border_width,
      0
    );
    transition: opacity 0.3s;
  }

  &:hover {
    &::after {
      opacity: 0.2;
    }
  }
    
  @media screen and (max-width: 900px) {  
    width: 75px;
    height: 100px;
    border-width: $card_border_width / 1.5;
    
    &::after {
      transform: translate3d(
        -1 * $card_border_width / 1.5,
        -1 * $card_border_width / 1.5,
        0
      );
    }
  }
  
  .icon {
    display: block;
    width: 60%;
    
    &.earth {
      width: 75%;
    }

    &.water {
      width: 50%;
    }
  }
}