video 5

1 files changed, 39 insertions, 0 deletions

diff --git a/stepped-solutions/05/frontend/components/styles/ItemStyles.js b/stepped-solutions/05/frontend/components/styles/ItemStyles.js
new file mode 100644
index 0000000..b117d5f
--- /dev/null
+++ b/stepped-solutions/05/frontend/components/styles/ItemStyles.js
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const Item = styled.div`
+  background: white;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+  }
+  p {
+    font-size: 12px;
+    line-height: 2;
+    font-weight: 300;
+    flex-grow: 1;
+    padding: 0 3rem;
+    font-size: 1.5rem;
+  }
+  .buttonList {
+    display: grid;
+    width: 100%;
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-gap: 1px;
+    background: ${props => props.theme.lightgrey};
+    & > * {
+      background: white;
+      border: 0;
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+`;
+
+export default Item;