<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.cards-container {
    width: 90%;
    max-width: 850px;
    margin: auto;
    margin-top: -35px;
}

.card {
    margin-bottom: 1rem;
    box-shadow: 2px 2px 20px rgb(190, 190, 190);
}

.card img {
    display: block;
    width: 100%;
}

.card .title {
    color: rgba(0, 80, 131, 1);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.title h2 {
    font-weight: normal;
}

.card-content {
    padding: 1rem;
}

.card-text {
    color: rgba(94, 101, 106, 0.8);
    font-weight: 500;
}

/*************** Media queries ****************/
@media (min-width: 768px) {
    .cards-container {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 2rem;
        margin-top:0;
    }

    .card {
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .cards-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .card {
        box-shadow: none;
        /* padding: 1rem; */
        transition: 0.8s;
        min-height: 500px;
        text-align: center;
        padding-right: 8px;
        /* background-color: burlywood; */
    }

    .card + .card {
        border-left: 1px solid rgba(0, 80, 131, 1);
    }


    .card img {
        transform: scale(0.8);
        /* width: 150px; */
        transition: 0.4s;
        opacity: 0;
    }
    
    .card-content {
        position: relative;
        top: 25%;
        text-align: center;
        padding: 0;
        /* margin-top: 4rem; */
        transition: 0.8s;
    }

    .card .title {
        font-size: 12px;
        transition: 0.8s;
    }

    .card-text {
        opacity: 0;
        transition: 0.8s;
    }

    .card-text p {
        font-size: .8rem;
    }

    /******** On card hover *********/
    .card:hover img {
        transform: scale(0.9);
        opacity: 1;
    }

    .card:hover {
        transform: scaleX(1.1);
    }

    .card:hover .card-content {
        top: 5%;
    }

    .card:hover .title {
        transform: scale(0.95);
    }

    .card:hover .card-text {
        opacity: 1;
        transform: scale(0.95);
    }

}</pre></body></html>