:root {
    --gb-primary: #2763b5;
    --gb-primary-light: #b8d0f0;
    --gb-primary-mid: #8395ca;
}

.box-1,
.box-2 {
    aspect-ratio: 1 / 1;
}

.box-2 {
    background-color: var(--gb-primary-mid);
    border-radius: 0 0.25rem 0.25rem 0;
    transition: background-color 0.3s ease-in-out;

    ul {
        padding-left: 0.8rem;
    }
}

.card-hover:hover  {
    .box-2 {
        background-color: var(--gb-primary-light);
    }

    .btn-primary {
        background-size: 400% 400%;
    }
}

.card-image {
    border-radius: 0.25rem 0 0 0.25rem;
}

@media (max-width: 991px) {
    .box-1,
    .box-2 {
        aspect-ratio: unset;
    }

    .box-2 {
        border-radius: 0 0 0.25rem 0.25rem;
    }

    .card-image {
        border-radius: 0.25rem 0.25rem 0 0;
    }
}