:root {
--primary: #2b6cb0;
--text: #1a202c;
--gray: #4a5568;
--light: #f7fafc;
--border: #e2e8f0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
background: var(--light);
color: var(--text);
line-height: 1.6;
padding: 2rem 1rem;
}
.container {
max-width: 900px;
margin: 0 auto;
}
h1 {
font-size: 2.2rem;
color: var(--primary);
text-align: center;
margin-bottom: 2rem;
}
.schedule {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.day {
border-left: 4px solid var(--primary);
padding-left: 1.5rem;
}
.day-header {
font-size: 2rem;
font-weight: 600;
margin-bottom: 0.6rem;
color: var(--text);
}
.pre-header {
color: red;
}
.sessions {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.session {
font-size: 1.5rem;
}
.time {
font-weight: 600;
color: var(--primary);
margin-right: 0.6rem;
}
.note {
font-size: 0.95rem;
color: var(--gray);
font-style: italic;
margin-top: 0.25rem;
display: block;
}
@media (min-width: 768px) {
.schedule {
display: grid;
grid-tp-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem 1.5rem;
}
.day {
border-left: none;
border-top: 4px solid var(--primary);
padding-left: 0;
padding-top: 0.9rem;
}
}
@media (max-width: 500px) {
h1 { font-size: 1.55rem; }
.day-header { font-size: 1.2rem; }
}