/* code CSS de la section réalisations websites de la page d'accueil 
titre + sous-titre et accordion des custom post avec effets de hover */

.section-websites{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}

.websites-title{
    display:flex;
    flex-direction: column;
    width:75%;
    & h1{
    font-family:'AlbertSansBlack';
    text-transform: uppercase;
    font-size:5rem;
    margin:0;
    text-align:left;
    width:100%;
    line-height:1;
  }

  & h2{
      width:80%;
      margin:10px 0;
      font-size:2.5rem;
      font-family:'AlbertSansMedium';
      text-align: left;
      text-transform: none;
      line-height:1;
  }

  & h3{
    font-size:1.6rem;
    font-family:'AlbertSansMedium';
    margin-top:100px;
    border-bottom:2px solid var(--black);
    width:fit-content;
    padding-bottom:10px;
  }
}

  /* ---------- Accordion ---------- */
  
  .websites-container{ 
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    width:75%;
    gap:70px;
  }
  
  .websites-item{
    height:100%;
    width:46%;
    transition: all 0.2s ease;
    transition-duration:1s !important;
    overflow:hidden;
    & a{
      width:100%;
    }
  }

  .website-item-img{
    overflow:hidden;
  }

  .websites-item img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.3s ease-in-out;
      aspect-ratio:4/3;
      object-fit: cover;
      &:hover{
        scale:1.2;
        rotate:3deg;
      }
    }
  
  .caption{
    display: flex;
    flex-direction: column;
    width:100%;
    height:100%;
    align-items: center;

    & h5{
      font-size: 1.2rem;
      font-family:'AlbertSansBold';
      color:var(--black);
      line-height:1;
      margin:15px 0;
    }

    & p{
      font-family: 'AlbertSansMedium';
      font-size:1.2rem !important;
      color:#E9E5E0 !important;
      margin: 0 !important;
    }

    & .caption-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    & button{
      border-radius: 50px;
      padding: 7px 10px;
      background-color:var(--accent);
      border: 1px solid var(--black);
      transition: all .25s ease;
      text-align:center;
      min-width: 120px;
      font-family:'AlbertSansSemiBold';
      font-size:1rem;
      line-height:1;
      color:var(--black);
    }
  }


  /* -------------------------------------- responsive ----------------------------------- */
  @media screen and (max-width:1280px){
    .websites-container{
      gap:50px;
    }
  }

  @media screen and (max-width: 1024px) {
    .section-websites{
    padding:30px 0;
    & h1{
      font-size:4rem;
    }
    & h2{
      width:100%;
      font-size:2rem;
    }
    }

    .websites-container{
      gap:30px;
    }

    .websites-item{
      width:47%;
    }

    .caption{
      & h5{
        font-size: 1rem;
        margin: 5px 0;
      }

      & .caption-tags{
        gap:6px;
        padding:5px 0;
      }

      & button{
        min-width:100px;
        font-size:0.9rem;
      }
    }
  }


  @media screen and (max-width:768px){
    .section-websites{
    margin:0;
    padding:0px 0 30px 0;
    & h1{
    font-size:3rem;
  }

    & h2{
    font-size:1.6rem;
  }

  & h3{
    margin-top:50px;
    font-size:1.2rem;
  }
}

  .websites-container{
    gap:50px;
  }

  .websites-item{
    width:100%;
  }

 }

   @media screen and (max-width:480px){
    .websites-container{
      gap:30px;
    }

    .caption{
        & .caption-tags{
        gap:6px;
        padding:5px 0;
      }

      & button{
        min-width:80px;
        font-size:0.8rem;
      }
    }

 }