Fixed the responsiveness

src/Components/TopicCard.js

-import React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components'
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState } from 'react';
 import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import { Link } from 'react-router-dom';
+
+export default function MaterialCard(props) {
+    console.log(props);
+    const [expanded, setExpanded] = useState(false);
 
-export default function TopicCard(props) {
-  return (	
-		<CardModel>
-			<StyledLink to={"topico?colecao="+props.colecao_id+"&topico="+props.topico_obj.id}>
-				<CardImage src={require(`../../public/${props.topico_obj.img}`)}/>
-				<Title>
-					<BoldTitle>
-						{ props.topico_obj.pre_title }
-					</BoldTitle>
-					{ props.topico_obj.title } 
-				</Title>
-				<StyledCardActions>
-					<StyledLink to={"topico?colecao="+props.colecao_id+"&topico="+props.topico_obj.id}>
-						<Red><strong>Ver mais</strong></Red>
-					</StyledLink>
-				</StyledCardActions>
-			</StyledLink>
-		</CardModel>
-  );
+    const thumb = require(`../../public/${props.topic.img}`)
+
+    return (
+        <Card style={{ maxHeight: "100%", maxWidth: "300px" }}>
+            <img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" />
+            <CardContent style={{ height: "50px" }}>
+                <Title>
+                    <BoldTitle>
+                        {props.topic.pre_title}
+                    </BoldTitle>
+                    {props.topic.title}
+                </Title>
+            </CardContent>
+            <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+                <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
+                    <Button
+                        color="secondary"
+                    >
+                        Ver módulos
+                    </Button>
+                </StyledLink>
+            </CardActions>
+        </Card >
+    )
 }
 
-const Title=styled.h1`
-	font-weight: 500;
+const SizedBox = styled.div`
+  width : 5px;
+`
+const Title = styled(Typography)`
+    font-weight: 500;
 	color: rgb(102, 102, 102);
 	font-size: 0.9em;
 	margin-left: 10px;
 	margin-right: 10px;
 
 	display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`
-const CardModel=styled(Card)`
-	position: relative;
-	margin-bottom: 30px;
-	padding: 0;
-	height: 270px;
-`
-const CardImage=styled.img`
-	width: 100%;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 `
-const BoldTitle=styled.span`
+const BoldTitle = styled.span`
 	font-weight: bold;
 `
-const StyledLink=styled(Link)`
+const StyledLink = styled(Link)`
 	text-decoration: none !important;
 	color: inherit !important;
-`
-const Red=styled.span`
-	color: #e81f4f;
-	font-size: 14px;
-`
-const StyledCardActions=styled(CardActions)`
-	position: absolute;
-	padding: 10px;
-	left: 0;
-	bottom: 0;
-`
+`
\ No newline at end of file