blocks/case-studies/card/case-studies-card.module.css (70 lines of code) (raw):
.card {
border-radius: 16px;
overflow: hidden;
border: 1px solid;
&.classic {
background: #fff;
border-color:rgb(0, 0, 0, 0.8);
}
&.rock {
background: #19191C;
border-color: rgb(255, 255, 255, 0.20);
}
}
.content {
display: flex;
flex-direction: column;
padding: 32px;
gap: 24px;
@media (width <= 616px) {
padding: 24px;
}
}
.logos {
display: flex;
align-items: center;
gap: 32px;
}
.logo {
width: auto;
height: auto;
max-height: 64px;
object-fit: contain;
}
.mediaImage {
display: block;
width: 100%;
height: auto;
}
.description {
& h2 {
margin-top: 0;
margin-bottom: 24px;
font-size: 35px;
line-height: 42px;
font-weight: 600;
}
& p {
margin-top: 0;
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
}
.name {
font-weight: 600;
}
.platforms {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
height: 24px;
margin-left: -2px; /* visual compensation */
}
.link {
display: inline-block;
align-self: flex-start;
--_rs-typography-link-after-margin-left-final: 4px;
}