@layer page{main{ #career-form { display: grid; grid-template-columns: 1fr; border: 2px solid var(--color-blackish); background-color: rgb(245, 245, 245); border-radius: 10px; padding: var(--size-2); form { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-3) var(--size-6); min-height: 0; > * { display: flex; flex-direction: column; gap: var(--size-1); grid-column: span 4; &.quarter { grid-column: span 1; } &.half { grid-column: span 2; } } .required::after { content: "*"; margin-inline-start: 5px; font-size: var(--text-sm); color: rgb(224, 16, 32); } .optional::after { content: "(optional)"; margin-inline-start: 5px; font-size: var(--text-sm); color: gray; } input, select { width: 100%; margin: 0; max-width: 100%; } } } .split { display: grid; grid-template-columns: 1fr; @media (width >= 48em) { grid-template-columns: 1fr 1fr; } gap: var(--size-6); .cards { margin: 0; } } div.cards { align-items: start; } .message { font-weight: bold; text-align: center; margin: 0; padding: var(--size-2); }}}