body{
      background-color: oklch(0.93 0 0 / 0.42);
      font-family: Arimo, sans-serif;
    }
    h1{
      font-size: 2rem;
      margin-bottom: 2.5rem;
    }
    a{
      color:rgba(0,0,0,0.5);
      transition: color 0.3s ease;
      text-decoration: none;
    }
    a:hover,
    a.active{
      color:rgba(0,0,0,1);
    }
    
    .main{
      display: grid;
      grid-template-columns: repeat(12,1fr);
      grid-template-rows: auto;
      gap: 2rem;
      align-items: start;
      /* position: relative; */
    }
    .header{
      display: flex;
      justify-content: center;
      gap: 1rem;
    }
    figure{
      grid-column: 1 / -1;
      box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.4);
      padding:0;
      margin:0;
    }
    
    figure.mobile{
        grid-column: 4 / -4;
      }
    img{
      display: block;
      width:100%;
      height: auto;
      object-fit: contain;
    }
    @media screen and (min-width:1200px) {
      
      .odd{
      grid-column: 3 / 7;
    }
    .even{
      grid-column: 7 / -3;
    }
    .sub-grid{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-template-rows: auto;
      gap: 2rem;
      align-items: start;
    }
    .sub-grid > .mobile.odd{
      grid-column: 1 / 3;

    }
     .sub-grid > .mobile.even{
      grid-column: 3 / -1;

    }
     .mobile{
        grid-column: 4 / -4;
      }
      .centered{
        grid-column: 5 / 9;
      }
      figure.mano{
        grid-column: 4 / -4;

      }
      
    }