.home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.home > a {
    text-decoration: none;
    color: var(--black);
    font-weight: 500;
}

.home > a:hover {
    color: var(--accent);
}

.home > a > div {
    transition: box-shadow 300ms;
    padding: 1em;
    border: 1px solid rgba(98, 105, 118, 0.16);
    border-radius: 4px;
    display: flex;
    align-items: center;
    column-gap: 1em;
    box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
}

.home > a > div:hover {
    box-shadow: rgba(30, 41, 59, 0.16) 0 2px 16px 0;
}

.home > a > div:hover > svg {
    fill: var(--accent);
}

.home svg {
    fill: var(--slogan);
    max-width: 40px;
    max-height: 40px;
}

@media only screen and (max-width: 680px) {
    .home {
        grid-template-columns: repeat(1, 1fr);
    }
}