.conteiner-banner {
    border-radius: var(--border);
    display: flex;
}

.banner {
    background-image: linear-gradient(345deg, var(--color1), var(--color2) 50%);
    /* width: 100%; */
    border-radius: var(--border);
    padding: 3px;
}

.banner img {
    width: 1200px;
    height: 400px;
    border-radius: var(--border);
    object-fit: cover;
}

.conteiner-card {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 10px;
    justify-content: center;
    overflow: auto;
}

.card {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 30px auto auto;
    grid-template-areas:
        "title title"
        "image image"
        "subtitle status"
        "data data"
        'button button';
    min-width: 250px;
    max-width: 250px;
    background-color: var(--color3);
    border-radius: var(--border);
    box-shadow: 0 0 4px #00000021;
    overflow: hidden;
    transition: all .2s ease-in-out;
    cursor: pointer;
    border: solid 1px var(--color7);

}

.title {
    grid-area: title;
    width: 239px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    padding: 10px;
}

.card img {
    grid-area: image;
    width: 250px;
    height: 200px;
    object-fit: cover;
    transition: transform .3s ease-in-out;
    will-change: transform;
}

.card:hover img {
    transform: scale(1.03) translateZ(0);
}

.card:hover {
    box-shadow: 0 0 9px 1px #00000021;
    transform: scale(1.005) translateZ(0);
}

.subtitle {
    grid-area: subtitle;
    display: flex;

    align-items: center;
    padding: 10px;
}

.status {
    grid-area: status;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 10px;
    font-weight: bolder;
    font-size: .9em;
}

.status.anucinated {
    color: #1ea5c7;
}
.status.open {
    color: #1ec772;
}

.status.closed {
    color: #d81313;
}

.status.finished {
    color: #989b9a;
}

.status.homologated {
    color: #1ec772;;
}

.info-data {
    grid-area: data;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px;
}

.card>.conteiner {
    grid-area: button;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

img {
    user-select: none;
    /* Impede a seleção da imagem */
    -webkit-user-drag: none;
    /* Impede o arrastar da imagem no WebKit */
    -khtml-user-drag: none;
    /* Impede o arrastar da imagem no KHTML */
    -moz-user-drag: none;
    /* Impede o arrastar da imagem no Firefox */
    -o-user-drag: none;
    /* Impede o arrastar da imagem no Opera */
}

@media screen and (max-width: 800px) {

    /* .conteiner-card{
        min-width: 100%;
    } */
    .card img {
        grid-area: image;
        width: 340px;
        height: 266px;
    }

    .title {
        width: 327px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card>.conteiner {
        grid-area: button;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .card {
        max-width: none;
    }
}