html {
  font-size: 16px; /* Base font size 16px for easier scaling */
}

body{
  background-color: rgb(255, 255, 255);
    color: black;
    font-family: "Epilogue", sans-serif;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  
  header {
    align-content: center;
  }
  
  a{
    text-decoration: none;
    color: black;
  }
  
  a:hover{
    color: grey;
  }

  h1{
    font-weight: 300;
  }

  nav {
    display: flex;
    justify-content: flex-end;
    margin: 1.92rem 1.28rem 0 0; 
    text-transform: lowercase;
  }
  
  
  .hamburger {
    display: none; 
  }


  nav a {
    margin-left: 1.28rem; /* Conversion de 2vw */
    border-radius: 1.875rem; /* Conversion de 30px */
    border: 1px solid black;
    padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; /* Conversion des paddings */
    font-size: 0.75rem; /* Conversion de 9pt */
  }
  

  img {
    align-content: center;
  }

  p{
  line-height: 1.8;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0.9375rem; /* Conversion de 15px */
  margin: 1.25rem auto 0 auto; /* Conversion de 2vw et 0vw */
  width: 100%;  
}

.grid img {
  width: 100%;   
  height: 100%; 
  object-fit: cover; 
  aspect-ratio: 1 / 1; 
}

.list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 0.5rem; /* Space between items */
  margin: 0 0 0 1rem; /* Adjust left margin */
  font-size: 0.9rem; /* Consistent font size */
  align-items: start; /* Align items to the start of each grid cell */
}

.list li {
  list-style-type: none; /* Remove bullet points */
  margin-bottom: 0.5rem; /* Space between items */
}

.list a {
  text-decoration: none; /* Remove underline */
  color: inherit; /* Inherit color from parent element */
  display: block; /* Make the link a block-level element for easy click targets */
}

.img1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.img2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.img3 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.img4 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.img5 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.img6 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.img7 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.img8 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.img9 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.img10 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.img11 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.img12 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
} 


@media (max-width: 768px) {
  html {
    font-size: 1.
  }
  nav {
    flex-direction: column; /* Stack navigation items */
    align-items: flex-start;
    margin: 1rem;
  }

  .hamburger {
    display: block; /* Show hamburger menu */
  }

  .nav-links {
    display: none; /* Hide nav links by default */
    flex-direction: column;
    position: absolute;
    top: 3.75rem;
    right: 0;
    z-index: 1000;
    width: 100%;
    background-color: white;
  }

  .nav-links.active {
    display: flex; /* Show nav links when active */
  }

  nav a {
    padding: 1rem;
    border-radius: 0;
    border: none;
    text-align: center;
    width: 100%;
  }

  h1 {
    margin-left: 1rem; /* Adjust margin for heading */
    font-size: 1.8rem; /* Reduce font size */
  }

  .translation-container {
    display: block; /* Stack translation containers */
    font-size: 0.875rem; /* Adjust font size */
    margin-top: 1rem;
    padding-left: 1rem;
  }

  .list {
    display: block; /* Stack list items */
    font-size: 0.875rem; /* Adjust font size */
    gap: 0.5rem;
  }
}



@media (max-width: 320px) {
  html {
    font-size: 1rem; /* Adjust base font size for tablets */
  }

  main{
    font-size: 0.875rem; /* Adjust font size */
  }

  .container {
    width: 100%; /* Full width for containers */
    padding: 0; /* Remove padding */
    
  }

  .translation-container {
    width: 100%; /* Full width for translation container */
    line-height: 1.2rem; /* Adjust line height */
    margin-top: 0.5rem; /* Adjust margin */
    padding-left: 1rem;
  }

  .list {
    padding-left: 1rem; /* Adjust padding */
  }

  .list ul {
    margin-left: 1rem; /* Adjust margin */
    list-style-type: none; /* Remove bullet points */
  }

  .list a {
    display: block; /* Ensure links are block elements */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color */

  }
}