www-new/components/EventCard.module.css

132 lines
1.9 KiB
CSS

.card {
display: flex;
flex-direction: row;
box-sizing: border-box;
padding: calc(20rem / 16) 0;
}
.card aside {
flex: 0 0 calc(144rem / 16);
margin-right: calc(24rem / 16);
}
.card aside img {
width: 100%;
}
.registerButton {
margin-top: 1rem;
font-weight: bold;
}
.registerButtonWithPoster {
display: block;
}
.content > h1 {
font-size: calc(24rem / 16);
font-weight: 700;
font-style: normal;
margin-top: 0;
margin-bottom: 0;
}
.content > h1 a {
color: var(--primary-heading);
}
.content,
.content > h2 {
font-weight: 400;
font-style: normal;
margin-top: 0;
margin-bottom: 0;
}
.content > h2 {
color: var(--primary-heading);
font-size: 1rem;
margin-bottom: calc(14rem / 16);
}
.mobileLearnMore {
display: none;
}
.children h1,
.children h2,
.children h3,
.children h4 {
font-size: 1rem;
margin-top: calc(24rem / 16);
margin-bottom: calc(8rem / 16);
}
@media only screen and (max-width: calc(768rem / 16)) {
.card {
flex-direction: column;
}
.card aside {
margin: 0 auto;
max-width: calc(300rem / 16);
}
.card aside img {
box-sizing: border-box;
border: calc(1rem / 16) solid var(--text);
}
.content {
margin-top: 1rem;
}
.content {
text-align: center;
}
.content > h1,
.content > h2 {
font-size: 1rem;
line-height: calc(30 / 16);
}
.content > h2 {
margin-bottom: 0;
}
.mobileShowDescriptionContent {
text-align: unset;
}
.mobileShowDescriptionContent > h1 {
font-size: calc(24rem / 16);
margin-bottom: calc(8rem / 16);
}
.registerButton {
display: block;
}
.mobileLearnMore {
display: unset;
}
.mobileShowDescriptionContent .mobileLearnMore {
display: none;
}
.children {
display: none;
}
.children ul,
.children ol {
padding-left: 1rem;
}
.mobileShowDescriptionContent .children {
display: unset;
}
}