.school-box {
    display: grid;
    grid-template-columns: 1fr repeat(3, 1fr);
    grid-row-gap: 24px;
    grid-column-gap: 12px;
}

.school-card .school-card-img {
    transition: opacity ease .1s;
}

.school-card:hover .school-card-img {
    opacity: .9;
}

.school-card:first-child {
    position: relative;
    grid-column: 1 / 5;
    height: 417px;
}

.school-card:first-child .school-card-img {
    border-radius: 12px;
}

.school-card:first-child .school-card-body {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-right: 12px;
}

.school-card:first-child .school-card-data,
.school-card:first-child .school-card-title span {
    position: relative;
    display: inline-block;
    padding: 12px 24px 0 0;
    color: var(--mirage-950);
    background: var(--mirage-50);
    border-radius: 0 16px 0 0;
}

.school-card:first-child .school-card-data {
    top: 2px;
    font-size: 12px;
    line-height: 16px;
}

.school-card:first-child .school-card-title span {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: -1px;
    transition: color ease .1s;
}

.school-card:first-child:hover .school-card-title span {
    color: var(--thunderbird-500);
}

.school-card:first-child .school-card-data::before,
.school-card:first-child .school-card-title span::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -12px;
    width: 12px;
    height: 12px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAxMkM1LjM3MjU2IDEyIDAgNi42Mjc0NCAwIDBWMTJIMTJaIiBmaWxsPSIjRjVGNkZBIi8+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-size: 12px;
}

.school-card:not(:first-child) {
    color: var(--mirage-950);
}

.school-card:not(:first-child) .school-card-img {
    height: 140px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.school-card:not(:first-child) .school-card-body {
    display: flex;
    flex-direction: column;
    height: calc(100% - 154px);
}

.school-card:not(:first-child) .school-card-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 20px;
    transition: color ease .1s
}

.school-card:not(:first-child):hover .school-card-title {
    color: var(--thunderbird-500);
}

.school-card:not(:first-child) .school-card-data {
    font-size: 12px;
    color: var(--grey);
    margin-top: auto;
}

@media (max-width: 768px) {
    .school-box {
        grid-template-columns: 1fr repeat(1, 1fr);
        grid-column-gap: 24px;
    }

    .school-card:first-child {
        grid-column: 1 / 3;
    }
}

@media (max-width: 576px) {
    .school-box {
        grid-template-columns: 1fr;
    }

    .school-card:first-child {
        grid-column: 1 / 1;
        height: auto;
        max-height: 377px;
    }

    .school-card:not(:first-child) .school-card-img {
        height: auto;
        max-height: 140px;
    }
}