:root {
    --fondo-color: rgb(24, 23, 23);
    --color-txt: #fff;
}

.fondo-a,
.fondo-b {
    background: var(--fondo-color);
    height: 300px;
    padding: 30px 30px 0 30px;
}

.fondo-a h2,
.fondo-b h2 {
    color: var(--color-txt);
    font-size: 30px;
}

/* contenedor padre catalogo */
.populares {
    padding: 0 30px;
    margin-top: -200px;
    display: flex;
    justify-content: space-evenly;

}

.popular-item {
    /*background: #09f;*/
    width: 180px;
    min-width: 180px;
    height: 270px;
    min-height: 270px;
}

.popular-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.fondo-b {
    margin-top: 20px;
}

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

    .fondo-a h2,
    .fondo-b h2 {
        color: var(--color-txt);
        font-size: 25px;
    }

    .populares {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: -190px;
        gap: 7px;
    }

    .popular-item {
        width: 48%;
        min-width: 48%;
        height: 200px;
        min-height: 200px;
    }
}

@media screen and (min-width: 1450px) {
    .populares {
        justify-content: center;
        gap: 0 25px;
    
    }
  }