.rankings-header {
    background-color: hsl(265,55%,30%);
    color: white;
    padding-top: 4em;
    padding-bottom: 4em;
    text-align: center;
}

.rankings-header h3 {
    font-size: 200%;
    font-weight: 700;
    text-shadow: 2px 4px black;
}

.ranking-header-detail {
    font-size: 130%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.rankings-group-row {
    background-color: #efefef;
    padding-top: 4em;
    padding-bottom: 6em;
}

.ranking {
    background-color: black;
    border-radius: 12px 12px 0px 0px;
    border-top: 4px solid #999;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    color: white;
    text-align: center;
    padding: 4em;
    margin-bottom: 2em;
}

.ranking h4 {
    font-size: 1.5rem;
}

.ranking-detail a {
    color: white;
    font-style: italic;
    text-decoration: underline;
}

.ranking:nth-child(1), 
.ranking:nth-child(8) {
    background: linear-gradient(to bottom, rgba(246, 139, 31, 0.75), rgba(246, 139, 31, 1));
    color: white;
}

.ranking:nth-child(2),
.ranking:nth-child(9) {
    background: linear-gradient(to bottom, rgba(224, 78, 57, 0.75), rgba(224, 78, 57, 1));
    color: white;
}

.ranking:nth-child(3),
.ranking:nth-child(10) {
    background: linear-gradient(to bottom, rgba(41, 143, 194, 0.75), rgba(41, 143, 194, 1));
    color: white;
}

.ranking:nth-child(4),
.ranking:nth-child(11) {
    background: linear-gradient(to bottom, rgba(145, 214, 172, 0.75), rgba(145, 214, 172, 1));
    color: black;
}

.ranking:nth-child(4) .ranking-detail a,
.ranking:nth-child(11) .ranking-detail a {
    color: black;
}

.ranking:nth-child(5),
.ranking:nth-child(12) {
    background: linear-gradient(to bottom, rgba(242, 199, 92, 0.75), rgba(242, 199, 92, 1));
    color: black;
}

.ranking:nth-child(5) .ranking-detail a,
.ranking:nth-child(12) .ranking-detail a {
    color: black;
}

.ranking:nth-child(6),
.ranking:nth-child(13) {
    background: linear-gradient(to bottom, rgba(52, 101, 127, 0.75), rgba(52, 101, 127, 1));
    color: white;
}

.ranking:nth-child(7),
.ranking:nth-child(14) {
    background: linear-gradient(to bottom, rgba(122, 153, 172, 0.75), rgba(122, 153, 172, 1));
    color: white;
}

.rankings-accreditation-heading {
    background-color: hsl(265,55%,30%);
    color: white;
    padding-top: 3em;
    padding-bottom: 2em;
}

.rankings-accreditation-heading h3 {
    font-size: 200%;
    font-weight: 700;
    text-align: center;
    text-shadow: 2px 4px black;
}

.rankings-institutional-accreditation {
    padding-top: 2em;
}

.rankings-program-specific-accreditation {
    padding-top: 2em;
}

.rankings-end-content {
    padding-top: 2em;   
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    .rankings-header h3 {
        font-size: 300%;
    }
    
    .rankings-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }
    
    .ranking {
        margin-bottom: 0px;
    }
    
    .rankings-accreditation-heading h3 {
        font-size: 300%;
    }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    
    .rankings-header h3 {
        font-size: 400%;
    }
    
    .rankings-group {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2em;
    }
    
    .rankings-accreditation-heading h3 {
        font-size: 400%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .ranking h4 {
        font-size: 2rem;
    }
}