.subject-block {
    padding: .75rem var(--padding-right) .5rem var(--padding-left);
    border-bottom: 1px solid var(--color-blue);
    overflow: hidden;
    cursor: pointer;
    transition: height 500ms ease-in-out;
}

.subject-block.active {
    background-color: var(--color-blue);
}

.subject-block.active * {
    color: var(--color-white);
}

.subject-block--title__details > * {
    margin-top: .5rem;
    grid-column: span 2;
}

.subject-block--description {
    padding: 1rem 0;
}

.subject-block--description > a {
    margin: 1rem 0 0 -.25rem;
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .subject-block--title__details > * {
        grid-column: span 1;
    }
}

@media (hover: hover) {
    .subject-block:hover {
        background-color: var(--color-blue);
    }

    .subject-block:hover * {
        color: var(--color-white);
    }

    .subject-block--description > a:hover {
        background-color: var(--color-white);
        border: 1px solid var(--color-blue);
        color: var(--color-blue) !important;
    }
}