.event { margin: 0 auto; max-width: 700px; } .event-header { line-height: normal; height: 450px; max-width: 700px; } .event-image { height: 300px; width: 100%; max-width: 700px; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #D4D4D4; } .event-date { height: 150px; width: 150px; padding-left: 20px; float: left; background-color: #2d4d88; color: white; } .event-date-day { font-size: 64px; font-weight: bold; } .event-date-month { font-size: 26px; } /* On September, November, December */ .event-date-month[data-month-index="8"], .event-date-month[data-month-index="10"], .event-date-month[data-month-index="11"] { font-size: 23px; } .event-info { float: left; width: calc(100% - 150px); max-width: 550px; padding: 20px; font-size: 36px; height: 150px; background-color: #EEEEEE; color: #2d4d88; } .event-time { font-size: 16px; } .event-text { width: 100%; max-width: 700px; min-height: 150px; margin: 10px 0; color: #2d4d88; background-color: #EEE; } .event-text-header { font-size: 19px; border-bottom: 1px solid #D4D4D4; padding: 10px 20px; } .event-text-content { padding: 20px; color: #505050; } .event-error { padding: 50px 0; } @media (max-width: 520px) { .event-header { height: 350px; } .event-image { height: 200px; } .event-date { display: none; } .event-info { border-top: 5px solid #2d4d88; width: 100%; } }