.page__header{
   background: url(../images/for-program-head.webp) center center/cover; 
} 
.programs{
   margin: 4rem 0;

}
.programs__menu{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   gap: 1.5rem;

}
.program{
   background: var(--color-gray-0);
   display: flex;
   text-align: left;
   color: var(--color-gray-700);
   border-radius: var(--radius-4);
   overflow: hidden;
}
.program.active {
   background: var(--color-gray-900);
   box-shadow: 0 0.7rem 0 var(--color-primary);
   
   
}
.program.active *{
   color: var(--color-gray-0);
}
.program__image{
   height: 100%;
   width: 12rem;
}
.program__info{
   padding: 1rem;
}
.program__info h4{
   color: var(--color-primary);
}
.program__info p{
   font-size: 0.85rem;
   margin: 0.8rem 0 1.3rem; 
}
.program__info small{
   display: block;
   font-size: 0.7rem;
   color: var(--color-primary);
   transition: var(--transition);
}
.program:hover small{
   letter-spacing: 2px;
}


.programDetail{
   margin: 4rem;
}
.programDetail__container{
   display: grid;
   grid-template-columns: 3fr 1fr;
   gap: 3rem ;
   animation: identifier 2s ease forwards;
}

@keyframes identifier{
   0%{
      opacity: 0;
   }
   100%{
      opacity: 1;
   }
}
.programDetail__left >  p{
   margin: 0.5rem 0 2rem;
}
.programDetail__images{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   margin-bottom: 3rem;
}
.programDetail__images div{
   border-radius: 3rem;
   overflow: hidden;
}
.programDetail__left article{
   background: var(--color-gray-0);
   border-radius: var(--radius-4);
   padding: 2rem;
   margin-bottom: 1rem;
}

.programDetail__left h5{
   margin-bottom: 0.6rem;
}

.programDetail__right{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   height: fit-content;

}

.programDetail__right article{
   background: var(--color-gray-0);
   padding: 1.5rem;
   border-radius: var(--radius-5);
}
.programDetail__right h4{
   color: var(--color-primary);
}
.programDetail__right h2{
   font-weight: 600;
}
.programDetail__right div{
   margin-top: 1.5rem;
}
.programDetail__right article p{
   margin-top: 0.5rem;
  
}

@media screen and (max-width: 600px){
   
   
   .programDetail__container{
      grid-template-columns: 1fr;
     
   }
   .programDetail__images{
      grid-template-columns: 1fr;
      gap: 1rem;
   }
}