/*
 * Cards "branco com sombra colorida": fundo branco com borda preta (::before)
 * e uma sombra laranja ou azul deslocada (::after).
 */

.bgs-card-white-orange,
.bgs-card-white-blue {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 2rem;
    background: transparent;
    color: var(--bgs-grafite);
}

.bgs-card-white-orange > *,
.bgs-card-white-blue > * {
    position: relative;
    z-index: 1;
}

.bgs-card-white-orange::before,
.bgs-card-white-blue::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: var(--bgs-borda-padrao);
    background-color: var(--bgs-branco);
}

.bgs-card-white-orange::after,
.bgs-card-white-blue::after {
    content: "";
    position: absolute;
    top: var(--bgs-card-deslocamento);
    left: var(--bgs-card-deslocamento);
    right: calc(-1 * var(--bgs-card-deslocamento));
    bottom: calc(-1 * var(--bgs-card-deslocamento));
    z-index: -1;
}

.bgs-card-white-orange::after { background-color: var(--bgs-laranja); }
.bgs-card-white-blue::after { background-color: var(--bgs-azul); }

@media (max-width: 767.98px) {
    .bgs-card-white-orange {
        width: 100%;
        margin: 0 0 2rem;
    }
}