/* ************************ MAIN ************************** */
main .social{
  display: flex;
  position: relative;
  flex-direction: row;
  left: -40%;
  top: 25px;
}
main .social a{
  color: var(--hover-a-color);
  margin: 0 10px;
  font-size: 3em;
  transition: 0.5s;
}
main .social a:hover{
  color: var(--reserve-color);
  transform: rotateZ(10deg) translateY(-5px);
}
main h2{
  margin: 0;
}
main section{
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 90%;  
  margin: 60px auto;
}
main section .content{
  position: relative;
  display: grid;
  gap: 25px;
  width: 100%;
  height: auto;
  margin: 20px auto;
  justify-content: center;
  align-items: center;
}
main section .content-1{
  grid-template-columns: repeat(8, 1fr);
  /* grid-template-columns: 1fr minmax(440px, 1fr); */
  grid-template-rows: minmax(auto, auto);
}
main section img{
  height: 100%;
  width: 100%;
  /* max-width: 600px; */
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.75);
}
main section .bb4{
  grid-column: 1/3;
  grid-row: 1/4;
}
main section .bb2{
  grid-column: 3/5;
  grid-row: 1/2;
}
main section .quality{ 
  grid-column: 3/5;
  grid-row: 2/3;  
}
main section .bb3{
  grid-column: 5/7;
  grid-row: 1/5;
}
main section .bb1{
  grid-column: 3/5;
  grid-row: 3/4;
}
main aside{
  grid-column: 7/9;
  grid-row: 1/5;
  min-width: 400px;
  padding: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  text-align: justify;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;  
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  background: rgba(232, 234, 238, 0.5);
  backdrop-filter: blur(5px);
  transform: scale(1.0125);
}
main aside .who{
  font-family: "Arima Madurai";
  font-size: 32px;
  padding-bottom: 20px;
}
main aside .couple{
  height: 300px;
  width: auto;
  background: url(img/couple-artisans.jpg);
  background-size: cover;
  border-radius: 10% 30%;
  margin-bottom: 30px;  
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}
main section .description{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Arima Madurai";
  font-size: 3em;
  letter-spacing: 5px;
  white-space: nowrap;
}
main section .work{
  grid-column: 1/5;
  grid-row: 4/5;
}
main section .content-2{
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: minmax(auto, auto);
}
main section .bb5{
  grid-column: 1/3;
  grid-row: 1/2;
}
main section .bb6{
  grid-column: 3/5;
  grid-row: 1/2;
}
main section .artisan{
  grid-column: 4/6;
  grid-row: 2/3;
}
main section .bb7{
  grid-column: 5/6;
  grid-row: 1/2;
}
main section .bb8{
  grid-column: 1/4;
  grid-row: 2/4;
}
main section .bb9{
  grid-column: 4/6;
  grid-row: 3/4;
}


/* ************************** REVEAL ******************************** */

.reveal-loaded .reveal [class*="reveal-"] {
  opacity: 0!important;
  transition: 0s!important;
  transform: translateY(30px)!important;
}

.reveal-loaded [class*="reveal-"]{
  transition: 1s cubic-bezier(.5, 0, 0, 1);
}

/* On ajoute du délai */
.reveal-loaded .reveal-2 {
  transition-delay: .1s;
}

.reveal-loaded .reveal-3 {
  transition-delay: .2s;
}

.reveal-loaded .reveal-4 {
  transition-delay: .3s;
}

.reveal-loaded .reveal-5 {
  transition-delay: .4s;
}

.reveal-loaded .reveal-6 {
  transition-delay: .5s;
}

.reveal-loaded .reveal-7 {
  transition-delay: .6s;
}

.reveal-loaded .reveal-8 {
  transition-delay: .7s;
}

.reveal-loaded .reveal-9 {
  transition-delay: .8s;
}



/* ************************ RESPONSIVE ****************************** */


@media (max-width: 1750px) {
  main section .description{
    font-size: 2.5em;
  }
}

@media (max-width: 1450px) {
  main .social{
    left: -35%;
  }
  main h2{
    margin-top: 55px;
  }
  main section .content-1{
    grid-template-columns: repeat(6, 1fr);
  }
  main section .bb4{
    grid-column: 1/3;
    grid-row: 1/4;
  }
  main section .bb2{
    grid-column: 3/5;
    grid-row: 1/3;
    object-position: right;
  }
  main section .quality{ 
    grid-column: 3/5;
    grid-row: 3/4;  
  }
  main section .bb3{
    grid-column: 1/3;
    grid-row: 4/6;
  }
  main section .bb1{
    grid-column: 3/5;
    grid-row: 4/6;
    object-position: left;
  }
  main aside{
    grid-column: 5/7;
    grid-row: 1/7;
  }
  main section .work{
    grid-column: 1/5;
    grid-row: 6/7;
  }

  main section .bb5{
    grid-column: 1/3;
    grid-row: 1/2;
  }
  main section .bb6{
    grid-column: 4/6;
    grid-row: 1/2;
  }
  main section .artisan{
    grid-column: 3/6;
    grid-row: 2/3;
  }
  main section .bb7{
    grid-column: 3/4;
    grid-row: 1/2;
  }
  main section .bb8{
    grid-column: 1/3;
    grid-row: 2/4;
  }
  main section .bb9{
    grid-column: 3/6;
    grid-row: 3/4;
  }
  
}

@media (max-width: 1000px) {
  main .social{
    left: -35%;
  }
  main h2{
    margin-top: 55px;
  }
  main section .content-1{
    grid-template-columns: repeat(4, 1fr);
  }
  main section .bb4{
    grid-column: 1/3;
    grid-row: 1/2;
  }
  main section .bb2{
    grid-column: 3/5;
    grid-row: 1/2;
  }
  main section .quality{ 
    grid-column: 1/5;
    grid-row: 2/3;  
  }
  main section .bb3{
    grid-column: 1/3;
    grid-row: 3/4;
  }
  main section .bb1{
    grid-column: 3/5;
    grid-row: 3/4;
  }
  main aside{
    grid-column: 1/5;
    grid-row: 5/6;
    font-size: 16px;
  }  
  main aside .couple{
    height: 200px;
    width: 200px;
    float: left;
    margin: 0 20px 20px 0;
  }  
  main aside .who{
    font-size: 27px;
  }
  
  main section .work{
    grid-column: 1/5;
    grid-row: 4/5;
  }

  main section .content-2{
    grid-template-columns: repeat(4, 1fr);
  }
  main section .bb5{
    grid-column: 1/3;
    grid-row: 2/3;
  }
  main section .bb6{
    grid-column: 1/3;
    grid-row: 3/4;
  }
  main section .artisan{
    grid-column: 1/5;
    grid-row: 1/2;
  }
  main section .bb7{
    grid-column: 3/5;
    grid-row: 3/4;
  }
  main section .bb8{
    grid-column: 3/5;
    grid-row: 2/3;
  }
  main section .bb9{
    display: none;
    grid-column: 3/6;
    grid-row: 3/4;
  }  
}

@media (max-width: 628px) {
  main .social{
    left: -30%;
  }
  main h2{
    margin-top: 55px;
    font-size: 2.5em;
  }
  main section .description{
    font-size: 2em;
  }
  .reveal-loaded .reveal [class*="reveal-"] {
    opacity: 1!important;
    transition: 0s!important;
    transform: translateY(0px)!important;
  }
}

@media (max-width: 475px) {
  main .social{
    left: -25%;
  }
  main h2{
    font-size: 1.6em;
  }
  main section .description{
    font-size: 1.2em;
  }
  main section .content-1{
    grid-template-columns: repeat(1, 0fr);
  }
  main section .bb4{
    grid-column: 1/2;
    grid-row: 1/2;
  }
  main section .bb2{
    grid-column: 1/2;
    grid-row: 2/3;
  }
  main section .quality{ 
    grid-column: 1/2;
    grid-row: 3/4;  
  }
  main section .bb3{
    grid-column: 1/2;
    grid-row: 4/5;
  }
  main section .bb1{
    grid-column: 1/2;
    grid-row: 5/6;
  }
  main aside{
    grid-column: 1/2;
    grid-row: 6/7;
    font-size: 16px;
    width: auto;
    max-width: 100px;
  }
  main aside .couple{
    height: 200px;
    width: 200px;
    float: left;
    margin: 0 20px 20px 0;
  }  
  main aside .who{
    font-size: 27px;
  }
  
  main section .work{
    grid-column: 1/2;
    grid-row: 7/8;
  }

  main section .content-2{
    grid-template-columns: repeat(1, 0fr);
  }
  main section .bb5{
    grid-column: 1/2;
    grid-row: 1/2;
  }
  main section .bb6{
    grid-column: 1/2;
    grid-row: 2/3;
  }
  main section .artisan{
    grid-column: 1/2;
    grid-row: 3/4;
  }
  main section .bb7{
    grid-column: 1/2;
    grid-row: 4/5;
  }
  main section .bb8{
    grid-column: 1/2;
    grid-row: 5/6;
  }
  main section .bb9{
    display: none;
    grid-column: 3/6;
    grid-row: 3/4;
  }  
}

@media (max-width: 350px) {
  main .social{
    left: 0;
  }
  main h2{
    font-size: 1.3em;
  }
  main section .description{
    font-size: 1.6em;
  }
}