:root {
  --background-color: #fcfcfc;
  --primary-color: #c5d1b2;
  --secondary-color: #ccd8b9;
  --tertiary-color: #eff2ea;
  --primary: #212121;
  --secondary: #666;
  --tertiary: #9e9e9e;
  --gold: #c39740;
}

main img{
  width:100%;
}

.grid {
  column-gap: 2.4rem;
  align-items: start;
}

main .grid{
  column-gap: 4.8rem;
  align-items: center;
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

header section {
  background-color: var(--tertiary-color);
}

.section-hero{
  margin: 0;
}

header section div p {
  text-align: center;
  padding-bottom: 1.2rem;
}

h1, h2{
  align-self: center;
  justify-self: center;
}

h1 {
  grid-column: 1/5;
}

h2{
  text-align: center;
  padding-bottom:4.8rem;
  grid-column: 1/3;
}

.padding-section{
  padding: 12.8rem 2.4rem;
}

.tags{
  grid-template-columns: repeat(2, 1fr);
}

.tags div {
  flex-basis: 20%;
  flex-grow: 1;
  flex-shrink: 0;
}

.tags img {
  width: 100%;
}

.logiciel {
  display: flex;
  flex-wrap: wrap;
  row-gap: 3.6rem;
  column-gap: 5rem;
}

li{
  margin-bottom:0.8rem;
}

main section:nth-child(2n){
  background-color: var(--tertiary-color);
}

.splide{
  grid-column: 1/3;
}

#related-projects{
  max-width:120rem;
  margin:2.4rem 4.8rem;
  text-align: center;
}

.project-thumbnail, #prev-arrow, #next-arrow{
  cursor: pointer;
}

#nav-arrows{
  display: flex;
  justify-content: space-between;
}

.middle{
  display: flex;
  justify-content: center;
}

iframe{
  width: 36rem;
  height:48rem;
}

.social-media {
  position: fixed;
  display: flex;
  flex-direction: column;
  padding:1rem;
  background-color: var(--secondary-color);
  border-radius: 0 12px 12px 0;
  bottom: 40%;
  left: 0;
  cursor: pointer;
}

.img_50{
  width:50%;
}

@media (max-width:43.75em){
  .grid--2-cols, .grid--3-cols{
    grid-template-columns: 1fr;
  }

  h1, h2, .splide{
    grid-column: 1;
  }

}

@media (min-width:31.25em){
  iframe{
    width: 50rem;
    height:69rem;
  }

  #related-projects{
    max-width: 120rem;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  aside h2{
    grid-column: 1/3;
  }
}

@media (min-width:56.25em){
  iframe{
    width: 90rem;
    height:69rem;
  }

  #related-projects{
    grid-template-columns: repeat(4, 1fr);
  }

  aside h2{
    grid-column:1/7;
  }
}

@media (min-width:75em){
  iframe{
    width: 120rem;
    height:83rem;
  }
}