src/client/styles/Trending.scss
.Trending-container {
width: 70%;
margin-top: 2rem;
display: flex;
align-items: stretch;
> div {
flex-basis: 50%;
& + div {
margin-left: 1rem;
}
}
@media screen and (max-width: 1000px) {
flex-direction: column;
> div {
& + div {
margin-top: 0.5rem;
margin-left: 0;
}
}
}
}
.Trending {
padding: 1rem;
background: white;
border: 1px solid #E6E6E6;
cursor: pointer;
height: 7rem;
display: flex;
position: relative;
color: rgba(0, 0, 0, .6);
.Pic {
margin-right: 1rem;
img {
width: 2rem;
}
}
.Title {
font-weight: bold;
}
.Desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 20rem;
}
.Infos {
color: #B2B2B2;
margin-top: auto;
}
&:hover {
color: rgba(0, 0, 0, .8);
}
& + .Trending {
margin-top: 0.5rem;
}
}