.all-education {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    padding: 1em;
    box-shadow: var(--box-shadow);
    background: var(--white-color);
}
.all-education-search-box {
    width: 100%;
    padding: .5em;
    border-radius: .25em;
    box-shadow: var(--box-shadow);
    display: grid;
    grid-template-columns: repeat(2, auto) 1fr;
    gap: 1em;
    & > img {
        width: 2em;
        aspect-ratio: 1/1;
    }
    & > input {
        width: 100%;
    }
}
.all-education-item {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    @media only screen and (max-width: 500px) {
        grid-template-columns: repeat(3, 1fr);
    }
    & > a {
        width: 100%;
        border-radius: .5em;
        overflow: hidden;
        padding: .5em;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        gap: .5em;
        box-shadow: var(--box-shadow);
        & > img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: .5em;
            object-fit: cover;
            object-position: center;
        }
        & > span {
            max-width: 100%;
            letter-spacing: .1em;
            text-align: center;
            align-content: center;
        }
        & > :nth-child(3) {
            color: var(--one-color);
            font-size: .75em;
            letter-spacing: .1em;
            font-weight: bold;
            margin-right: 0;
        }
        &:hover {
            transform: translateY(-.25em);
        }
        &::before {
            content: '';
            background: var(--one-color);
            width: 30%;
            aspect-ratio: 1/1;
            position: absolute;
            inset: 0;
            margin: 0 0 auto auto;
            border-radius: 0 .5em 0 0;
        }
    }
}