package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node server.js",
     "dev": "cross-env NODE_ENV=development webpack-dev-server",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --hide-modules"
   },
   "author": "",
   "license": "ISC",

public/assets/fonts/vinlottis-icons/vinlottis-icons.svg

@@ -1,6 +1,46 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
+<<<<<<< HEAD
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="vinlottis-icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="arrow-left" horiz-adv-x="1233" d="M1193.594 394.643h-1062.068v121.96h1062.068v-121.96zM527.897-37.299l86.389 86.389-437.024 406.533 437.024 406.533-86.389 86.389-528.493-492.922z" />
+<glyph unicode="&#xe907;" glyph-name="arrow-long-right" horiz-adv-x="1720" d="M27.014 498.697h1578.188v-105.8h-1578.188v105.8zM1256.94 873.404l-70.533-74.942 374.709-352.668-374.709-352.668 70.533-74.942 458.468 427.61z" />
+<glyph unicode="&#xe908;" glyph-name="arrow-long-left" horiz-adv-x="1720" d="M1692.974 414.939h-1578.163v105.799h1578.163v-105.799zM463.067 40.235l70.531 74.941-374.703 352.662 374.703 348.253-70.531 79.349-458.46-427.603z" />
+<glyph unicode="&#xe909;" glyph-name="arrow-right" horiz-adv-x="1233" d="M39.406 501.357h1062.069v-121.96h-1062.069v121.96zM705.103 933.299l-86.389-86.389 437.024-406.533-437.024-406.533 86.389-86.389 528.493 492.922z" />
+<glyph unicode="&#xe90b;" glyph-name="ballon" horiz-adv-x="1013" d="M270.94 546.983c-17.834 67.772 1.784 139.111 51.722 189.049l30.319-30.319c-39.237-39.237-53.504-94.525-39.237-148.029l-42.803-10.701zM511.711 52.959v42.803c99.875 0 117.71 55.288 135.545 103.443 3.566 10.701 7.135 19.618 10.701 26.753 19.618 44.586 48.154 82.041 82.041 115.927l28.536-30.319c-30.319-28.536-55.288-64.206-73.122-103.443-3.566-5.35-5.35-14.268-8.919-23.186-16.051-48.154-44.586-131.979-174.782-131.979zM511.711 52.959c-108.793 0-151.596 96.308-176.565 148.029-3.566 5.35-5.35 12.485-7.135 16.051-17.834 35.671-41.019 65.989-67.772 92.742l28.536 30.319c32.103-30.319 58.854-65.989 78.474-105.227 1.784-5.35 5.35-10.701 8.919-17.834 23.186-49.938 55.288-123.060 137.328-123.060v-41.019h-1.784zM144.312 579.087c-3.566 98.091 32.103 190.832 99.875 263.956s158.731 112.359 256.821 115.927c99.875 3.566 192.616-32.103 265.74-99.875 71.338-67.772 114.142-158.731 115.927-256.821 0-7.135 0-16.051 0-23.186l-42.803 1.784c0 7.135 0 14.268 0 21.403-3.566 87.391-39.237 167.647-103.443 228.287-64.206 58.854-146.246 90.958-233.636 87.391s-167.647-39.237-228.287-103.443c-58.854-64.206-90.958-146.246-87.391-233.636l-42.803-1.784zM260.24 311.564c-73.122 69.556-115.927 167.647-115.927 267.522h42.803c0-89.176 37.453-176.565 101.66-237.204l-28.536-30.319zM766.75 311.564l-28.536 30.319c64.206 60.639 101.66 148.029 101.66 237.204h42.803c0-99.875-41.019-197.967-115.927-267.522zM590.183-64.751h-42.803c0 8.919-14.268 30.319-32.103 49.938-17.834-19.618-32.103-41.019-32.103-49.938h-42.803c0 35.671 46.369 82.041 60.639 96.308l14.268 14.268 14.268-14.268c14.268-14.268 60.639-60.639 60.639-96.308z" />
+<glyph unicode="&#xe90c;" glyph-name="bars" horiz-adv-x="1022" d="M50.027-49.221h-44.28v450.175h142.063v-42.434h-97.784zM813.849-49.221h-44.28v736.146h142.063v-42.434h-97.784zM431.937-49.221h-44.28v594.083h142.063v-44.28h-97.784zM505.737 686.925l-284.126 188.187-177.117-177.117-31.364 31.364 202.947 202.947 289.662-191.877 321.026 219.553 23.984-35.054zM859.973 803.158h-42.434v127.303h-127.303v42.434h169.739zM959.602 688.77h44.28v-739.836h-44.28v739.836zM577.692 546.706h44.28v-595.928h-44.28v595.928zM197.626 402.798h44.28v-452.019h-44.28v452.019z" />
+<glyph unicode="&#xe90d;" glyph-name="bottle" horiz-adv-x="571" d="M449-58.977h-307.909v494.087h41.532v-452.555h226.277v452.555h40.1zM218.425 516.742l-28.643 30.075c22.914 21.482 35.804 50.125 35.804 81.632v8.593h41.532v-8.593c0-42.964-17.185-83.063-48.693-111.706zM374.529 516.742c-31.507 30.075-48.693 68.742-48.693 111.706v8.593h41.532v-8.593c0-31.507 12.889-60.149 35.804-81.632l-28.643-30.075zM450.432 435.111h-41.532c0 31.507-12.889 60.149-35.804 81.632l28.643 30.075c31.507-28.643 48.693-70.175 48.693-111.706zM182.622 435.111h-41.532c0 42.964 17.185 83.063 48.693 111.706l28.643-30.075c-22.914-21.482-35.804-50.125-35.804-81.632zM225.586 823.22h41.532v-187.61h-41.532v187.61zM325.836 823.22h41.532v-187.61h-41.532v187.61zM221.29 894.827h141.782v-41.532h-141.782v41.532zM218.425 965.001h144.646v-41.532h-144.646v41.532z" />
+<glyph unicode="&#xe90f;" glyph-name="cake-chart" horiz-adv-x="1021" d="M458.341-44.346c-22.295 0-46.448 1.857-68.742 5.574-120.764 18.579-224.807 81.748-297.266 180.217-70.601 96.611-100.327 217.376-81.748 336.282 29.727 195.081 180.217 347.429 375.297 379.014l7.432-42.732c-174.644-29.727-312.129-167.212-338.139-341.855-33.443-222.948 118.906-432.892 343.713-468.193 222.948-33.443 432.892 118.906 468.193 343.713l42.732-7.432c-37.159-224.807-230.38-384.586-451.472-384.586zM1010.14 507.453h-453.33v453.33h22.295c237.811 0 431.035-193.222 431.035-431.035v-22.295zM601.399 552.043h364.15c-11.148 195.081-169.070 353.003-364.15 364.15v-364.15zM915.386 386.689h-479.34v477.482h44.589v-432.892h434.751z" />
+<glyph unicode="&#xe911;" glyph-name="stopwatch" horiz-adv-x="933" d="M618.798 188.608l-165.156 198.187v351.686h44.689v-334.199l155.441-184.586zM471.129-38.725c-242.877 0-439.121 196.245-439.121 439.121s196.245 439.121 439.121 439.121 439.121-196.245 439.121-439.121-196.245-439.121-439.121-439.121zM471.129 792.885c-215.674 0-392.489-176.814-392.489-392.489s176.814-392.489 392.489-392.489 392.489 176.814 392.489 392.489-174.872 392.489-392.489 392.489zM447.812 971.642h46.632v-170.985h-46.632v170.985zM317.631 985.243h308.939v-46.632h-308.939v46.632z" />
+<glyph unicode="&#xe912;" glyph-name="cloud" horiz-adv-x="1655" d="M373.421 86.077h1049.578v-66.816h-1049.578v66.816zM256.492 22.044c-119.713 11.136-217.154 100.225-242.21 217.154-30.624 147.554 61.249 295.106 206.017 331.299 0 125.282 83.521 236.642 208.803 264.482 144.769 36.193 295.106-52.896 331.299-200.45l-64.033-16.704c-27.84 111.361-139.202 178.178-250.562 153.121-103.009-25.056-169.825-119.713-155.905-222.723l2.783-30.624-44.545-8.352c-116.929-25.056-192.098-139.202-167.041-258.913 19.489-89.089 91.872-155.905 183.745-167.041l-8.352-61.249zM1420.215 19.26l-2.783 66.816c72.385 8.352 130.848 64.033 147.554 133.634 19.489 94.658-41.761 186.53-133.634 206.017l-41.761 8.352 2.783 30.624c11.136 83.521-41.761 158.689-122.497 178.178h-5.568c-86.304 19.489-175.393-33.408-197.666-122.497l-64.033 16.704c30.624 122.497 155.905 200.45 278.402 169.825h5.568c103.009-25.056 172.61-116.929 172.61-219.937 119.713-33.408 194.881-155.905 169.825-278.402-22.272-103.009-105.792-178.178-208.803-189.313zM690.8 642.881c-22.272 94.658 25.056 194.881 111.361 236.642 103.009 50.113 228.29 5.568 278.402-97.441l-58.465-27.84c-33.408 69.6-119.713 100.225-189.313 66.816-61.249-27.84-91.872-97.441-77.952-161.473l-64.033-16.704z" />
+<glyph unicode="&#xe914;" glyph-name="dart" horiz-adv-x="1013" d="M459.718 120.99v0c-143.177 0-259.84 116.662-258.073 259.84 0 143.177 116.662 258.073 258.073 258.073v0c44.19 0 88.381-12.374 127.268-33.583l-21.213-35.354c-31.816 17.675-68.937 28.282-106.058 28.282v0c-120.199 0-217.417-97.219-217.417-217.417s97.219-217.417 217.417-217.417v0c120.199 0 217.417 97.219 217.417 217.417 0 37.121-10.606 76.007-28.282 107.825l35.354 21.213c22.98-38.888 35.354-84.845 35.354-129.036-1.767-143.177-118.431-259.84-259.84-259.84zM459.718-50.468c-134.34 0-266.91 61.866-349.988 178.529-141.408 194.437-97.219 464.884 95.451 604.525 153.782 109.592 358.826 109.592 509.074-3.534l-22.98-33.583c-137.874 102.52-321.706 102.52-459.58 3.534-174.995-125.5-213.881-369.432-88.381-544.425s369.432-213.881 544.425-88.381c84.845 60.098 139.641 150.248 157.318 254.536 15.908 102.52-7.071 205.044-68.937 289.889l33.583 24.747c67.17-93.684 93.684-208.578 76.007-321.706s-79.543-213.881-173.227-281.051c-77.776-56.563-166.156-83.078-252.769-83.078zM493.941 444.747l315.015 314.925 29.993-30.002-315.015-314.925-29.993 30.002zM892.784 713.143c-12.374 0-24.747 0-37.121 1.767s-26.514 1.767-40.655 3.534l-17.675 1.767v17.675c-1.767 14.141-3.534 26.514-3.534 38.888-1.767 24.747-1.767 49.494 0 76.007 0 21.213 10.606 40.655 26.514 56.563 12.374 14.141 31.816 21.213 53.029 19.444 28.282-1.767 53.029-21.213 61.866-47.724v-3.534c1.767-7.071 1.767-12.374 1.767-19.444 7.071 0 14.141-1.767 21.213-3.534 19.444-5.302 35.354-19.444 42.423-35.354 3.534-7.071 7.071-17.675 7.071-26.514 0-19.444-7.071-38.888-19.444-54.796-15.908-15.908-37.121-24.747-60.098-24.747-10.606 0-22.98 0-35.354 0zM836.22 759.101c7.071 0 14.141-1.767 22.98-1.767 22.98-1.767 45.957-1.767 68.937 0h3.534c10.606 0 22.98 5.302 30.049 12.374 5.302 5.302 8.839 14.141 8.839 22.98 0 3.534-1.767 7.071-3.534 10.606-3.534 7.071-8.839 12.374-15.908 14.141-8.839 1.767-17.675 1.767-28.282 0l-26.514-3.534 1.767 26.514c0 10.606 0 19.444-1.767 30.049-3.534 10.606-14.141 17.675-24.747 17.675-8.839 0-15.908-3.534-22.98-8.839-7.071-7.071-12.374-17.675-12.374-28.282-1.767-22.98-1.767-45.957 0-68.937-1.767-8.839-1.767-15.908 0-22.98zM459.718 287.146c-51.262 0-91.917 40.655-91.917 91.917s40.655 91.917 91.917 91.917 91.917-40.655 91.917-91.917-40.655-91.917-91.917-91.917zM459.718 430.325c-28.282 0-51.262-22.98-51.262-51.262s22.98-51.262 51.262-51.262 51.262 22.98 51.262 51.262-22.98 51.262-51.262 51.262z" />
+<glyph unicode="&#xe919;" glyph-name="eye-1" horiz-adv-x="1739" d="M1534.010 360.702h-91.094l-11.387 22.774c-68.321 117.664-167.006 216.348-284.669 284.669-371.967 216.348-850.211 87.298-1066.56-284.669l-79.707 45.547c239.122 417.515 774.299 557.952 1188.019 318.829 125.254-72.116 227.735-174.597 303.647-296.056h41.752v-91.094zM1499.849 451.796h204.962v-91.094h-204.962v91.094zM786.278 79.828c-148.028 0-269.487 121.46-269.487 269.487s121.46 269.487 269.487 269.487 269.487-121.46 269.487-269.487-121.46-269.487-269.487-269.487zM786.278 527.707c-98.685 0-178.392-79.707-178.392-178.392s79.707-178.392 178.392-178.392 178.392 79.707 178.392 178.392-79.707 178.392-178.392 178.392z" />
+<glyph unicode="&#xe91a;" glyph-name="eye-2" horiz-adv-x="1198" d="M1068.604 184.358h-62.959l-7.87 15.74c-47.219 81.322-115.425 149.528-196.747 196.747-257.084 149.528-587.619 60.335-737.147-196.747l-55.089 31.48c165.269 285.94 535.152 385.624 821.092 220.357 86.569-49.842 157.398-120.671 209.864-204.617h28.856c0 0 0-62.959 0-62.959zM1044.994 247.317h141.658v-62.959h-141.658v62.959zM549.19-9.765c-102.309 0-186.254 83.946-186.254 186.254s83.946 186.254 186.254 186.254 186.254-83.946 186.254-186.254-83.946-186.254-186.254-186.254zM549.19 299.784c-68.206 0-123.296-55.089-123.296-123.296s55.089-123.296 123.296-123.296 123.296 55.089 123.296 123.296c0 68.206-55.089 123.296-123.296 123.296zM528.204 926.752h62.959v-173.137h-62.959v173.137zM836.173 652.924l102.334 129.768 49.435-38.985-102.334-129.768-49.435 38.985zM137.111 744.075l50.071 38.165 98.595-129.351-50.071-38.165-98.595 129.351z" />
+<glyph unicode="&#xe91b;" glyph-name="eye-3" horiz-adv-x="1337" d="M697.122 515.16v0c-262.241 0-505.296 140.716-636.418 364.58l67.16 38.378c118.327-201.48 335.8-329.402 569.258-329.402v0c233.46 0 450.93 124.725 569.258 329.402l67.16-38.378c-131.122-223.867-374.175-364.58-636.418-364.58zM633.162 176.165h76.753v-211.072h-76.753v211.072zM149.619 188.967l124.696 158.24 60.283-47.503-124.696-158.24-60.283 47.503zM1006.499 295.077l61.042 46.529 120.197-157.694-61.042-46.529-120.197 157.694z" />
+<glyph unicode="&#xe91c;" glyph-name="eye-4" horiz-adv-x="1379" d="M693.748-70.634c-65.084 0-117.964 52.88-117.964 117.964s52.88 117.964 117.964 117.964 117.964-52.88 117.964-117.964-52.88-117.964-117.964-117.964zM693.748 71.735c-12.203 0-24.407-12.203-24.407-24.407s12.203-24.407 24.407-24.407c12.203 0 24.407 12.203 24.407 24.407s-12.203 24.407-24.407 24.407zM644.936 897.483h97.625v-349.823h-97.625v349.823zM1086.422 401.88l206.769 261.739 76.607-60.518-206.769-261.739-76.607 60.518zM22.445 606.631l77.612 59.22 199.866-261.94-77.612-59.22-199.866 261.94zM87.658 120.548l-85.422 48.813c69.151 122.032 170.845 219.657 292.875 292.875 183.047 105.761 398.636 134.235 602.023 81.354 203.386-56.948 378.298-187.115 484.058-370.162l-85.422-48.813c-93.558 162.709-244.063 276.605-423.043 325.418s-370.162 24.407-528.804-69.151c-105.761-69.151-195.25-154.573-256.267-260.334z" />
+<glyph unicode="&#xe91d;" glyph-name="eye-5" horiz-adv-x="1020" d="M512.41-57.338c-223.412 0-404.27 180.859-404.27 404.27s180.859 406.931 406.931 406.931c223.412 0 406.931-180.859 406.931-406.931s-186.178-404.27-409.59-404.27zM512.41 690.031c-188.836 0-343.099-154.262-343.099-343.099s154.262-343.099 343.099-343.099 343.099 154.262 343.099 343.099c0 191.498-154.262 343.099-343.099 343.099zM515.070 264.481c-45.215 0-82.452 37.236-82.452 82.452s37.236 82.452 82.452 82.452 82.452-37.236 82.452-82.452-37.236-82.452-82.452-82.452zM515.070 368.21c-10.639 0-21.278-7.979-21.278-21.278s7.979-21.278 21.278-21.278 18.617 10.639 18.617 21.278-7.979 21.278-18.617 21.278zM480.494 966.637h63.834v-255.331h-63.834v255.331zM799.409 606.416l150.084 189.873 50.077-39.584-150.084-189.873-50.077 39.584zM29.206 757.88l50.721 38.753 145.322-190.205-50.721-38.753-145.322 190.205z" />
+<glyph unicode="&#xe91e;" glyph-name="eye-6" horiz-adv-x="1020" d="M509.725 234.041c-46.895 0-87.929 38.103-87.929 87.929s38.103 87.929 87.929 87.929 87.929-38.103 87.929-87.929-38.103-87.929-87.929-87.929zM509.725 339.555c-8.793 0-17.585-8.793-17.585-17.585s8.793-17.585 17.585-17.585c8.793 0 17.585 8.793 17.585 17.585s-5.862 17.585-17.585 17.585zM474.553 946.261h70.343v-257.924h-70.343v257.924zM797.941 584.125l152.62 193.193 55.198-43.605-152.62-193.193-55.198 43.605zM15.553 732.705l55.909 42.691 147.64-193.35-55.909-42.691-147.64 193.35zM512.656-59.055c-202.236 0-398.61 105.514-509.986 293.096l61.55 35.172c143.617-246.2 460.16-331.197 706.359-187.58 79.135 43.964 143.617 111.376 187.58 187.58l61.55-35.172c-52.757-87.929-126.032-161.202-213.959-213.959-93.791-55.688-193.443-79.135-293.096-79.135zM958.161 374.727c-70.343 120.169-181.72 205.167-313.612 240.339s-272.578 17.585-392.747-52.757c-79.135-43.964-143.617-111.376-190.512-190.512l-61.55 35.172c52.757 87.929 126.032 164.133 213.959 213.959 278.44 161.202 638.947 64.481 800.15-213.959l-55.688-32.241z" />
+<glyph unicode="&#xe91f;" glyph-name="eye-7" horiz-adv-x="1492" d="M699.992 382.813h100.935v-370.096h-100.935v370.096zM39.886 317.081l218.641 277.46 79.275-62.469-218.641-277.46-79.275 62.469zM1168.077 535.027l80.254 61.217 211.71-277.543-80.254-61.217-211.71 277.543zM750.46 365.99c-4.205 0-4.205 0 0 0-302.805 0-580.376 159.814-731.779 420.562l88.318 50.467c130.374-227.104 378.507-370.096 643.461-370.096v0c264.954 0 508.881 142.992 643.461 370.096l88.318-50.467c-155.609-260.75-433.179-420.562-731.779-420.562z" />
+<glyph unicode="&#xe920;" glyph-name="eye-8" d="M500.604 248.557c-45.588 0-85.476 37.040-85.476 85.476s37.040 85.476 85.476 85.476c48.436 0 85.476-37.040 85.476-85.476s-37.040-85.476-85.476-85.476zM534.794 940.907h-68.38v-250.726h68.38v250.726zM929.448 777.228l-148.362-187.803 53.66-42.39 148.362 187.803-53.66 42.39zM74.194 774.747l-54.349-41.502 143.521-187.955 54.347 41.502-143.52 187.955zM503.453-36.36c-196.592 0-387.487 102.571-495.756 284.916l59.832 34.19c139.608-239.332 447.321-321.957 686.651-182.348 76.929 42.737 139.608 108.267 182.348 182.348l59.832-34.19c-51.284-85.476-122.514-156.704-207.991-207.991-91.173-54.135-188.045-76.929-284.916-76.929zM936.528 385.318c-68.38 116.818-176.649 199.443-304.862 233.632s-264.973 17.094-381.789-51.284c-76.929-42.737-139.608-108.267-185.196-185.196l-59.832 34.19c51.284 85.476 122.514 159.555 207.991 207.991 270.673 156.704 621.121 62.682 777.825-207.991l-54.135-31.341z" />
+<glyph unicode="&#xe922;" glyph-name="face-1" horiz-adv-x="1103" d="M847.49 685.688c-23.283 0-40.746 17.463-40.746 40.746s17.463 40.746 40.746 40.746c23.283 0 40.746-17.463 40.746-40.746 1.94-23.283-17.463-40.746-40.746-40.746zM847.49 732.253c-1.94 0-5.822-1.94-5.822-5.822 0-5.822 9.702-5.822 9.702 0 1.94 3.879 0 5.822-3.879 5.822zM244.056 584.793c-36.867 0-73.73 9.702-106.717 29.105s-58.209 44.625-77.612 77.612l40.746 23.283c15.524-25.224 34.924-46.568 60.149-60.149 79.552-46.568 182.388-19.403 228.956 60.149l40.746-23.283c-40.746-67.911-112.536-106.717-186.267-106.717zM824.206 953.448h46.568v-89.254h-46.568v89.254zM937.966 833.318l51.661 65.511 36.566-28.834-51.661-65.511-36.566 28.834zM669.986 872.923l36.975 28.309 50.721-66.246-36.975-28.309-50.721 66.246zM546.743 251.059c-85.371 0-155.223 69.851-155.223 155.223h46.568c0-60.149 48.508-110.597 110.597-110.597 60.149 0 110.597 48.508 110.597 110.597h46.568c-3.879-85.371-73.73-155.223-159.105-155.223zM523.461 80.315h46.568v-102.835h-46.568v102.835zM288.562 88.444l61.264 77.709 36.57-28.828-61.264-77.709-36.57 28.828zM710.636 136.099l37.021 28.252 58.859-77.128-37.021-28.252-58.859 77.128zM849.43 582.85c-19.403 0-36.867 1.94-56.27 7.762-54.327 15.524-100.895 50.447-128.061 98.955l40.746 23.283c21.343-38.806 58.209-65.971 100.895-77.612s87.314-5.822 126.12 15.524c25.224 15.524 46.568 36.867 62.089 62.089l40.746-23.283c-19.403-32.984-46.568-60.149-79.552-79.552-34.924-17.463-69.851-27.165-106.717-27.165zM993.011 740.015c-46.568 79.552-147.464 108.657-227.015 62.089-25.224-15.524-46.568-36.867-62.089-62.089l-40.746 23.283c19.403 32.984 46.568 60.149 79.552 79.552 102.835 58.209 232.836 23.283 291.045-79.552l-40.746-23.283z" />
+<glyph unicode="&#xe923;" glyph-name="face-2" horiz-adv-x="1013" d="M636.961 62.376h-261.201v40.593h218.843v47.652h42.358zM462.24 11.194h67.066v-42.358h-67.066v42.358zM769.326 701.259c-21.179 0-37.061 15.885-37.061 37.061s15.885 37.061 37.061 37.061c21.179 0 37.061-15.885 37.061-37.061 1.765-21.179-15.885-37.061-37.061-37.061zM769.326 743.617c-1.765 0-5.294-1.765-5.294-5.294 0-5.294 8.824-5.294 8.824 0 1.765 3.529 0 5.294-3.529 5.294zM89.849 750.676l-37.061 21.179c52.946 93.539 171.194 125.307 264.731 72.361 30.002-17.649 54.711-42.358 72.361-72.361l-37.061-21.179c-14.12 22.944-33.532 42.358-56.475 56.475-72.361 40.593-165.897 15.885-206.491-56.475zM495.772 330.636c-33.532 0-67.066 8.824-97.068 26.473s-52.946 40.593-70.595 70.595l37.061 21.179c14.12-22.944 31.768-42.358 54.711-54.711 35.297-21.179 75.89-26.473 114.716-15.885s72.361 35.297 91.774 70.595l37.061-21.179c-26.473-44.122-67.066-77.655-118.248-90.007-15.885-5.294-33.532-7.059-49.417-7.059zM748.15 944.813h42.358v-81.184h-42.358v81.184zM851.709 835.654l46.992 59.588 33.26-26.227-46.992-59.588-33.26 26.227zM607.928 871.613l33.632 25.749 46.134-60.255-33.632-25.749-46.134 60.255zM638.726 750.676l-37.061 21.179c17.649 30.002 40.593 52.946 70.595 70.595 44.122 26.473 97.068 33.532 146.485 19.415s91.774-45.888 118.248-90.007l-37.061-21.179c-21.179 35.297-52.946 60.005-91.774 70.595s-79.419 5.294-114.716-15.885c-22.944-12.353-42.358-31.768-54.711-54.711zM220.451 701.259c-21.179 0-37.061 15.885-37.061 37.061s15.885 37.061 37.061 37.061 37.061-15.885 37.061-37.061c1.765-21.179-15.885-37.061-37.061-37.061zM220.451 743.617c-1.765 0-5.294-1.765-5.294-5.294 0-5.294 8.824-5.294 8.824 0 1.765 3.529 0 5.294-3.529 5.294z" />
+<glyph unicode="&#xe924;" glyph-name="face-3" horiz-adv-x="1013" d="M226.738 602.24c-79.377 0-142.517 64.943-142.517 142.517s64.943 142.517 142.517 142.517 144.32-63.141 144.32-142.517-64.943-142.517-144.32-142.517zM226.738 845.782c-55.924 0-101.024-45.101-101.024-101.024s46.904-101.024 101.024-101.024 101.024 45.101 101.024 101.024-45.101 101.024-101.024 101.024zM787.782 602.24c-79.377 0-142.517 64.943-142.517 142.517s64.943 142.517 142.517 142.517 142.517-64.943 142.517-142.517-63.141-142.517-142.517-142.517zM787.782 845.782c-55.924 0-101.024-45.101-101.024-101.024s45.101-101.024 101.024-101.024 101.024 45.101 101.024 101.024-45.101 101.024-101.024 101.024zM486.516 62.846h43.295v-82.986h-43.295v82.986zM508.163 328.035c-19.845 0-39.687 7.217-54.121 21.647l-95.613 95.613 30.667 30.667 95.613-95.613c12.628-12.628 36.081-12.628 48.708 0l95.613 95.613 30.667-30.667-95.613-95.613c-16.237-14.43-36.081-21.647-55.924-21.647zM789.586 706.873c-21.647 0-37.884 16.237-37.884 37.884s16.237 37.884 37.884 37.884c21.647 0 37.884-16.237 37.884-37.884s-18.039-37.884-37.884-37.884zM789.586 750.168c-1.803 0-5.412-1.803-5.412-5.412 0-5.412 9.020-5.412 9.020 0 0 3.608-1.803 5.412-3.608 5.412zM508.163 52.022c-32.473 0-66.749 9.020-97.416 25.256-30.667 18.039-55.924 43.295-73.963 73.963l37.884 21.647c14.43-23.453 34.275-43.295 57.729-57.729 73.963-43.295 169.575-16.237 211.069 57.729l37.884-21.647c-37.884-63.141-104.633-99.218-173.184-99.218zM766.135 955.826h43.295v-82.986h-43.295v82.986zM871.904 844.14l48.034 60.908 33.997-26.809-48.034-60.908-33.997 26.809zM622.752 880.963l34.375 26.321 47.156-61.591-34.375-26.321-47.156 61.591zM226.738 706.873c-21.647 0-37.884 16.237-37.884 37.884s16.237 37.884 37.884 37.884 37.884-16.237 37.884-37.884c1.803-21.647-16.237-37.884-37.884-37.884zM226.738 750.168c-1.803 0-5.412-1.803-5.412-5.412 0-5.412 9.020-5.412 9.020 0 1.803 3.608 0 5.412-3.608 5.412z" />
+<glyph unicode="&#xe928;" glyph-name="heart-sparks" horiz-adv-x="771" d="M408.161-31.548l-25.575 34.709c38.362 29.231 76.726 60.287 104.129 85.861 63.94 51.152 122.4 109.611 175.376 171.724 38.362 47.499 54.806 89.515 51.152 135.189-1.827 43.845-20.095 84.036-51.152 113.264-14.614 12.788-32.885 23.748-52.979 29.231-36.538 12.788-78.554 9.134-113.264-9.134-14.614-9.134-27.402-18.268-40.192-31.055l-29.231 31.055c14.614 14.614 31.055 27.402 49.323 38.362 45.67 23.748 98.65 27.402 147.974 10.961 25.575-7.307 47.499-20.095 67.594-38.362 40.192-36.538 63.94-89.515 65.767-142.496 3.654-56.633-16.441-109.611-62.113-166.244-54.806-63.94-115.093-124.225-180.858-177.205-27.402-21.921-65.767-54.806-105.957-85.861zM371.624 947.643h43.845v-96.822h-43.845v96.822zM545.217 797.863l56.64 71.658 34.395-27.187-56.64-71.658-34.395 27.187zM151.153 842.614l34.866 26.587 55.391-72.634-34.866-26.587-55.391 72.634zM322.296 12.294c-10.961 9.134-25.575 21.921-38.362 32.885l-14.614 12.788c-63.94 52.979-126.053 113.264-179.030 177.205-45.67 56.633-65.767 107.786-62.113 166.244 1.827 54.806 25.575 105.957 65.767 142.496 20.095 18.268 42.016 31.055 67.594 38.362 47.499 16.441 100.475 12.788 146.149-10.961 40.192-25.575 73.074-56.633 100.475-93.168l-32.885-27.402c-23.748 32.885-52.979 60.287-87.69 82.208-32.885 18.268-74.901 20.095-111.439 7.307-20.095-7.307-36.538-16.441-52.979-29.231-31.055-29.231-49.323-69.42-51.152-113.264-1.827-47.499 12.788-89.515 51.152-137.014 52.979-62.113 111.439-118.746 173.551-171.724l14.614-12.788c12.788-10.961 27.402-23.748 36.538-31.055l-25.575-32.885zM389.891-44.336l-27.402 34.709 18.268 14.614c32.885 25.575 67.594 52.979 105.957 85.861 63.94 51.152 122.4 109.611 175.376 171.724 38.362 47.499 54.806 89.515 51.152 135.189l43.845 1.827c3.654-56.633-16.441-109.611-62.113-166.244-54.806-63.94-115.093-124.225-180.858-177.205-38.362-32.885-73.074-62.113-105.957-85.861l-18.268-14.614z" />
+<glyph unicode="&#xe929;" glyph-name="heart" horiz-adv-x="764" d="M402.133 123.917l-23.669 32.772c38.235 29.131 76.469 60.083 103.778 85.572 63.724 50.98 121.985 109.241 174.785 171.145 38.235 47.337 54.621 89.215 50.98 134.731-1.82 43.696-20.028 83.75-50.98 112.883-14.566 12.746-32.772 23.669-52.8 29.131-36.414 12.746-78.289 9.103-112.883-9.103-14.566-9.103-27.309-18.207-40.055-30.952l-29.131 30.952c14.566 14.566 30.952 27.309 49.159 38.235 45.516 23.669 98.316 27.309 147.476 10.925 25.489-7.281 47.337-20.028 67.364-38.235 40.055-36.414 63.724-89.215 65.544-142.013 3.641-56.441-16.386-109.241-61.903-165.682-54.621-63.724-114.704-123.805-180.247-176.607-27.309-21.848-67.364-52.8-107.421-83.75zM318.383 165.794c-10.925 9.103-25.489 21.848-38.235 32.772l-14.566 12.746c-63.724 52.8-125.627 112.883-178.427 176.607-45.516 56.441-65.544 107.421-61.903 165.682 1.82 54.621 25.489 105.599 65.544 142.013 20.028 18.207 41.875 30.952 67.364 38.235 47.337 16.386 100.138 12.746 145.654-10.925 40.055-25.489 72.827-56.441 100.138-92.855l-32.772-27.309c-23.669 32.772-52.8 60.083-87.392 81.93-32.772 18.207-74.649 20.028-111.063 7.281-20.028-7.281-36.414-16.386-52.8-29.131-30.952-29.131-49.159-69.187-50.98-112.883-1.82-47.337 12.746-89.215 50.98-136.551 52.8-61.903 111.063-118.344 172.965-171.145l14.566-12.746c12.746-10.925 27.309-23.669 36.414-30.952l-25.489-32.772zM385.748 109.353l-27.309 34.594 18.207 14.566c32.772 25.489 67.364 52.8 105.599 85.572 63.724 50.98 121.985 109.241 174.785 171.145 38.235 47.337 54.621 89.215 50.98 134.731l43.696 1.82c3.641-56.441-16.386-109.241-61.903-165.682-54.621-63.724-114.704-123.805-180.247-176.607-38.235-32.772-72.827-61.903-105.599-85.572l-18.207-14.566z" />
+<glyph unicode="&#xe936;" glyph-name="medal" horiz-adv-x="907" d="M710.019-62.954l-42.286 5.287c3.523 37 12.334 74 26.429 109.238l5.287 15.857 15.857-1.762c37-5.287 74-15.857 107.476-31.713l-17.619-38.762c-26.429 10.57-52.856 19.381-79.285 26.429-5.287-28.19-12.334-56.381-15.857-84.572zM507.929 150.347l36.619 21.148 103.092-178.52-36.619-21.148-103.092 178.52zM694.354 242.892l36.627 21.126 96.827-167.878-36.627-21.126-96.827 167.878zM181.446-62.954c-3.523 28.19-8.81 56.381-17.619 82.809-28.19-5.287-54.619-14.096-81.049-26.429l-17.619 38.762c35.239 15.857 70.475 26.429 107.476 31.713l15.857 1.762 5.287-15.857c14.096-35.239 22.906-72.238 26.429-109.238l-38.762-3.523zM244.322-5.182l103.135 178.478 36.611-21.156-103.135-178.478-36.611 21.156zM64.86 96.444l96.809 167.898 36.632-21.121-96.809-167.898-36.632 21.121zM424.588 744.001h42.286v-95.142h-42.286v95.142zM546.724 614.377l56.795 71.893 33.182-26.213-56.795-71.893-33.182 26.213zM255.658 660.427l33.618 25.65 54.507-71.436-33.618-25.65-54.507 71.436zM445.73 194.285c-202.62 0-366.477 163.857-366.477 366.477s163.857 368.24 366.477 368.24 366.477-163.857 366.477-366.477-163.857-368.24-366.477-368.24zM445.73 886.716c-179.714 0-324.191-146.237-324.191-324.191 0-179.714 146.237-324.191 324.191-324.191 179.714 0 324.191 146.237 324.191 324.191 1.762 177.953-144.477 324.191-324.191 324.191z" />
+<glyph unicode="&#xe937;" glyph-name="megaphone" horiz-adv-x="1473" d="M301.758 20.312v57.992c38.66 0 77.321 14.499 103.902 43.493 26.58 26.58 43.493 65.24 43.493 103.902h57.992c-2.415-113.567-94.236-205.387-205.387-205.387zM67.374 223.282v439.771l195.721-77.321-21.747-53.159-118.4 45.911v-270.628l118.4 48.327 21.747-53.159zM937.251-15.934l-620.994 299.625v309.288l620.994 299.625v-908.538zM371.832 319.934l507.427-246.465v727.313l-507.427-244.048v-236.8zM1319.030 467.332h147.395v-57.992h-147.395v57.992zM1200.19 158.853l35.956 45.501 109.96-86.892-35.956-45.501-109.96 86.892zM1201.794 716.695l109.592 83.423 35.124-46.143-109.592-83.423-35.124 46.143z" />
+<glyph unicode="&#xe93a;" glyph-name="phone" horiz-adv-x="871" d="M691.62 770.026l-71.318-71.317 32.296-32.294 71.317 71.317-32.294 32.294zM801.738 542.789l-94.503-11.057 5.308-45.361 94.503 11.057-5.308 45.361zM455.681 850.946l-12.29-92.436 45.274-6.019 12.29 92.436-45.274 6.019zM696.313 6.505c-1.902 0-5.709 0-7.611 0-390.114 9.516-669.856 287.353-681.274 675.565 0 1.902 0 49.478 17.127 79.926 17.127 32.351 68.508 72.315 78.024 79.926 26.642 24.739 66.606 24.739 93.248-1.902l114.179-114.179c26.642-26.642 26.642-68.508 0-93.248l-55.187-57.090c-9.516-9.516-9.516-22.836 0-32.351l293.062-293.062c9.516-9.516 22.836-9.516 32.351 0l55.187 55.187c26.642 26.642 68.508 26.642 93.248 0l114.179-114.179c24.739-24.739 26.642-66.606 1.902-93.248-7.611-9.516-49.478-62.799-79.926-79.926-30.448-11.418-53.284-11.418-68.508-11.418zM148.249 815.279c-5.709 0-11.418-1.902-15.224-5.709l-1.902-1.902c-15.224-11.418-55.187-45.672-68.508-66.606-9.516-15.224-11.418-45.672-9.516-57.090 9.516-363.472 272.128-624.184 639.407-633.698 11.418 0 28.544 0 53.284 11.418 17.127 9.516 49.478 45.672 64.701 66.606l1.902 1.902c9.516 9.516 9.516 22.836 0 32.351l-114.179 114.179c-7.611 7.611-22.836 7.611-32.351 0l-55.187-55.187c-26.642-26.642-68.508-26.642-93.248 0l-294.965 291.16c-26.642 26.642-26.642 68.508 0 93.248l55.187 55.187c9.516 9.516 9.516 22.836 0 32.351l-114.179 114.179c-3.807 5.709-9.516 7.611-15.224 7.611z" />
+<glyph unicode="&#xe93e;" glyph-name="plus" d="M530.601 917.643h-102.298v-943.933h102.298v943.933zM953.743 494.499h-943.933v-102.298h943.933v102.298z" />
+<glyph unicode="&#xe946;" glyph-name="spark" horiz-adv-x="1883" d="M861.919 796.748h181.462v-368.595h-181.462v368.595zM1518.035 238.759l214.328 271.506 142.43-112.434-214.328-271.506-142.43 112.434zM35.557 398.718l144.244 110.094 209.865-274.966-144.244-110.094-209.865 274.966z" />
+<glyph unicode="&#xe949;" glyph-name="tag" horiz-adv-x="844" d="M490.344-9.609l-447.874 447.874v356.353h356.353l440.085-440.085-29.209-29.209-428.4 426.454h-295.987v-295.987l405.033-405.033 258.989 260.936 31.156-31.156-290.145-290.145zM274.196 479.156c-44.787 0-81.786 36.998-81.786 81.786s36.998 81.786 81.786 81.786c44.787 0 81.786-36.998 81.786-81.786s-36.998-81.786-81.786-81.786zM274.196 607.675c-25.313 0-48.682-21.42-48.682-48.682 0-25.313 21.42-48.682 48.682-48.682s48.682 21.42 48.682 48.682c0 27.263-23.367 48.682-48.682 48.682z" />
+<glyph unicode="&#xe94b;" glyph-name="talk" horiz-adv-x="987" d="M343.903-83.22v214.003h45.452v-115.524l238.623 208.322h7.575c172.339 0 303.014 140.143 303.014 327.633 0 179.914-145.825 325.739-325.739 327.633h-227.26c-179.914 0-325.739-145.825-327.633-325.739 0-181.808 147.719-327.633 327.633-327.633v0-45.452c-206.427 0-373.084 166.656-373.084 371.19 1.894 206.427 168.551 373.084 373.084 373.084v0h227.26c204.534 0 371.19-166.656 371.19-371.19 0-208.322-145.825-367.404-340.89-371.19l-299.226-265.137z" />
+<glyph unicode="&#xe952;" glyph-name="cross" horiz-adv-x="1017" d="M579.952 307.286l76.888 76.997 343.281-342.795-76.888-76.997-343.281 342.795zM-0.049 887.658l76.943 76.943 343.038-343.038-76.943-76.943-343.038 343.038zM0.721 38.043l923.318 923.318 76.943-76.943-923.318-923.318-76.943 76.943z" />
+=======
 <metadata>
 <json>
 <![CDATA[
@@ -55,4 +95,5 @@
 <glyph unicode="&#xe949;" glyph-name="tag" data-tags="tag" horiz-adv-x="844" d="M490.344-9.609l-447.874 447.874v356.353h356.353l440.085-440.085-29.209-29.209-428.4 426.454h-295.987v-295.987l405.033-405.033 258.989 260.936 31.156-31.156-290.145-290.145zM274.196 479.156c-44.787 0-81.786 36.998-81.786 81.786s36.998 81.786 81.786 81.786c44.787 0 81.786-36.998 81.786-81.786s-36.998-81.786-81.786-81.786zM274.196 607.675c-25.313 0-48.682-21.42-48.682-48.682 0-25.313 21.42-48.682 48.682-48.682s48.682 21.42 48.682 48.682c0 27.263-23.367 48.682-48.682 48.682z" />
 <glyph unicode="&#xe94b;" glyph-name="talk" data-tags="talk" horiz-adv-x="987" d="M343.903-83.22v214.003h45.452v-115.524l238.623 208.322h7.575c172.339 0 303.014 140.143 303.014 327.633 0 179.914-145.825 325.739-325.739 327.633h-227.26c-179.914 0-325.739-145.825-327.633-325.739 0-181.808 147.719-327.633 327.633-327.633v0-45.452c-206.427 0-373.084 166.656-373.084 371.19 1.894 206.427 168.551 373.084 373.084 373.084v0h227.26c204.534 0 371.19-166.656 371.19-371.19 0-208.322-145.825-367.404-340.89-371.19l-299.226-265.137z" />
 <glyph unicode="&#xe952;" glyph-name="cross" data-tags="cross" horiz-adv-x="1017" d="M579.952 307.286l76.888 76.997 343.281-342.795-76.888-76.997-343.281 342.795zM-0.049 887.658l76.943 76.943 343.038-343.038-76.943-76.943-343.038 343.038zM0.721 38.043l923.318 923.318 76.943-76.943-923.318-923.318-76.943 76.943z" />
+>>>>>>> 627f96b4205143f053a77c3948f846e8864282b6
 </font></defs></svg>

src/Vinlottis.vue

@@ -2,6 +2,7 @@
   <div class="app-container">
     <banner :routes="routes"/>
     <router-view />
+    <Footer />
     <UpdateToast
       v-if="showToast"
       :text="toastText"
@@ -14,11 +15,12 @@
 <script>
 import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin";
 import banner from "@/ui/Banner";
+import Footer from "@/ui/Footer";
 import UpdateToast from "@/ui/UpdateToast";
 
 export default {
   name: "vinlottis",
-  components: { banner, UpdateToast },
+  components: { banner, UpdateToast, Footer },
   props: {},
   data() {
     return {
@@ -102,9 +104,16 @@ body {
 }
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
 .app-container {
   background-color: white;
   min-height: 100vh;
+  display: grid;
+  grid-template-rows: 80px auto 100px;
+
+  .main-container{
+    height: 100%;
+    width: 100%;
+  }
 }
 </style>

src/components/AllRequestedWines.vue

@@ -57,9 +57,8 @@ h1 {
 }
 
 .requested-wines-container{
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  align-items: flex-start;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 2rem;
 }
 </style>

src/components/PersonalHighscorePage.vue

@@ -14,14 +14,14 @@
 
         <h4 class="margin-bottom-0">Vinnende farger:</h4>
         <div class="raffle-container el-spacing">
-          <div class="raffle-element" :class="color + `-raffle`" v-for="[color, occurences] in Object.entries(winningColors)">
+          <div class="raffle-element" :class="color + `-raffle`" v-for="[color, occurences] in Object.entries(winningColors)" :key="color">
             {{ occurences }}
           </div>
         </div>
 
         <h4 class="el-spacing">Flasker vunnet:</h4>
 
-        <div v-for="win in winner.highscore">
+        <div v-for="win in winner.highscore" :key="win._id">
           <router-link :to="winDateUrl(win.date)" class="days-ago">
             {{ humanReadableDate(win.date) }} - {{ daysAgo(win.date) }} dager siden
           </router-link>

src/components/RequestWine.vue

@@ -106,7 +106,6 @@ h1{
   text-align: center;
 }
 
-
 .main-container{
   margin: auto;
   max-width: 1200px;

src/components/VinlottisPage.vue

@@ -1,31 +1,68 @@
 <template>
-  <div class="outer">
-    <div class="container">
-      <section class="header-and-notification">
-          <h1 @click="startCountdown">Vinlotteri</h1>
-          <img
-            src="/public/assets/images/notification.svg"
-            alt="Notification-bell"
-            @click="requestNotificationAccess"
-            class="notification-request-button"
-            role="button"
-            v-if="notificationAllowed"
-          />
-      </section>
-      <div class="to-lottery-container">
-        <a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a>
+  <main class="main-container">
+
+    <section class="top-container">
+      
+      <div class="want-to-win">
+        <h1>
+          Vil du også vinne?
+        </h1>
+        <img
+          src="/public/assets/images/notification.svg"
+          alt="Notification-bell"
+          @click="requestNotificationAccess"
+          class="notification-request-button"
+          role="button"
+          v-if="notificationAllowed"
+        />
       </div>
+
+      <router-link to="/lottery/game" class="participate-button">
+          <i class="icon icon--arrow-right"></i>
+          <p>Trykk her for å delta</p>
+      </router-link>
+
+      <router-link to="/lottery/generate" class="see-details-link">
+        Se vipps detaljer og QR-kode
+      </router-link>
+
+      <div class="icons-container">
+        <i class="icon icon--heart-sparks"></i>
+        <i class="icon icon--face-1"></i>
+        <i class="icon icon--face-3"></i>
+        <i class="icon icon--ballon"></i>
+
+        <i class="icon icon--bottle"></i>
+        <i class="icon icon--bottle"></i>
+        <i class="icon icon--bottle"></i>
+        <i class="icon icon--bottle"></i>
+        <i class="icon icon--bottle"></i>
+      </div>
+
+    </section>
+    
+    <section class="content-container">
+
+      <div class="scroll-info">  
+        <i class ="icon icon--arrow-long-right"></i>
+        <p>Scroll for å se vinnere og annen gøy statistikk</p>
+      </div>
+
+      <Highscore class="highscore"/>
+      <TotalBought class="total-bought" />
+      
       <section class="chart-container">
         <PurchaseGraph class="purchase" />
         <WinGraph class="win" />
       </section>
-      <TotalBought class="total-bought" />
-      <Vipps class="vipps-icon" />
-      <Highscore class="highscore"/>
+      
       <Wines class="wines-container" />
-    </div>
+
+    </section>
+    
     <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
-  </div>
+    
+  </main>
 </template>
 
 <script>
@@ -95,9 +132,180 @@ export default {
 
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
+@import "../styles/variables.scss";
+
+.top-container {
+  height: 30em;
+  background-color: $primary;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(12, 1fr);
+  align-items: center;
+  justify-items: start;
+
+  @include mobile{
+    padding-bottom: 2em;
+    height: 15em;
+    grid-template-rows: repeat(7, 1fr);
+  }
+
+  .want-to-win {
+    grid-row: 2 / 4;
+    grid-column: 2 / -1;
+    display: flex;
+
+    h1{
+      font-size: 2em;
+      font-weight: 400;
+    }
+    
+    @include tablet {
+      h1{
+        font-size: 3em;
+      }
+      grid-row: 2 / 4;
+      grid-column: 3 / -3;
+    }
+  }
+
+  .notification-request-button{
+    cursor: pointer;
+  }
+
+  .participate-button {
+    grid-row: 4 / 6;
+    grid-column: 2 / -1;
+
+    background: inherit;
+    border: 4px solid black;
+    padding: 0 1em 0 1em;
+    display: flex;
+    width: 12.5em;
+    column-gap: 15px;
+    align-items: center;
+    text-decoration: none;
+    color: black;
+    
+    i {
+      color: $link-color;
+      margin-left: 5px;
+    }
+
+    p {
+      font-size: 16px;
+    }
+
+    @include tablet {
+      grid-row: 4 / 6;
+      grid-column: 3 / -3;
+    }
+  }
+
+  .see-details-link {
+    grid-row: 6 / 8;
+    grid-column: 2 / -1;
+    
+    @include tablet {
+      grid-row: 6 / 8;
+      grid-column: 2 / 10;
+    }
+
+    @include tablet {
+      grid-column: 3 / -3;
+    }
+
+    font-weight: bold;
+    color: black;
+    font-weight: 200;
+    font-size: 1.3em;
+
+    text-decoration: underline;
+    text-decoration-color: $link-color;
+    text-underline-position: under;
+  }
+
+  .icons-container {
+    grid-column: 1 / -1;
+    grid-row: 7 / -1;
+    @include mobile{
+      margin-top: 2em;
+      display: none;
+    }
+
+    @include tablet {
+      grid-row: 6 / -1;
+      grid-column: 7 / -1;
+    }
+
+    @include desktop{
+      grid-row: 4 / -3;
+      grid-column: 7 / 11;
+    }
+
+    @include widescreen {
+      grid-column: 6 / 10;
+    }
+
+    width: 100%;
+    min-width: 375px;
+    height: 100%;
+    display: grid;
+    grid: repeat(6, 1fr) / repeat(12, 1fr);
+
+    i {
+      font-size: 5em;
+
+      &.icon--heart-sparks{
+        grid-column: 2 / 4;
+        grid-row: 2 / 4;
+        align-self: center;
+        justify-self: center;
+
+      }
+      &.icon--face-1{
+        grid-column: 4 / 7;
+        grid-row: 2 / 4;
+        justify-self: center;
+
+      }
+      &.icon--face-3{
+        grid-column: 7 / 10;
+        grid-row: 1 / 4;
+        align-self: center;
+      }
+      &.icon--ballon{
+        grid-column: 9 / 11;
+        grid-row: 3 / 5;
+
+      }
+      &.icon--bottle{
+        grid-row: 4 / -1;
+
+        &:nth-of-type(5) {
+          grid-column: 4 / 5;
+          align-self: center;
+        }
+        &:nth-of-type(6) {
+          grid-column: 5 / 6;
+        }
+        &:nth-of-type(7) {
+          grid-column: 6 / 7;
+          align-self: center;
+        }
+        &:nth-of-type(8) {
+          grid-column: 7 / 8;
+        }
+        &:nth-of-type(9){
+          grid-column: 8 / 9;
+          align-self: center;
+        }
+      }
+    }
+  }
 
-.outer {
-  margin: 1em;
 }
 
 h1 {
@@ -113,130 +321,63 @@ h1 {
     margin-bottom: 0;
 }
 
-.container{
-  display: flex;
-  flex-direction: column;
+.content-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  row-gap: 5em;
   
-  .header-and-notification{
-    display: flex;
-    flex-direction: row;
-    margin: auto;
+  .scroll-info {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+      grid-column: 2 / -2;
   }
 
-  .vipps-icon{
-    margin: 1em;
+  .chart-container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    grid-column: 2 / -2;
+  }
+  .total-bought {
+    grid-column: 2 / -2;
+  }
+
+  .highscore {
+    grid-column: 2 / -2;
+  }
+
+  .wines-container {
+    grid-column: 2 / -2;
+  }
+
+  .icon--arrow-long-right {
+    rotate: 90deg;
+    color: $link-color;
   }
 
   @include tablet {
-    margin: .5em;
-    .chart-container {
-      display: flex;
-      width: 100%;
-    }
 
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top"
-                         "top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top"
-                         "middle-bot-left middle-bot-left middle-bot-right"
-                         "bot-left bot-right bot-right";
-
-    .header-and-notification {
-      grid-area: top-top;
-    }
-
-    .to-lottery-container{
-      grid-area: top-bot;
+    .scroll-info{
+      grid-column: 3 / -3;
     }
 
     .chart-container {
-      grid-area: middle-top;
+      grid-column: 3 / -3;
+      flex-direction: row;
     }
 
     .total-bought {
-      grid-area: middle-bot-left;
+      grid-column: 3 / -3;
     }
 
     .highscore {
-      border-top: 1px solid rgb(237, 237, 237);
-      grid-area: bot-left;
-      align-self: baseline;
+      grid-column: 3 / -3;
     }
 
     .wines-container {
-      border-top: 1px solid rgb(237, 237, 237);
-      padding-left: 1em;
-      border-left: 1px solid rgb(237, 237, 237);
-      grid-area: bot-right;
-    }
-
-    .vipps-icon {
-      padding-left: 1em;
-      align-self: center;
-      grid-area: middle-bot-right;
-      border-left: 1px solid rgb(237, 237, 237);
-    }
-  }
-
-  @include desktop {
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: auto-flow min-content;
-    grid-template-areas: "top-top top-top top-top top-top"
-                         "top-bot top-bot top-bot top-bot"
-                         "middle-top middle-top middle-top middle-top"
-                         "middle-bot middle-bot middle-bot aside"
-                         "bot-left bot-right bot-right aside";
-    grid-gap: 1em;
-    align-items: center;
-
-    .header-and-notification {
-      grid-area: top-top;
-    }
-
-    .to-lottery-container {
-      grid-area: top-bot;
-    }
-
-    .chart-container {
-      grid-area: middle-top;
-    }
-
-    .total-bought {
-      grid-area: middle-bot;
-      border-bottom: 1px solid rgb(237, 237, 237);
-    }
-
-    .highscore {
-      border: none;
-      grid-area: bot-left;
-    }
-
-    .wines-container {
-      border: none;
-      grid-area: bot-right;
-    }
-
-    .vipps-icon {
-      grid-area: aside;
-      padding-left: 3em;
-      border-left: 1px solid rgb(237, 237, 237);
-    }
-  }
-  
-  @include widescreen {
-    width: 70%;
-    max-width: 1800px;
-    margin: auto;
-
-    .vipps-icon {
-      padding-left: 6em;
+      grid-column: 3 / -3;
     }
   }
 }
-
-
 </style>

src/styles/global.scss

@@ -296,6 +296,28 @@ textarea {
   }
 }
 
+@mixin raffle {
+  padding-bottom: 50px;
+  &::before, &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 25px;
+    height: 50px;
+    background: radial-gradient(closest-side, #fff, #fff 50%, transparent 50%);
+    background-size: 50px 50px;
+    background-position: 0 25px;
+    background-repeat: repeat-x;
+  }
+  &::after{
+    background: radial-gradient(closest-side, transparent, transparent 50%, #fff 50%);
+    background-size: 50px 50px;
+    background-position: 25px -25px;
+    bottom: -25px
+  }
+}
+
 .desktop-only {
   @include mobile {
     display: none;

src/ui/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-banner">
+  <header class="top-banner">
     <!-- Mobile -->
     <router-link to="/" class="company-logo">
       <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
@@ -26,7 +26,7 @@
       </h2>
       <h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2>
     </div>
-  </div>
+  </header>
 </template>
 
 <script>

src/ui/Footer.vue

@@ -0,0 +1,32 @@
+<template>
+  <footer>
+    <router-link to="/" class="company-logo">
+      <img src="/public/assets/images/knowit.svg" alt="knowit logo">
+    </router-link>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'WineFooter'
+}
+</script>
+
+<style lang="scss" scoped>
+
+footer {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background: #f4f4f4;
+  .company-logo{
+    padding: 0 5em 0 0;
+    img{
+      width: 100px;
+    }
+  }
+}
+
+</style>

src/ui/Highscore.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="highscores" v-if="highscore.length > 0">
-    <h3>
-      <router-link to="highscore">
-        Topp 10 vinnere <span class="vin-link">Se alle &gt;</span>
+
+    <section class="heading">
+      <h3>
+        Topp 5 vinnere
+      </h3>
+      <router-link to="highscore" class="">
+        <span class="vin-link">Se alle vinnere</span>
       </router-link>
-    </h3>
-    <ol>
-      <li v-for="person in highscore" :key="person">
-        <b>{{ person.rank }}.</b> {{ person.name }} - {{ person.wins.length }}
+    </section>
+    <ol class="winner-list-container">
+      <li v-for="(person, index) in highscore" :key="person._id" class="single-winner">
+        <span class="placement">{{index + 1}}.</span>
+        <i class="icon icon--medal"></i>
+        <p class="winner-name">{{ person.name }}</p>
       </li>
     </ol>
   </div>
@@ -24,7 +30,7 @@ export default {
   async mounted() {
     let response = await highscoreStatistics();
     response.sort((a, b) => a.wins.length < b.wins.length ? 1 : -1)
-    this.highscore = this.generateScoreBoard(response.slice(0, 10));
+    this.highscore = this.generateScoreBoard(response.slice(0, 5));
   },
   methods: {
     generateScoreBoard(highscore=this.highscore) {
@@ -48,43 +54,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
-div {
-  margin: 0;
-  font-family: Arial;
-  display: inline-flex;
-  flex-direction: column;
+@import "../styles/variables.scss";
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-h3 {
-  text-align: left;
+a {
+  text-decoration: none;
+  color: #333333;
 
-  & a {
+  &:focus,
+  &:active,
+  &:visited {
     text-decoration: none;
     color: #333333;
-
-    &:focus,
-    &:active,
-    &:visited {
-      text-decoration: none;
-      color: #333333;
-    }
   }
 }
 
 ol {
-  padding-left: 1.375rem !important;
+  list-style-type: none;
   margin-left: 0;
-  margin: 0 0 1.5em;
   padding: 0;
-  counter-reset: item;
-  & > li {
-    padding: 2.5px 0;
-    margin: 0 0 0 -1.25rem;
-    list-style-type: none;
+}
 
-    @include mobile {
-      padding: 5px 0;
+.winner-list-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
+  gap: 5%;
+
+  .single-winner {
+    box-sizing: border-box;
+    width: 100%;
+    background: $primary;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    padding: 1em; 
+
+    i {
+      font-size: 3em;
+      width: max-content;
+      justify-self: end;
+    }
+
+    .placement {
+      grid-row: 1;
+      grid-column: 1 / 3;
+      font-size: 3em;
+    }
+
+    .winner-name {
+      grid-row: 2;
+      grid-column: 1 / -1;
+    }
+
+
+    .winner-icon {
+      grid-row: 1;
+      grid-column: 3;
     }
   }
 }

src/ui/RaffleGenerator.vue

@@ -35,11 +35,10 @@
         type="number"
         placeholder="Antall lodd"
         @keyup.enter="generateColors"
-        v-model="numberOfBallots"
+        v-model="numberOfRaffles"
       />
       <button class="vin-button" @click="generateColors">Generer</button>
     </div>
-
     <div class="colors">
       <div
         v-for="color in colors"
@@ -69,7 +68,7 @@ export default {
   },
   data() {
     return {
-      numberOfBallots: 4,
+      numberOfRaffles: 4,
       colors: [],
       blue: 0,
       red: 0,
@@ -85,14 +84,14 @@ export default {
     };
   },
   beforeMount() {
-    this.$emit("numberOfBallots", this.numberOfBallots);
+    this.$emit("numberOfRaffles", this.numberOfRaffles);
     if (this.generateOnInit) {
       this.generateColors();
     }
   },
   watch: {
-    numberOfBallots: function() {
-      this.$emit("numberOfBallots", this.numberOfBallots);
+    numberOfRaffles: function() {
+      this.$emit("numberOfRaffles", this.numberOfRaffles);
       this.generateColors();
     }
   },
@@ -102,7 +101,7 @@ export default {
       if (time == 5) {
         this.generating = false;
         this.generated = true;
-        if (this.numberOfBallots > 1 &&
+        if (this.numberOfRaffles > 1 &&
           [this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) {
           return
         }
@@ -117,7 +116,7 @@ export default {
           return;
         }
         this.$ga.event({
-          eventCategory: "Ballots",
+          eventCategory: "Raffles",
           eventAction: "Generate",
           eventValue: JSON.stringify(this.colors)
         });
@@ -148,8 +147,8 @@ export default {
         alert("Du må velge MINST 1 farge");
         return;
       }
-      if (this.numberOfBallots > 0) {
-        for (let i = 0; i < this.numberOfBallots; i++) {
+      if (this.numberOfRaffles > 0) {
+        for (let i = 0; i < this.numberOfRaffles; i++) {
           let color =
             randomArray[Math.floor(Math.random() * randomArray.length)];
           this.colors.push(color);

src/ui/TotalBought.vue

@@ -1,6 +1,15 @@
 <template>
-  <div class="outer-bought">
+  <section class="outer-bought">
     <h3>Loddstatistikk</h3>
+
+    <div class="total-raffles">
+        Totalt&nbsp;
+        <span class="total">{{ total }}</span>
+        &nbsp;kjøpte og&nbsp;
+        <span>{{ totalWin }}&nbsp;vinn</span>
+    </div>
+
+
     <div class="bought-container">
       <div
         v-for="color in colors"
@@ -8,34 +17,19 @@
           color.name +
             '-container ' +
             color.name +
-            '-raffle inner-bought-container raffle-element'
+            '-raffle raffle-element-local'
         "
         :key="color.name"
-      >
-        <div class="number-container">
-          <span class="color-total bought-number-span">
-            {{ color.total }}
-          </span>
-          <span>kjøpte</span>
-        </div>
-        <div class="inner-text-container">
-          <div>{{ color.win }} vinn</div>
-          <div>{{ color.totalPercentage }}% vinn</div>
-        </div>
-      </div>
-
-      <div class="inner-bought-container total-raffles">
-        <div class="total-container">
-          Totalt&nbsp;
-          <div>
-            <span class="total">{{ total }}</span> kjøpte
-          </div>
-          <div>{{ totalWin }} vinn</div>
-          <div>{{ stolen }} stjålet</div>
-        </div>
+        >
+        <p class="winner-chance">
+          {{translate(color.name)}} vinnersjanse
+        </p>
+        <span class="win-percentage">{{ color.totalPercentage }}% </span>
+        <p class="total-bought-color">{{ color.total }} kjøpte</p>
+        <p class="amount-of-wins"> {{ color.win }} vinn </p>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 <script>
 import { colorStatistics } from "@/api";
@@ -60,11 +54,13 @@ export default {
   },
   async mounted() {
     let response = await colorStatistics();
+
     this.red = response.red;
     this.blue = response.blue;
     this.green = response.green;
     this.yellow = response.yellow;
     this.total = response.total;
+
     this.totalWin =
       this.red.win + this.yellow.win + this.blue.win + this.green.win;
     this.stolen = response.stolen;
@@ -114,119 +110,106 @@ export default {
     this.colors = this.colors.sort((a, b) => (a.win > b.win ? -1 : 1));
   },
   methods: {
+    translate(color){
+      switch(color) {
+        case "blue":
+          return "Blå"
+          break;
+        case "red":
+          return "Rød"
+          break;
+        case "green":
+          return "Grønn"
+          break;
+        case "yellow":
+          return "Gul"
+          break;
+        break;
+      }
+    },
     getPercentage: function(win, total) {
       return this.round(win == 0 ? 0 : (win / total) * 100);
     },
     round: function(number) {
-      return Math.round(number * 100) / 100;
+
+      //this can make the odds added together more than 100%, maybe rework?
+      let actualPercentage = Math.round(number * 100) / 100;
+      let rounded = actualPercentage.toFixed(0);
+      return rounded;
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
+@import "../styles/global.scss";
 
-.inner-bought-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.raffle-element {
-  width: 140px;
-  height: 150px;
-  margin: 20px 0;
-}
-
-.number-container {
-  display: flex;
-  align-items: flex-end;
-
-  & span:last-child {
-    padding-bottom: 5px;
-    padding-left: 5px;
-  }
-}
-
-.inner-text-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  // TODO fix styling for displaying in columns
-  @include mobile {
-    & div {
-      padding: 0 5px;
-    }
+@include mobile{
+  section {
+    margin-top: 5em;
   }
 }
 
 .total-raffles {
-  width: 150px;
-  height: 150px;
-  margin: 20px 0;
-}
-
-.total-container {
-  align-items: flex-start;
-}
-
-@include mobile {
-  .total-container {
-    > div:nth-of-type(2) {
-      margin-top: auto;
-      padding-bottom: 4px;
-      padding-left: 5px;
-    }
-  }
-}
-
-.bought-number-span {
-  display: inline-flex;
-}
-
-.outer-bought {
-  @include mobile {
-    padding: 0 20px;
-  }
+  display: flex;
 }
 
 .bought-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  padding-bottom: 3rem;
-  max-width: 1400px;
-  margin: auto;
-  justify-content: space-between;
-  font-family: Arial;
+  margin-top: 2em;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 50px;
 
-  @include mobile {
-    padding-bottom: 0px;
-  }
-}
+  .raffle-element-local {
+    height: 250px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    @include raffle;
+    
+    .win-percentage {
+      margin-left: 30px;
+      font-size: 50px;
+    }
 
-.color-total,
-.total {
-  font-size: 2rem;
-  font-weight: bold;
-}
+    p {
+      margin-left: 30px;
+      &.winner-chance {
+        margin-top: 40px;
+      }
 
-.small {
-  font-weight: bold;
-  font-size: 1.25rem;
-  display: inline-block;
-}
+      &.total-bought-color{
+        font-weight: bold;
+        margin-top: 25px;
+      }
 
-@include mobile {
-  .bought-container {
-    flex-wrap: wrap;
+      &.amount-of-wins {
+        font-weight: bold;
+      }
+    }
+
+    h3 {
+      margin-left: 15px;
+    }
+
+    &.green-raffle {
+      background-color: $light-green;
+    }
+
+    &.blue-raffle {
+      background-color: $light-blue;
+    }
+
+    &.yellow-raffle {
+      background-color: $light-yellow;
+    }
+
+    &.red-raffle {
+      background-color: $light-red;
+    }
   }
 }
 </style>

src/ui/Wine.vue

@@ -10,8 +10,8 @@
     </div>
 
     <div class="wine-details">
-      <h2 v-if="wine.name">{{ wine.name }}</h2>
-      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }} rating</span>
+      <span v-if="wine.name" class="wine-name">{{ wine.name }}</span>
+      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }}</span>
       <span v-if="wine.price"><b>Pris:</b> {{ wine.price }} NOK</span>
       <span v-if="wine.country"><b>Land:</b> {{ wine.country }}</span>
     </div>
@@ -66,8 +66,8 @@ export default {
 @import "./src/styles/variables";
 
 .wine {
-  padding: 2rem;
-  margin: 1rem 0rem;
+  padding: 1rem;
+  box-sizing: border-box;
   position: relative;
   -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
@@ -76,13 +76,13 @@ export default {
   @include tablet {
     width: 250px;
     height: 100%;
-    margin: 1rem 2rem;
   }
 }
 
 .wine-image {
   display: flex;
   justify-content: center;
+  margin-top: 10px;
 
   img {
     height: 250px;
@@ -97,6 +97,7 @@ export default {
   }
 }
 
+
 .wine-details {
   display: flex;
   flex-direction: column;
@@ -106,6 +107,11 @@ export default {
   }
 }
 
+.wine-name{
+  font-size: 20px;
+  margin: 1em 0;
+}
+
 .wine-details {
   display: flex;
   flex-direction: column;

src/ui/Wines.vue

@@ -1,21 +1,25 @@
 <template>
-  <div v-if="wines.length > 0">
-    <h3>
-      <router-link to="viner"
-        >Topp 10 viner <span class="vin-link">Se alle &gt;</span></router-link
-      >
-    </h3>
-    <ol class="list-container">
-      <li v-for="(wine, index) in wines" :key="wine" class="single-item">
-        <span class="wine-occurences">{{ index + 1}}.</span>
-        <span class="wine-name">{{ wine.name }}</span>
-        <span class="wine-win-info"> {{ wine.occurences }} {{amount(wine.occurences)}}</span>
-        <a
-          class="wine-link"
-          :href="wine.vivinoLink"
-          >Les mer</a>
-      </li>
-    </ol>
+  <div v-if="wines.length > 0" class="wines-main-container">
+    <div class="info-and-link">
+      <h3>
+        Topp 5 viner
+      </h3>
+      <router-link to="viner">
+        <span class="vin-link">Se alle viner </span>
+      </router-link>
+    </div>
+    <div class="wine-container">
+      <Wine v-for="wine in wines" :key="wine" :wine="wine">
+        <template v-slot:top>
+          <div class="flex justify-end">
+            <div class="requested-count cursor-pointer">
+              <span> {{ wine.occurences }} </span>
+              <i class="icon icon--heart" />
+            </div>
+          </div>
+        </template>
+      </Wine>
+    </div>
   </div>
 </template>
 
@@ -29,7 +33,10 @@ export default {
     Wine
   },
   data() {
-    return { wines: [], clickedWine: null, wineOpen: false };
+    return { 
+      wines: [], 
+      clickedWine: null, 
+    };
   },
   async mounted() {
     let response = await overallWineStatistics();
@@ -49,12 +56,9 @@ export default {
           }
         )
       );
-    this.wines = response.slice(0, 10);
+    this.wines = response.slice(0, 5);
   },
   methods: {
-    amount(occurences){
-      return occurences > 1 ? "ganger" : "gang";
-    },
     predicate: function() {
       var fields = [],
         n_fields = arguments.length,
@@ -124,40 +128,40 @@ export default {
 @import "./src/styles/global.scss";
 @import "../styles/media-queries.scss";
 
-h3 {
-  & a {
-    text-decoration: none;
-    color: #333333;
-  }
+.wines-main-container {
+  margin-bottom: 10em;
 }
 
-.list-container{
+.info-and-link{
+  display: flex;
+  justify-content: space-between;
+}
+
+.wine-container {
   display: grid;
-  grid: auto-flow min-content / 1fr;
-  row-gap: 5px;
-  padding: 0; 
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 2rem;
 
-  .single-item{
-    display: grid;
-    grid: 1fr / .1fr 1fr .3fr .3fr;
+  .requested-count {
+    display: flex;
+    align-items: center;
+    margin-top: -0.5rem;
+    background-color: rgb(244,244,244);
+    border-radius: 1.1rem;
+    padding: 0.25rem 1rem;
+    font-size: 1.25em;
 
-    .wine-occurences{
-      font-weight: bold;
+    span {
+      padding-right: 0.5rem;
+      line-height: 1.25em;
     }
-
-    .wine-name{
-      display: inline-block;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .wine-link {
-      color: #333333;
-      text-decoration: underline 1px solid $link-color;
-      font-weight: bold;
-      cursor: pointer;
+    .icon--heart{
+      font-size: 1.5rem;
+      color: $link-color;
     }
   }
 }
+
+
+
 </style>