/* --------------- inform card ------------ */
 .wrapper {
    background-color: rgba(90, 87, 125, 0.294);
    display: grid;
    gap:1rem;
    width:90vw;
    overflow-x:scroll;
    scroll-snap-type: x mandatory; 
  }

 .informCardContainer {
    /* width: 80vw; */
    /*  if in carousel shouldn't be more than 4 columns */
    margin:auto;
    display: grid;
    grid-template-columns:  1fr 1fr 1fr 1fr 1fr; 

    flex-direction: row;
    border-radius: 10px;
    justify-content: flex-end;
   

    
    /* root */
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
    /* Fonts */
    --font-title: "Montserrat", sans-serif;
    --font-text: "Lato", sans-serif;
  
  }
  


/* Box sizing rules */
.informCardContainer *,
.informCardContainer *::before,
.informCardContainer *::after {
  box-sizing: border-box;
}





  .informCardContainer  h2 {

    font-size: 1.1rem;
    font-family: var(--p700);
    color: white;
    line-height: 1;
    margin: 0;
  }


  .informCardContainer  p {
    margin: 3%;
    margin-top: 8%;
    font-family: var(--p700);
    font-size: 0.8rem;
    color: white;

  }


  .flow > * + * {
    margin-top: var(--flow-space, 2rem);
  }
  
  

  
  /*  -------  inform cards ------------------- */
  
  .informCard {
    display: grid;
    place-items: center;
    /* max-width: 40rem; */
    width:12rem;
    height: 14rem;
    /* height: 30rem; */
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: 0.25rem 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
    margin: 0.4rem;
  
  }
  
  .informCard > * {
    grid-column: 1;
    grid-row: 1;
  
  }
  
  .card__background {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }
  
  .card__content {
    --flow-space: 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-end;
    width: 100%;
    height: 100%;
    padding: 6%;
    background: linear-gradient(
      180deg,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.3) 10%,
      hsl(0, 0%, 0%) 60%
    );
  
  }
  



  .card__content--container {
    --flow-space: 0.9rem;
  }
  
  .card__title {
    padding-top: 0.5rem;
    padding-left: 1rem;
    position: relative;
    width: fit-content;
    font-size: 1rem;
    width: -moz-fit-content; /* Prefijo necesario para Firefox  */
  }
  
  .card__title::after {
    content: "";
    padding-top: 0rem;
    position: absolute;
    height: 0.4rem;
    width: calc(100% + 1.2rem);
    bottom: calc((0.6rem) * -1);
    left: -1.2rem;
    background-color: var(--brand-color);
  }
  
  .card__button {
    padding: auto;
    min-width: 7rem;
    width: fit-content;
    width: -moz-fit-content; 
    font-variant: small-caps;
    font-weight: bold;
    border-radius: 0.3em;
    border: none;
    box-shadow: none;
    font-size: 1.1rem;
    color: white;;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    
  }
  
.card__button a. {
  background: yellow;
  }

  .card__button:focus {
    outline: 2px solid black;
    outline-offset: 2px;
  }
  
  @media (any-hover: hover) and (any-pointer: fine) {
    .card__content {
      transform: translateY(50%);
      transition: transform 500ms ease-out;
      transition-delay: 500ms;
    }
  
    .card__title::after {
      opacity: 0;
      transform: scaleX(0);
      transition: opacity 1000ms ease-in, transform 500ms ease-out;
      transition-delay: 500ms;
      transform-origin: right;
    }
  
    .card__background {
      transition: transform 500ms ease-in;
    }
  
    .card__content--container > :not(.card__title),
    .card__button {
      opacity: 0;
      transition: transform 500ms ease-out, opacity 500ms ease-out;
       color:white;
       line-height: 0.8rem;
       margin-bottom: 0.25rem;
    }
  
    .informCard:hover,
    .informCard:focus-within  .card__background{
      transform: scale(1.05);
      transition: transform 500ms ease-in;
    }
  
    .informCard:hover .card__content,
    .informCard:focus-within .card__content {
      transform: translateY(0);
      transition: transform 500ms ease-in;
    }
  
    .informCard:focus-within .card__content {
      transition-duration: 0ms;
    }
  
    .card__background {
      transition: transform 0.5s ease, filter 0.5s ease; /* Smooth animation for transform and blur */
  }
  
    
    .informCard:hover .card__background,
    .informCard:focus-within .card__background {
      transform: scale(1.1);
           /* Add the blur effect */
           filter: blur(8px);
           -webkit-filter: blur(8px);
  
    }
  
    .informCard:hover .card__content--container > :not(.card__title),
    .informCard:hover .card__button,
    .informCard:focus-within .card__content--container > :not(.card__title),
    .informCard:focus-within .card__button {
      opacity: 1;
      transition: opacity 500ms ease-in;
      transition-delay: 1000ms;
    }
  
    .informCard:hover .card__title::after,
    .informCard:focus-within .card__title::after {
      opacity: 1;
      transform: scaleX(1);
      transform-origin: left;
      transition: opacity 500ms ease-in, transform 500ms ease-in;
      transition-delay: 500ms;
    }
  
  
  }