Initial commit

src/css/cases.css

@@ -0,0 +1,52 @@
+.cases {
+  padding: var(--section-gap) 0;
+  background-color: var(--color-dark);
+  color: var(--color-white);
+}
+
+.cases__heading {
+  margin-bottom: 60px;
+}
+
+.cases__grid {
+  row-gap: var(--grid-gutter);
+}
+
+.cases__tile {
+  display: grid;
+  grid-template: 1fr / 1fr;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.cases__tile-image {
+  grid-area: 1 / 1;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  transition: transform 0.4s ease;
+}
+
+.cases__tile:hover .cases__tile-image {
+  transform: scale(1.03);
+}
+
+.cases__tile-title {
+  grid-area: 1 / 1;
+  align-self: end;
+  padding: 24px;
+  color: var(--color-white);
+  mix-blend-mode: difference;
+  z-index: 1;
+  line-height: 1.2;
+}
+
+@media (max-width: 768px) {
+  .cases__heading {
+    margin-bottom: 32px;
+  }
+
+  .cases__tile-title {
+    padding: 16px;
+    font-size: 16px;
+  }
+}