.service-card {
        margin-bottom:20px;        
        padding:16px;
        position:relative;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 6px 0px;
        background-color:#fff;
        background-size:cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .service-card--brands {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-marcas.jpg');
    }
    .service-card--patents {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-patentes.jpg');
    }
    .service-card--industrial-design {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-di.jpg');
    }
    .service-card--geo {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-ig.jpg');
    }
    .service-card--computer {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-programas.jpg');
    }
    .service-card--topo {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-topografia.jpg');
    }
    .service-card--contract {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-contratos.jpg');
    }
    .service-card--edu {
        background-image: url('https://www.gov.br/inpi/pt-br/arquivos/imagens/card-educacao.jpg');
    }

    .service-card h3, .service-card p {
        color:#ffffff;
        position:relative;
        margin-bottom:0;
        z-index:2;
    }
    .service-card h3 {
        text-transform: uppercase;
        font-size:18px;
        font-weight:700;
    }

    .service-card p {
        font-size:14px;
    }

    .service-card__link, .service-card__link:hover {
        text-decoration:none;
    }

    .service-card__overlay {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        opacity:.7;
        transition:all .2s;
    }

    .service-card__overlay--brands {
        background: rgb(63,43,150);
        background: linear-gradient(45deg, rgba(63,43,150,1) 0%, rgba(168,192,255,1) 100%);
    }
    .service-card__overlay--patents{
        background: rgb(41,128,185);
        background: linear-gradient(45deg, rgba(41,128,185,1) 0%, rgba(109,213,250,1) 100%);
    }
    .service-card__overlay--industrial-design {
        background: rgb(17,153,142);
        background: linear-gradient(45deg, rgba(17,153,142,1) 0%, rgba(56,239,125,1) 100%);
    }
    .service-card__overlay--geo {
        background: rgb(44,62,80);
        background: linear-gradient(45deg, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
    }
    .service-card__overlay--computer {
        background: rgb(60,16,83);
        background: linear-gradient(45deg, rgba(60,16,83,1) 0%, rgba(173,83,137,1) 100%);
    }
    .service-card__overlay--topo {
        background: rgb(25,22,84);
        background: linear-gradient(45deg, rgba(25,22,84,1) 0%, rgba(67,198,172,1) 100%);
    }
    .service-card__overlay--contract {
        background: rgb(62,81,81);
        background: linear-gradient(45deg, rgba(62,81,81,1) 0%, rgba(222,203,164,1) 100%);
    }
    .service-card__overlay--edu {
        background: rgb(64,58,62);
        background: linear-gradient(45deg, rgba(64,58,62,1) 0%, rgba(190,88,105,1) 100%);
    }

    .service-card:hover .service-card__overlay {
        opacity:.9;
    }

    .service-card::after {
        font-family:"Font Awesome 5 Free";
        content:'\F062';
        color:#ffffff;
        position:absolute;
        top:0;
        right:10px;
        -webkit-transform:rotate(50deg);
        -ms-transform:rotate(50deg);
        transform:rotate(50deg);
        font-weight:900;
    }

    @media only screen and (min-width: 577px) {
        .service-card {
            aspect-ratio: 1 / 1;
        }
}