#course-select-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.course-tile {
    position: relative;
    display: inline-block;
    margin: 1rem;
    padding: 1rem;
    border: 2px solid var(--color-main);
    border-radius: 1rem;
    font-size: 1.5rem;
    width: 18rem;
    height: 8rem;
    background-color: color-mix(in srgb, var(--color-1) 50%, var(--color-bg));
}

.course-tile:not(.locked) {
    cursor: pointer;
}

.course-tile.locked {
    color: color-mix(in srgb, var(--color-main) 50%, var(--color-bg));
    background-color: color-mix(in srgb, var(--color-1) 20%, var(--color-bg));
    pointer-events: none;
}

.course-tile.locked::after {
    content: url("/assets/lock.svg");
    scale: 500%;
    position: absolute;
    left: calc(50% - 7px);
    top: calc(50% - 7px);
    opacity: 20%;
}