:root{
    --card-image-height : 250px;
}

.landing-background{
  background-image: url("images/landing.jpg");
}

.faq li{
    margin-bottom: 20px;
}

p.question{
    font-weight: bold!important;
}

.faq li span{
    display: flex;
}


.card-container{
    grid-auto-flow: column;
  }
  
  .card{
    justify-content: space-between;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }
  
  .card .content{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding : 1.5rem;
    padding-bottom: calc( var(--card-image-height) + 20px);
  }
  
  .card > h3 {
    height: 64px;
  }
  
  .card .image{
    display: flex;
    height: var(--card-image-height);
    width: 100%;
    bottom : 0px;
    position : absolute;
  }
  
  
  
  .card .image > div:not(.embla){
    flex: 1;
    background-size: cover;
    background-position-x: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card .image > div.cells{
  background-position-y: 54%;
  }

  .card .image > div.kit{
    background-image: url("images/kit.png");
    background-position-y: -50px;
  }

  .card.synchrotron .image div.embla__slide:nth-child(1){
    background-image: url("images/synchsupport1i.png");
  }

  .card.synchrotron .image div.embla__slide:nth-child(2){
    background-image: url("images/synchsupport2.png");
  }

  .card.synchrotron .image div.embla__slide:nth-child(3){
    background-image: url("images/synchsupport3i.png");
  }

  .card.advanced-analysis .image div.embla__slide:nth-child(1){
    background-image: url("images/analysis1.png");
  }

  .card.advanced-analysis .image div.embla__slide:nth-child(2){
    background-image: url("images/analysis2i.png");
  }

  .card.advanced-analysis .image div.embla__slide:nth-child(3){
    background-image: url("images/analysis3i.png");
  }

    
  
  .card .image  a{
    position : absolute;
    opacity: 0;
    top: 50%;
    text-decoration: none;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3em;
    background-color: var(--color-gray);
    padding: 0.5em;
    border: 1px solid;
    margin: unset;
    cursor: pointer;
    user-select: none;
  }

  .card.hover .embla__slide.contain{
    background-size: contain;
  }
  
  .card.hover .image {
    height: 100%;
    transition: all 0.1s ease-in;
  }
  
  
  .card.hover .image div {
    opacity:0.95;
    background-position-y: center!important;
  }
  
  .card.hover .image a {
    opacity: 1;
    transition-duration:  0.5s;
    transition-property: opacity;
  }

  .card.hover .embla__slide.is-snapped{
    flex-basis:100%;
  }

  .card.hover .embla__slide:not(.is-snapped){
    flex-basis:0%;
  }
  
  @media (max-width: 640px) {

    :root {
        --card-image-height : 144px;
    }

          .card .image > div.kit{
        background-position-y: -23px;
      }

    .card .image a {
      font-size: 1rem;
    }
  }

  @media (max-width: 768px) {
    .card h3{
      height: unset;
      word-break: break-word;
    }

    .card:not(:first-child){
      margin-top : 70px;
    }
  
  }
  
    @media (max-width: 1028px){
      .title-container{
        flex-direction: column;
      }
  
      .landing-background{
        min-height: 300px;
        background-position: center!important;
      }
    }

  @media (min-width: 768px) and (max-width: 1280px) {
    .card h3 {
        height: 100px;
      }
    }

  @media (min-width: 640px) and (max-width: 1280px) {
   
      .landing-background{
        min-height: 400px;
      }
  }

  @media (min-width: 1028px){
    .card h3 {
        height: 64px;
      }
    
      .card p {
        margin-bottom: 1em;
      }
  }