.reasonBoxes {
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start;
    justify-content: center;
    gap: 2rem;
}

.reasonBoxes > * {
    max-width: 31ch;
    padding: 1em;
    line-height: 1.5;
    border-radius: 0.5em;
    --icon-color: var(--background-light3)
}

.reasonBoxes > * h2 {
    margin: 0;
    font-size: 1.5rem;
}

.reasonBoxes > * p {
    font-size: 1rem;
}

.reasonBoxes > *:hover img {
    filter: invert() brightness(0.7) sepia(100%) saturate(10000%) hue-rotate(246.07037441119724deg) saturate(0.3305270481328618) brightness(2.020190643501883);
}

.reasonBoxes > * img {
    width: 50px;
    height: 50px;
    filter: invert(calc(1 - var(--theme-inversion)));
}


.reasonHeader {
    display: flex;
    gap: 1em
}

.reasonIcon {
    min-width: 50px;
    min-height: 50px;
    height: 50px;
    background-image: linear-gradient(135deg, var(--primary-color-light), var(--primary-color));
    -webkit-mask-image: var(--reasonImg);
    -webkit-mask-size: cover;
    mask-image: var(--reasonImg);
    mask-size: cover;
    filter: brightness(0) invert(calc(1 - var(--theme-inversion)));
    transition: all 0.2s ease-out;
}


.reasonBoxes > *:hover .reasonIcon {
    filter: brightness(1);
}