main{
    display: grid !important;
    grid-template-columns: var(--grid-margins) repeat(12, minmax(0, 1fr)) var(--grid-margins);
}

.backgroundColourBlock,
.contentGridColourBlock {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: -1;

    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
    }
}

.aosProgramPicker,
#trent-aos-programs-filters,
.programsGrid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
}

.aosProgramPicker > div {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: auto;
    row-gap: 2em;
}

#trent-aos-programs-filters {
    grid-column: 1 / -1;
    align-items: center;
    margin-bottom: 1em;
    row-gap: 2em;
    & .form-type-select {
        grid-column: span 2;
    }
}

.programsGrid {
    grid-column: 2/-2;
    gap: 1em;
    margin: 2em 0;
}

.programsGrid .AoSProgramLink {
    grid-column: span 4;
    border: 2px solid var(--trent-green-new);
    color: var(--trent-green-new);
    font-family: var(--sprinter), sans-serif;
    letter-spacing: var(--sprinterSpacing);
    padding: 1em;
    gap: 1em;
    font-weight: 300;
    display: flex;
    flex-flow: column nowrap;
    transition: color 150ms,
            text-decoration 150ms;
    border-radius: 0.6em;
    &:hover,&:focus,&:active{
        background-color: var(--trent-green-greyest);
        text-decoration: none;
    }
    & p {
        margin: 0;
    }
    & .programLinkTitle {
        font-size: 1.2em;
        font-weight: 400;
    }
    & .degrees,
    & .specializations {
        display: flex;
        flex-flow: column nowrap;
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        margin-bottom: 0.75em;
        &::before {
            content: var(--degree);
            width: 1.3em;
            height: 1em;
            filter: var(--trent-green-filter);
            position: absolute;
        }
        & li {
            margin-left: 2em;
            line-height: 1;
            margin-bottom: 0.5em;
        }
    }
    & .specializations{
        &::before {
            content: var(--specialization);
        }
    }
    .progTileBottom {
        display: flex;
        flex-flow: row nowrap;
        margin-top: auto;
        align-items: center;
        &::after {
            content: var(--plus);
            width: 2em;
            height: 2em;
            filter:var(--trent-green-filter);
            display: block;
            margin-left: auto;
        }
    }
    .bottomData {
        display: flex;
        flex-flow: column nowrap;
        gap: 0.25em;
        & .locations,
        & .coop,
        & .headerPGWP {
            display: flex;
            flex-flow: row nowrap;
            gap: 1em;
            &::before {
                content: var(--location);
                width: 1em;
                height: 1em;
                filter: var(--trent-green-filter);
                display: block;
            }
        }
        & .coop {
            &::before {
                content: var(--coop);
            }
        }
        & .headerPGWP::before {
            content: var(--gs-pgwp);
        }
    }
    
}

main > .aosProgramPicker .search-container {
    position: relative;
    .form-item-search {
        grid-column: 1/3;
    }
    & .suggestions-list {
        display: none;
        flex-flow: column nowrap;
        position: absolute;
        width: max-content;
        top: 100%;
        z-index: 10;
        background-color: Canvas;
        border: 1px solid var(--trent-green-greyest);
    }
    & .suggestions-list a {
        font-family: var(--sprinter);
        font-size: 1em;
        text-decoration: none;
        color: var(--trent-black);
        line-height: 1;
        padding: 0.5em;
        transition: background-color 250ms;
        display: flex;
        flex-flow: row nowrap;
        column-gap: 2em;
        justify-content: space-between;
        align-items: center;
        .hitTitle {
            max-width: 42em;
        }
        .searchDegree {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.25em;
            span {
                background-color: var(--trent-green-lighter);
                color: var(--trent-grey-new);
                aspect-ratio: 4 / 3;
                padding: 0.25em;
                border-radius: 1em;
                corner-shape: squircle;
                display: flex;
                align-items: center;
            }
        }
        &:not(:last-of-type) {
            border-bottom: 1px solid var(--trent-green-greyest);
        }
        &:focus, &:hover, &:active {
            background-color: var(--trent-green-greyest);
        }
    }
    &:focus,
    &:focus-within {
        & .suggestions-list:not(.hidden) {
            display: flex;
        }
    }
}
#edit-level--wrapper {
    grid-column: 4 / 8;
}
.areas_block {
    display: grid;
    grid-row: 3;
    grid-template-columns: repeat(12, 1fr);
    grid-column: 1 / -1;
    legend {
        text-align: center;
    }
    & > div, & > div div[id^="edit-area"] {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1/-1;
    }
    & > div div[id^="edit-area"] {
        position: relative;
        gap: 1em 0;
    }
    & .areaOption {
        grid-column: span 1;
        &:first-of-type {
            grid-column-start: 2;
        }
    }
    & .area_details {
        grid-column: 2 / -2;
        grid-row: 2;
        padding: 2em;
    }
    & .greenBackgroundBlock {
        grid-column: 1 / -1;
        grid-row: 2;
        position: absolute;
        display: none;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: var(--trent-green-new);
    }
    label:has(input[name="area"]:checked) ~ .greenBackgroundBlock {
        display: block;
    }
}