.allocation__label, .allocation__explanation { color: var(--color-fontsec); font-style: italic; } .allocation__courses { margin-top: 20px; } .allocation-course { display: grid; grid-template-columns: 140px 1fr; grid-template-areas: '. name ' 'prio-label prio ' 'instr-label instr ' 'form-label form '; grid-gap: 5px 7px; padding: 12px 10px; &:last-child { padding: 12px 10px 0 10px; } & + .allocation-course { border-top: 1px solid var(--color-grey); } .allocation-course__priority { grid-area: prio; } .allocation-course__priority-label { grid-area: prio-label; justify-self: end; align-self: center; text-align: right; } .allocation-course__name { grid-area: name; align-self: center; font-size: 1.2rem; } .allocation-course__instructions { grid-area: instr; } .allocation-course__instructions-label { grid-area: instr-label; justify-self: end; text-align: right; } .allocation-course__application { grid-area: form; } .allocation-course__application-label { grid-area: form-label; justify-self: end; text-align: right; padding-top: 6px; } } @media (max-width: 426px) { .allocation-course { grid-template-columns: 1fr; grid-template-areas: 'name ' 'prio-label ' 'prio ' 'instr-label' 'instr ' 'form-label ' 'form '; } .allocation-course__application-label { padding-top: 0; } }