@media screen and (max-width: 600px) {
    .image {
      height: 10vh;
    }
  }
  
  
  @media screen and (max-width: 800px) {
    .image {
      height: 20vh;
    }
  }

  @media screen and (max-width: 1200px) and (min-width: 600px) {
    .foreground-text, .foregroundspacer {
        font-size: 0.6rem;
    
    }
  }

  @media screen and (max-width: 600px)  {
    .foreground-text, .foregroundspacer {
        font-size: 0.6rem;
    
    }
  }

  @media screen and (max-width: 1200px) and (min-width: 600px) {
    .foreground-achondrite,  .foreground-chondrite, .foreground-siderite {
        font-size: 0.6rem;
    
    }
  }

  @media screen and (max-width: 600px)  {
    .foreground-achondrite,  .foreground-chondrite, .foreground-siderite{
        font-size: 0.6rem;
    
    }
  }

  @media screen and (max-width: 1200px) and (min-width: 600px) {
    .achondrite-ok, .chondrite-ok, .siderite-ok {
        font-size: 0.6rem;
    
    }
  }

  @media screen and (max-width: 600px)  {
    .achondrite-ok, .chondrite-ok, .siderite-ok {
        font-size: 0.6rem;
    
    }
  }

  @media screen and (max-width: 1200px) and (min-width: 600px) {
    h2 {
        top : 46%;
    
    }
  }

  @media screen and (max-width: 800px)  {
    h2 {
        top : 46%;
    
    }
  }

  /* @media screen and (min-width: 1000px) {
    .foreground-text, .foregroundspacer {
        font-size: 0.7rem;
    
    }
  }
  
  @media screen and (min-width: 1200px) {
    .foreground-text, .foregroundspacer {
        font-size: 0.8rem;
    
    }
  } */
  
  
  /* @media screen and (max-width: 800px) {
    .foreground-spacer   .foreground-text{
        font-size: 0.6rem;
    }
  } */