.project{
      text-align: center;
}
.project__title{
      font-size: var(--size-2xl);
      color: var(--clr-light);
      text-align: center;
}
.project__description{
      max-width: 60ch;
      text-align: center;
      font-size: var(--size-sm);
      color: var(--clr-slate600);
      margin: 1rem auto;
}
.project__combined-description:not(:last-child){
      margin-bottom: 5rem;
}
.project__img-wrap{
      position: relative;
}
.project__img-wrap::after{
      content: '';
      background-color: rgba(0, 0, 0, 0.5);
      height: 100%;
      width: 100%;
      position: absolute;
      top:0;
      left:0;
      z-index: 1;
      transition: background-color 0.3s;
}    
.project__img-wrap:hover::after{
           background-color: rgba(79, 70, 229, 0.1);
}
.project__title1{
      font-size: var(--size-base);
      margin-bottom: 1rem;
}
.project__description1{
      max-width: 60ch;
      text-align: center;
      font-size: var(--size-base);
      color: var(--clr-slate600);
      margin: 1rem auto;
}    
.project__description2{
      max-width: 60ch;
      text-align: center;
      font-size: var(--size-base);
      color: var(--clr-slate600);
      margin: 1rem auto;
}
.project__button{
      font-size: var(--size-sm);
}
.project__heading-title{
      display: none;
}


/* xs */
@media (min-width:475px) {
      .project__title{
            font-size: var(--size-3xl);
      }
      .project__description{
            font-size: var(--size-base);
      }
      .project__title1{
            font-size: var(--size-lg);
            margin-bottom: 1.5rem;
      }
      .project__description1{
            font-size: var(--size-lg);
            margin: 1.5rem auto;
      }
      .project__description2{
            display: none;
      }
      .project__button{
            font-size: var(--size-base);
      }
}

/* sm */
@media (min-width:640px) {      
      .project__container{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
            'image1 content1'
            'content2 image2'
            'image3 content3'
            'content4 image4'
            'image5 content5'
            'content6 image6'
            ;
            place-items: center;
      }
      .project__image1{
            grid-area: image1;
      }
      .project__image2{
            grid-area: image2;
      }
      .project__image3{
            grid-area: image3;
      }
      .project__image4{
            grid-area: image4;
      }
      .project__image5{
            grid-area: image5;
      }
      .project__image6{
            grid-area: image6;
      }
      .project__content1{
            grid-area: content1;
      }
      .project__content2{
            grid-area: content2;
      }
      .project__content3{
            grid-area: content3;
      }
      .project__content4{
            grid-area: content4;
      }
      .project__content5{
            grid-area: content5;
      }
      .project__content6{
            grid-area: content6;
      }
      .project__combined-description{
            padding: 0 1rem;
      }
      .project__title1{
            display: none;
      }
      .project__description1{
            font-size: var(--size-xs);
            margin: 1em auto;
      }
      .project__button{
            font-size: var(--size-xs );
      }
      .project__heading-title{
            display:block;
            font-size: var(--size-base);
      }
      .project__combined-description:not(:last-child){
            margin-bottom: 0;
      }
}

/* md */
@media (min-width:768px) {    
      .project__description1{
            font-size: var(--size-sm);
      }
      .project__description2{
            font-size: var(--size-sm);
      }
      .project__button{
            font-size: var(--size-sm );
      }
      .project__heading-title{
            font-size: var(--size-lg);
      }  
}

/* lg */
@media (min-width:1024px) {
      .project__title{
            font-size: var(--size-4xl);
      }
      .project__description{
            font-size: var(--size-lg);
      }
      .project__description1{
            font-size: var(--size-base);
      }
      .project__description2{
            font-size: var(--size-base);
      }
      .project__button{
            font-size: var(--size-base);
      }
      .project__heading-title{
            font-size: var(--size-xl);
      }  
}

/* xL */
@media (min-width:1280px) {
      .project__title{
            font-size: var(--size-5xl);
      }
      .project__description{
            font-size: var(--size-xl) ;
            margin: 2rem auto;
      }
      .project__description1{
            font-size: var(--size-lg);
      }
      .project__description2{
            font-size: var(--size-lg);
      }
      .project__button{
            font-size: var(--size-lg );
      }
      .project__heading-title{
            font-size: var(--size-xl);
      }  
      .project__container{
            width: 80%;
            margin:0 auto;
      }
}

/* 2xL */
@media (min-width:1536px) {
      .project__container{
            width: 70%;
            margin:0 auto;
      }
}