#catalog-body {
    display: grid;
    grid-template-columns: repeat(3, 20%);

    justify-content: center;
    align-items: center;
     
    padding-top: 2em;
}

.catalog-card {

    width: 350px;
    height: 370px;

    display: flex;
    flex-flow: column;

    align-items: center;
    justify-content: space-between;

    border: 5px solid var(--bordo);
    border-radius: 6px;

    margin: 5px;
}

.catalog-card-tittle {
    background-color: var(--bordo);
    border-radius: 0 0px 10px 10px;

    width: 100%;
    height: 2em;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: large;

    display: flex;
    justify-content: center;
    align-items: center;
}

.catalog-card-img {

    width: 205px;
    height: 205px;

    border-radius: 20px;

    background-size: cover;
}


/* BOTON */

.catalog-card-button {

    width: 180px;
    height: 35px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 3px solid var(--verdeOscuro);
    border-radius: 20px;

    margin-bottom: 1em;

    transition: 400ms;

}

.catalog-card-button:hover {

    cursor: pointer;

    background-color: var(--verdeClaro);
    border: 3px solid var(--verdeClaro);
    color: #ffffff;

    transform: scale(1.05);
    transition: 400ms;
}


/* IMAGENES DL CATALOGO */

#catalog-one {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo01.png) ;
}

#catalog-two {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo02.png) ;
}

#catalog-three {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo03.png) ;
}

#catalog-four {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo04.png) ;
}

#catalog-five {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo05.png) ;
}

#catalog-six {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo06.png) ;
}

#catalog-seven {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo07.png) ;
}

#catalog-eight {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo08.png) ;
}

#catalog-nine {
    background-image: url(/Rodamientos-Norte/Pictures/Catalogo/Catalogo09.png) ;
}

@media screen and (min-width: 375px) and (max-width: 1023px) {

    #catalog-body {
        grid-template-columns: auto;
    }

    .catalog-card {
        border: solid 4px var(--verdeOscuro);
    }

    .catalog-card-tittle {
        background-color: var(--verdeOscuro);
    }

}