header {
    background-color: var(--md-sys-color-surface);
    min-height: 5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    header {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }
}

main {
    padding: 1rem 5rem 1rem 1rem;
}

@media (max-width: 768px) {
    main {
        padding: 1rem;
    }
}

#main_content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.course {
    display: flex;
    gap: 1rem;
}

.course > img {
    width: 15rem;
    height: 15rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 1.5rem;
    box-sizing: border-box;
    border: 0.4rem solid black;
}

@media (max-width: 768px) {
    .course {
        flex-direction: row-reverse;
        gap: 0.5rem;
    }
    .course > img {
        width: 5rem;
        height: 5rem;
        border-width: 0.2rem;
        border-radius: 0.5rem;
    }
}

[data-theme="dark"] .course > img {
    filter: invert(1);
}

.course > div {
    display: grid;
    grid-template-rows: min-content min-content auto min-content;

    h2 {
        margin: 0;
    }

    span {
        font-style: italic;
    }

    md-filled-button {
        width: min-content;
    }
}

@media (max-width: 768px) {
    .course > div {
        grid-template-rows: repeat(4, auto);

        p {
            text-align: justify;
        }
    }
}