.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; } }