.pg-subjects-block {
    width: 100%;
}

.pg-subjects-block > h4 {
    border-bottom: 1px solid var(--color-blue);
    padding-bottom: 1rem;
    max-width: unset;
}

li {
    list-style:none;
}

.macro-overflow {
    display: flex;
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-blue);
}

.macro-overflow > div {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.macro {
    position: sticky;
    top: 1rem;
    left: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-gray);
    width: calc(100vw - 2rem);
    margin-bottom: 1rem;
    margin-right: 1rem;
    text-align: center;
    border-radius: .5rem;
    transition: 300ms;
}

.macro h5 {
    margin-bottom: .25rem;
    max-width: unset;
}

.macro p {
    max-width: unset;
}

.specials-overflow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1rem;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.specials-overflow > .course-block {
    min-width: calc(var(--column-mobile) * 6 + 4.5rem - 8px);
    max-width: calc(var(--column-mobile) * 6 + 4.5rem - 8px);    
}

.specials-overflow > .course-block:not(:last-of-type) {
    margin-right: 1rem;
}


/* TABLET */
@media only screen and (min-width: 720px) {
    .specials-overflow > .course-block {
        min-width: calc(var(--column-mobile) * 3 + 2rem - 8px);
        max-width: calc(var(--column-mobile) * 3 + 2rem - 8px);
    }
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .macro {
        width: calc(100% - 2rem);
    }

    .specials-overflow > .course-block {
        min-width: calc(var(--column-desktop) * 4 + 3rem - 8px);
        max-width: calc(var(--column-desktop) * 4 + 3rem - 8px);
    }
}


/* DESKTOP LARGE */
@media only screen and (min-width: 1760px) {
    .specials-overflow > .course-block {
        min-width: calc(var(--column-desktop) * 3 + 2rem - 8px);
        max-width: calc(var(--column-desktop) * 3 + 2rem - 8px);
    }
}


@media (hover: hover) {
    .macro:hover {
        background-color: var(--color-gray);
    }

    .macro:hover * {
        color: var(--color-white) !important;
    }
}