<div id="root"></div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
@import "https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 100%;
  letter-spacing: 0.1rem;
  color: #fff;
  padding: 2vh;
}

.card__container {
  gap: 2vmin;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
}

.card {
  box-shadow: 0 0 3rem -1rem rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s;
}

.card:nth-child(1) {
  grid-column: span 2;
}

.card:nth-child(6) {
  grid-column: span 3;
}

.card:hover {
  transform: translateY(-0.5rem) scale(1.0125);
  box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
}

.card__object {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  height: 300px;
  position: relative;
}

.card__object img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}

.card__body {
  padding: 1em 0.5em;
  color: #515151;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card__title {
  margin: 0 0 0.5em;
  font-size: 2rem;
}

const Card = (props) => {
  const { imgUrl, imgDes, cardTitle, cardDes } = props;
  return (
    <li className="card">
      <div className="card__object">
        <img src={props.imgUrl} alt={props.imgDes} />
      </div>
      <div className="card__body">
        <h4 className="card__title">{props.cardTitle}</h4>
        <p>{props.cardDes}</p>
      </div>
    </li>
  );
};

const CardData = [
  {
    imgUrl: "//source.unsplash.com/300x300?01",
    imgDes: "Psychopomp",
    cardTitle: "Psychopomp",
    cardDes: "Japanese Breakfast"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?02",
    imgDes: "let us go",
    cardTitle: "let us go",
    cardDes: "Japanese Breakfast"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?03",
    imgDes: "The Beautiful Game",
    cardTitle: "The Beautiful Game",
    cardDes: "Vulfpeck"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?04",
    imgDes: "Jane Doe",
    cardTitle: "Jane Doe",
    cardDes: "Converge"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?05",
    imgDes: "Recipe",
    cardTitle: "Recipe",
    cardDes: "Crisp Spanish tortilla Matzo brei"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?05",
    imgDes: "Travel",
    cardTitle: "Travel",
    cardDes: "Discover the seab"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?06",
    imgDes: "Princess Mononoke",
    cardTitle: "Princess Mononoke",
    cardDes: "Discover the seab"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?07",
    imgDes: "Princess Mononoke",
    cardTitle: "Discover Mononoke",
    cardDes: "Discover the seab"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?08",
    imgDes: "Princess Mononoke",
    cardTitle: "Mononoke",
    cardDes: "Discover the seab"
  },
  {
    imgUrl: "//source.unsplash.com/300x300?09",
    imgDes: "Princess Mononoke",
    cardTitle: "Discover Mononoke",
    cardDes: "Discover the seab"
  }
];

const App = () => {
  const CardItem = CardData.map((item, index) => (
    <Card
      imgUrl={item.imgUrl}
      imgDes={item.imgDes}
      cardTitle={item.cardTitle}
      cardDes={item.cardDes}
      key={index}
    />
  ));
  return <ul className="card__container">{CardItem}</ul>;
};

function render() {
  ReactDOM.render(<App />, document.getElementById("root"));
}

render();