body {
    background-color: #6c0404; 
    color: #000000;
  }
  
  @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); 
  @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Pinyon+Script&display=swap');
  
  :root {
  
      /* VARIABLES */
  
      /* Typography */
    --headingFont: 'DM Serif Display', sans-serif;
    --bodyFont: 'DM Serif Display', sans-serif;
  
    --baseFontSize: clamp(0.75rem, 0.78rem + 0.38vw, 1.25rem);
  
    --type-scale: 1.57;
  }
  html {
      font-size: var(--baseFontSize);
      scroll-behavior: smooth;
      font-family: var(--bodyFont);
    }
  
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--headingFont);
      margin-bottom: var(--space-3);
    }  

        /* basic grids */
    main {
        width: 90vw;
        margin: 0 auto;
        }

.title {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
  padding-top: 5%;
  padding-left: 6%;
}

.custom-line {
  border: none; /* Remove default border */
  height: 3px; /* Set line thickness */
  background-color: #000000; /* Set color */
  margin: 5vw auto; /* Center it and add margin */
  width: 90vw; /* Line width */
}

.maingrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(11, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  opacity: 50%;
}

.maingrid img {
  height: auto; /* Maintain aspect ratio */
  transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
}

.maingrid img:hover {
  transform: scale(1.03); /* Scale the image to 120% */
}

.maingrid li:nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 1 / span 3;
}

.maingrid li:nth-child(2) {
  grid-row: 2 / span 3;
  grid-column: 6 / span 7;
}

.maingrid li:nth-child(3) {
  grid-row: 6 / span 8;
  grid-column: 1 / span 2;
}

.maingrid li:nth-child(4) {
  grid-row: 4 / span 6;
  grid-column: 3 / span 3;
}

.maingrid li:nth-child(5) {
  grid-row: 5 / span 7;
  grid-column: 5 / span 6;
}

.maingrid li:nth-child(6) {
  grid-row: 9 / span 9;
  grid-column: 1 / span 2;
}

.maingrid li:nth-child(7) {
  grid-row: 9 / span 9;
  grid-column: 3 / span 3;
}

.maingrid li:nth-child(8) {
  grid-row: 9 / span 9;
  grid-column: 7 / span 7;
}

.maingrid li:nth-child(9) {
  grid-row: 1 / span 1;
  grid-column: 4 / span 4;
}

.maingrid li:nth-child(10) {
  grid-row: 2 / span 2;
  grid-column: 5 / span 5;
}

.maingrid li:nth-child(11) {
  grid-row: 7 / span 7;
  grid-column: 3 / span 3;
}

.maingrid li:nth-child(12) {
  grid-row: 5 / span 5;
  grid-column: 2 / span 2;
}

.maingrid li:nth-child(13) {
  grid-row: 8 / span 8;
  grid-column: 4 / span 4;
}

.maingrid li:nth-child(14) {
  grid-row: 9 / span 9;
  grid-column: 1 / span 1;
}

.maingrid li:nth-child(15) {
  grid-row: 11 / span 11;
  grid-column: 4 / span 4;
}

.maingrid li:nth-child(16) {
  grid-row: 10 / span 10;
  grid-column: 6 / span 7;
}

  nav {
    margin-left: 5vw;
    height: 80px;
    background: #6c0404;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem calc((100vw - 1300px)/2);
  }
  nav a {
      color: #000000;
      padding: 0 1.5rem;
  }
  
  figure img {
    width: 100px;
    height: auto;
    margin-top: 3rem;
  }