www-new/components/playground.module.css

94 lines
1.5 KiB
CSS

.miniEventCardDemo > *:nth-child(odd) {
background: #e1eefa;
}
.newsDemo {
padding: 50px;
background-color: var(--off-white);
display: inline-block;
}
.newsTitle {
font-style: normal;
font-weight: bold;
color: var(--purple-2);
font-size: 24px;
line-height: 36px;
margin-bottom: 14px;
}
.newsDesc {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 21px;
white-space: pre-line;
color: var(--purple-2);
vertical-align: baseline;
}
.news > hr {
border: none;
height: 1px;
background-color: var(--purple-2);
margin: 0 0 13px 0;
}
.eventDescriptionCardDemo {
padding: 50px 0;
background-color: var(--off-white);
display: inline-block;
}
.eventDescriptionCardDemo > * {
margin: 12px 50px;
}
.eventDescriptionCardDemo > *:first-child {
margin-top: 0;
}
.eventDescriptionCardDemo > *:last-child {
margin-bottom: 0;
}
.teamMemberDemo {
padding: 10px 50px 30px 50px;
max-width: 847px;
}
.committee {
margin: 0;
color: var(--purple-2);
font-weight: 600;
font-size: 24px;
line-height: 36px;
}
.teamMemberDemo > hr {
border: none;
height: 1px;
background-color: var(--blue-2);
width: 100%;
margin-top: 24px;
margin-bottom: 46px;
}
.teamMembers {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
row-gap: 2.6875rem;
column-gap: 3.3125rem;
}
@media only screen and (max-width: 768px) {
.newsDemo,
.eventDescriptionCardDemo {
background-color: #e1eefa;
}
.eventDescriptionCardDemo > * {
margin: 50px;
}
}