.grade-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.grade-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 300px;
    box-sizing: border-box;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
}
@media (max-width: 1200px) {
    .grade-card {
        flex: 1 1 100%;
    }
}

.grade-card .grade-card-body {
    display: flex;
    flex: 1;
    gap: 1rem;
}

.grade-card .grade-card-body .grade-card-body--right {
    display: flex;
    align-items: center;
}

.grade-card .grade-card-body .grade-card-body--left {
}

.grade-card .grade-card-footer {
    margin-top: 1rem;
}

.grade-banner{
    padding: 2rem;
    border-radius: 1rem;
    background: url(../i/grade-banner-bg.png) center no-repeat;
}
.grade-banner .grade-banner-body {
    display: flex;
    flex: 1;
    gap: 1rem;
}
.grade-banner .grade-banner-body grade-banner-body--left{

}
.grade-banner .grade-banner-body grade-banner-body--right{

}