Tilbudsavis

src/components/GroceryOffers.vue

+<template>
+    <div>
+        <h2>Tilbudaviser</h2>
+    </div>
+
+  <div id="list">
+      <ul>
+          <li>
+              <a href="https://etilbudsavis.no/REMA-1000"  target="_blank" rel="noopener noreferrer">
+              <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2F9tf8gmfaGBLcbjK3rhBlW&w=300&sign=Zq9DkNZRVTrnWUEb8C9driKqS1InuTFi_5b1XbIKTnM" alt="Rema 1000 logo"></a>
+          </li>
+          <li>
+              <a href="https://etilbudsavis.no/KIWI"  target="_blank" rel="noopener noreferrer">
+              <img src = "https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FG3XDq4dn6xRNyk-1gOZgb&w=300&sign=HIt49jOaHo0lFALYmhFwY3UWt8zkPkVtVkLaCVxVcE0" alt="Kiwi logo"></a></li>
+          <li>
+              <a href="https://etilbudsavis.no/Bunnpris/" target="_blank" rel="noopener noreferrer">
+                  <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fetaproduction%2Fimg%2Flogo%2Fpageflip%2F00ibuh349ezgcwz3.png&w=300&sign=ryffYtZjdRMOoL63Nm5VY4YoigiOMaI5Lgrnb0hZhkE"  alt="Bunnpris logo"></a></li>
+          <li>
+              <a href="https://etilbudsavis.no/MENY/" target="_blank" rel="noopener noreferrer">
+                  <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FgMULu5EGk-l57npG294B7&w=300&sign=hMQoYjgxL7F0XlPGCoZJXny-him1emA8RMoO-5W3lXU" alt="Meny logo"></a></li>
+          <li>
+              <a href="https://etilbudsavis.no/Coop-Mega/" target="_blank" rel="noopener noreferrer">
+                  <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2Fk5LYCCJcujAJedeFOFRaj&w=300&sign=Gb0VlcY80QDtjFUs50oOOMPGhwUCOPVzBQ4bw2HpQ0Q" alt="Coop mega logo"></a></li>
+        <li>
+          <a href="https://etilbudsavis.no/Coop-Extra" target="_blank" rel="noopener noreferrer">
+            <img src="https://d1r8abvi6c1fdj.cloudfront.net/media?url=s3%3A%2F%2Fsgn-prd-assets%2Fuploads%2FnmLKqrg-wVDfXHyI_iS9D&w=300&sign=AaqQeyqkDZi_3r4xWetXNNTGRvvz3w74jexExHFhjBA" alt="Coop extra logo">
+          </a>
+        </li>
+      </ul>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "GroceryOffers"
+}
+</script>
+
+<style scoped lang="scss">
+div {
+    display: flex;
+    justify-content: center;
+}
+
+h3{
+    padding-top:1em;
+}
+
+li{
+    padding:1em;
+}
+
+img{
+    width: 10em;
+}
+
+ul {
+
+    padding:0;
+    text-align: center;
+    list-style-type: none;
+
+    width: 100%;
+}
+
+@media (min-width: 800px){
+  ul{
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+
+  li {
+      padding:0.3em;
+      align-items: center;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+  }
+
+}
+</style>
\ No newline at end of file