:root {
--primary-color: #635bff;
--secondary: #0a2540;
}
body {
display: flex;
width: 100%;
padding-top: 180px;
font-family: "sohne-var",
"Helvetica Neue","Arial",
sans-serif;
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
max-width: 90%;
gap: 16px;
}
.content {
padding: 24px;
flex-grow: 1;
height: 260px;
}
.card {
display: flex;
flex-direction: column;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0px 18px 36px -18px
rgba(0,0,0,0.1),
0px 30px 45px -30px rgba(50,50,93,0.25);
background-color: white;
cursor: pointer;
width: 100%;
flex-basis: 330px;
padding: 4px;
min-height: 500px;
transition: all 0.2s ease-in-out;
}
.content > h1 {
font-size: 32px;
margin-bottom: 16px;
line-height: 1.384615385;
}
.content > p {
font-size: 18px;
line-height: 1.55;
font-weight: 500;
}
.content a {
color: var(--primary-color);
text-decoration: none;
font-weight: 800;
}
.content a:hover {
color: #0a2540;
}
.card-background {
height: 200px;
transition: all 0.2s ease-in-out;
}
.card:hover .card-background {
height: 160px;
}
.card-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card:hover .action-bottom-bar a {
opacity: 1;
}
.action-bottom-bar {
display: flex;
font-size: 18px;
height: 42px;
width: 100%;
}
.action-bottom-bar a {
display: flex;
gap: 6px;
color: var(--primary-color);
text-decoration: none;
font-weight: 800;
opacity: 0;
padding: 0 24px;
transition: all 0.2s ease-in-out;
}
.action-bottom-bar a:hover {
color: var(--secondary);
}
.action-bottom-bar a:hover svg {
color: var(--secondary);
}
.action-bottom-bar a svg {
transition: all 0.2s ease-in-out;
}
.arrow {
display: none;
}
.action-bottom-bar a:hover .arrow {
display: block;
}
.action-bottom-bar a:hover .chevron {
display: none;
}