.d11-school-list-wrapper {
    background-color: var(--light-gray);
    position: relative;
    margin-bottom: 0 !important;
    
}

.d11-school-list-wrapper .school-list-result-container {
    display: flex;
    column-gap: var(--space-5);
    align-items: stretch;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
    z-index: 4;
    position: relative;
}

.d11-school-list-wrapper .school-list-result-container .results-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.d11-school-list-wrapper .school-list-result-container .level-filter-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding-bottom: 20px;
}

.d11-school-list-wrapper .school-list-result-container .level-filter-button-container {
    background-color: var(--primary);
    color: var(--black);
    font-family: loos-normal;
    font-size: 21px;
    font-weight: 500;
    text-align: center;
}

.d11-school-list-wrapper .school-list-result-container .level-filter-btn {
    background-color: var(--white);
    font-size: 21px;
    color: var(--black);
    font-family: loos-normal;
    font-weight: 500;
    padding: 21px;
    transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.d11-school-list-wrapper .school-list-result-container .level-filter-btn:hover{
    padding-bottom: 12px;
}

@media (max-width: 1046px) {
    .d11-school-list-wrapper .school-list-result-container .level-filter-btn {
        height: 100%;
    }
}

.d11-school-list-wrapper .school-list-result-container .active{
    animation: fill-button 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fill-button {
    0% {
        background-color: var(--white);
        color: var(--black);
    }
    100% {
        background-color: var(--primary);
        color: var(--white);
    }
}

.d11-school-list-wrapper .school-list-result-container .schools {
	flex: 1;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--space-5);
	overflow-y: auto;
	max-height: 720px;
	padding-bottom: var(--space-5);
}

.d11-school-list-wrapper .school-list-result-container .school {
	width: calc(24% - var(--space-3));
    margin: auto;
    height: 337px;
    display: grid;
    grid-template-rows: 1fr auto; 
    background-color: var(--white);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
    transition: height 0.3s ease;
}

.d11-school-list-wrapper .school-list-result-container .school:hover {
	height: 327px;
}

.d11-school-list-wrapper .school-list-result-container .featured-image {
    min-height: 0;
    overflow: hidden;
}

.d11-school-list-wrapper .school-list-result-container .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.d11-school-list-wrapper .school-list-result-container .school .school-name{
    color: var(--primary);
    padding: var(--space-3);
    background-color: var(--white);
    width: fit-content;
}

@media only screen and (max-width: 768px) {
    .d11-school-list-wrapper .school-list-result-container .school {
        width: calc(100% - var(--space-2));
    }

    .d11-school-list-wrapper .level-filter-buttons {
        flex-direction: column;
    }
    
    .d11-school-list-wrapper .level-filter-btn {
        width: 100%;
    }
}