/*.footer {
    position: fixed;

}*/

.grid {
    display: grid;
    margin-top: 20px;
    row-gap: 1em;
}

.grid-band {
    grid-template-columns: fit-content(350px) auto fit-content(365px);
    grid-template-rows: fit-content(150px);
    grid-template-areas:
        "img txt info";
}


.grid-img {
    grid-area: img;
    height: auto;
    width: 350px;
    margin: auto;

}

.grid-text {
    grid-area: txt;
    align-self: center;
    justify-self: center;
    max-width: 80%;

}

.grid-info {
    grid-area: info;
    align-self: center;
    justify-self: center;

}

.date {
    font-size: small;
    font-weight: 100;
    margin-bottom: 15px;
    opacity: 0.8;
}


@media (max-width: 1200px) {
    .grid-img {
        height: auto;
        width: 260px;
    }

    .grid-band {
        grid-template-columns: fit-content(150px) auto fit-content(365px);
        grid-template-rows: fit-content(150px) auto;
        grid-template-areas:
            "img txt txt"
            ". info info";
    }

    .title {
        font-size: 22px;
    }

    .subtitle {
        font-size: 13px;
    }

}

@media (max-width: 990px) {

    .grid-band {
        grid-template-areas:
            "img txt txt"
            ". info .";
    }



}



@media (max-width: 780px) {
    .grid-img {
        height: auto;
        width: 175px;
    }

    .grid-band {
        grid-template-columns: fit-content(80px) auto fit-content(100px);
        grid-template-rows: fit-content(150px) auto;
        grid-template-areas:
            "img txt txt"
            "info info info";
    }

    .date {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .title {
        font-size: 15px;
    }

}

@media (max-width: 500px) {

    .subtitle {
        font-size: 6px;
    }

    .grid-band {
        grid-template-columns: fit-content(80px) auto fit-content(100px);
        grid-template-rows: auto auto;
        grid-template-areas:
            "img txt txt"
            "info info info";
        margin-bottom: 20px;
    }

}

.btn {
    margin: 2px;
    margin-bottom: 5px;
}

.btn-laexo {
    background-color: #0784b5;
    outline: #0784b5;


}
.btn-laexo:hover,
.btn-laexo:focus {
    background-color: #0aa2de;
    outline: #0aa2de;
    color: black;

}

.btn-laexo-light {
    background-color: #1da2fa;
    outline: #1da2fa;
}

.btn-laexo-light:hover,
.btn-laexo-light:focus {
    background-color: #1dbbfa;
    outline: #1dbbfa;
    color: black;
}

.btn-laexo-darkBlue {
    background-color: #0c6efd;
    outline: #0c6efd;
    color: white;
}

.btn-laexo-darkBlue:hover,
.btn-laexo-darkBlue:focus {
    background-color: #277bfa;
    outline: #277bfa;
    color: white;
}