.nuestros-programas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
    gap: 20px;
}

.item-programa {
    width: 100%;
    height: 355px;
    border-radius: 15px;
    padding: 20px;
    background-size: 100% !important;
    transition: all 1s;
}

.contenido-programa h3 {
    font-family: var(--bold);
    line-height: 37px;
}

.ver-mas {
    background: var(--red);
    padding: 5px;
    display: block;
    width: fit-content;
    position: absolute;
    bottom: 12px;
    right: 13px;
    border-radius: 15px;
    border: 2px solid transparent;
    transition: all .3s;
    z-index: 2;
}

.ver-mas:hover {
    background: white !important;
    border: 2px solid var(--red);
}

.ver-mas img {
    filter: brightness(200);
}

.ver-mas:hover img {
    filter: inherit
}

.contenido-programa {
    position: absolute;
    left: 0;
    bottom: 40px;
    padding: 20px;
    z-index: 2;
}

.contenido-programa p {
    margin: 0;
    color: white;
}

.item-programa:hover {
    background-size: 120% !important;
    background-position: -60px 0 !important;
}

.amarillo:hover .c-white,
.amarillo:hover .c-white p {
    color: #523A02;
}

.fucsia:hover .ver-mas,
.rojo:hover .ver-mas{
    background: var(--blue);
}

.item-programa:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    background: rgba(38,38,65,0);
    background: -moz-linear-gradient(top, rgba(38,38,65,0) 0%, rgba(38,38,65,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(38,38,65,0)), color-stop(100%, rgba(38,38,65,1)));
    background: -webkit-linear-gradient(top, rgba(38,38,65,0) 0%, rgba(38,38,65,1) 100%);
    background: -o-linear-gradient(top, rgba(38,38,65,0) 0%, rgba(38,38,65,1) 100%);
    background: -ms-linear-gradient(top, rgba(38,38,65,0) 0%, rgba(38,38,65,1) 100%);
    background: linear-gradient(to bottom, rgba(38,38,65,0) 0%, rgb(57 57 103) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262641', endColorstr='#262641', GradientType=0 );
}

.verde:hover:before {
    background: rgba(27,136,48,0);
    background: -moz-linear-gradient(top, rgba(27,136,48,0) 0%, rgba(27,136,48,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(27,136,48,0)), color-stop(100%, rgba(27,136,48,1)));
    background: -webkit-linear-gradient(top, rgba(27,136,48,0) 0%, rgba(27,136,48,1) 100%);
    background: -o-linear-gradient(top, rgba(27,136,48,0) 0%, rgba(27,136,48,1) 100%);
    background: -ms-linear-gradient(top, rgba(27,136,48,0) 0%, rgba(27,136,48,1) 100%);
    background: linear-gradient(to bottom, rgba(27,136,48,0) 0%, rgba(27,136,48,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b8830', endColorstr='#1b8830', GradientType=0 );
}

.amarillo:hover:before {
    background: rgba(252,184,22,0);
    background: -moz-linear-gradient(top, rgba(252,184,22,0) 0%, rgba(252,184,22,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,184,22,0)), color-stop(100%, rgba(252,184,22,1)));
    background: -webkit-linear-gradient(top, rgba(252,184,22,0) 0%, rgba(252,184,22,1) 100%);
    background: -o-linear-gradient(top, rgba(252,184,22,0) 0%, rgba(252,184,22,1) 100%);
    background: -ms-linear-gradient(top, rgba(252,184,22,0) 0%, rgba(252,184,22,1) 100%);
    background: linear-gradient(to bottom, rgba(252,184,22,0) 0%, rgba(252,184,22,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcb816', endColorstr='#fcb816', GradientType=0 );
}

.azul:hover:before {
    background: rgba(70,140,204,0);
    background: -moz-linear-gradient(top, rgba(70,140,204,0) 0%, rgba(70,140,204,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70,140,204,0)), color-stop(100%, rgba(70,140,204,1)));
    background: -webkit-linear-gradient(top, rgba(70,140,204,0) 0%, rgba(70,140,204,1) 100%);
    background: -o-linear-gradient(top, rgba(70,140,204,0) 0%, rgba(70,140,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(70,140,204,0) 0%, rgba(70,140,204,1) 100%);
    background: linear-gradient(to bottom, rgba(70,140,204,0) 0%, rgba(70,140,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#468ccc', endColorstr='#468ccc', GradientType=0 );
}

.morado:hover:before {
    background: rgba(76,53,140,0);
    background: -moz-linear-gradient(top, rgba(76,53,140,0) 0%, rgba(76,53,140,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,53,140,0)), color-stop(100%, rgba(76,53,140,1)));
    background: -webkit-linear-gradient(top, rgba(76,53,140,0) 0%, rgba(76,53,140,1) 100%);
    background: -o-linear-gradient(top, rgba(76,53,140,0) 0%, rgba(76,53,140,1) 100%);
    background: -ms-linear-gradient(top, rgba(76,53,140,0) 0%, rgba(76,53,140,1) 100%);
    background: linear-gradient(to bottom, rgba(76,53,140,0) 0%, rgba(76,53,140,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c358c', endColorstr='#4c358c', GradientType=0 );
}

.fucsia:hover:before {
    background: rgba(224,11,148,0);
    background: -moz-linear-gradient(top, rgba(224,11,148,0) 0%, rgba(224,11,148,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,11,148,0)), color-stop(100%, rgba(224,11,148,1)));
    background: -webkit-linear-gradient(top, rgba(224,11,148,0) 0%, rgba(224,11,148,1) 100%);
    background: -o-linear-gradient(top, rgba(224,11,148,0) 0%, rgba(224,11,148,1) 100%);
    background: -ms-linear-gradient(top, rgba(224,11,148,0) 0%, rgba(224,11,148,1) 100%);
    background: linear-gradient(to bottom, rgba(224,11,148,0) 0%, rgba(224,11,148,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e00b94', endColorstr='#e00b94', GradientType=0 );
}

.rojo:hover:before {
    background: rgba(255,18,10,0);
    background: -moz-linear-gradient(top, rgba(255,18,10,0) 0%, rgba(255,19,10,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,18,10,0)), color-stop(100%, rgba(255,19,10,1)));
    background: -webkit-linear-gradient(top, rgba(255,18,10,0) 0%, rgba(255,19,10,1) 100%);
    background: -o-linear-gradient(top, rgba(255,18,10,0) 0%, rgba(255,19,10,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,18,10,0) 0%, rgba(255,19,10,1) 100%);
    background: linear-gradient(to bottom, rgba(255,18,10,0) 0%, rgba(255,19,10,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff120a', endColorstr='#ff130a', GradientType=0 );
}

.item-programa:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px;
    background: #00000045;
    transition: all .3s;
}

.item-programa:hover:after {
    opacity: 0;
}

.item-programa:hover:after {
    background: transparent;
}

@media (max-width:768px){
    .nuestros-programas {
        grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
    }

    .item-programa {
        height: 320px;
    }
}