feature: add working light theme to itemtile

* feature: add working light theme to ItemTile

* fix: responsive of the component

src/components/ItemTile/ItemTile.js

@@ -1,9 +1,17 @@
 import { graphql, useStaticQuery } from 'gatsby';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useContext } from 'react';
 
-import { container, content, image, text, title } from './ItemTile.module.scss';
+import { ThemeContext } from '../../context/ThemeContex';
+import {
+  container,
+  content,
+  darkContainer,
+  image,
+  text,
+  title,
+} from './ItemTile.module.scss';
 
 export const ItemTile = ({
   itemTitle,
@@ -39,9 +47,10 @@ export const ItemTile = ({
   );
 
   const imageSrc = getImage(matchedImage);
+  const { theme } = useContext(ThemeContext);
 
   return (
-    <div className={container}>
+    <div className={theme(container, darkContainer)}>
       <GatsbyImage image={imageSrc} alt={itemImageAlt} className={image} />
       <div className={content}>
         <div className={title}>{itemTitle}</div>

src/components/ItemTile/ItemTile.module.scss

@@ -2,28 +2,32 @@
 
 .container {
   display: flex;
-  width: 374px;
+  max-width: 374px;
   opacity: 0.9;
-  background-color: $black_100_35;
+  background-color: $white_100_35;
   border-radius: 10px;
   flex-direction: column;
   align-items: center;
+  margin: 0px 8px;
 }
 .image {
   margin: 4px 4px 0px 4px;
-  width: 366px;
+  max-width: 366px;
   height: 245px;
   border-radius: 10px 10px 0px 0px;
   -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 .content {
-  width: 326px;
+  align-self: flex-start;
+  max-width: 326px;
   height: 219px;
   overflow-y: hidden;
-  color: $white;
+  color: $black;
+  padding: 0px 24px;
   margin-bottom: 32px;
+  box-sizing: content-box;
 }
 .title {
   font-size: 20px;
@@ -37,3 +41,10 @@
   line-height: 19.36px;
   margin-top: 15px;
 }
+.darkContainer {
+  background-color: $black_100_35;
+
+  .content {
+    color: $white;
+  }
+}