first commit

assets/css/template/shop/_layout.scss

@@ -0,0 +1,84 @@
+[data-template="store"] {
+  main {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .p__baseline-big {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  #store__container {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 4);
+    width: 100%;
+    max-width: 1000px;
+
+    .store__product {
+      position: relative;
+      figure {
+        aspect-ratio: 4/3;
+        background-color: var(--color-bg);
+        background-color: var(--data-bg);
+        margin-bottom: calc(var(--spacing) * 0.5);
+        overflow: hidden;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transition: var(--curve) 0.5s;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      .link-block {
+        display: block;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+      }
+
+      &:hover {
+        figure {
+          overflow: hidden;
+        }
+        img {
+          transform: scale(1.05);
+        }
+
+        .line-1 {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    @media #{$small} {
+      .store__product {
+        margin-top: calc(var(--spacing) * 1.5);
+        margin-bottom: calc(var(--spacing) * 0.5);
+      }
+    }
+
+    @media #{$small-up} {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: calc(var(--padding-body) * 0.75);
+      row-gap: calc(var(--spacing) * 2);
+      margin-left: auto;
+      margin-right: auto;
+
+      .store__product {
+        grid-column: span 2;
+      }
+      .store__product:nth-of-type(1),
+      .store__product:nth-of-type(2) {
+        grid-column: span 3;
+      }
+    }
+  }
+}