/*
* {
  box-sizing: border-box;
}
 
 width of page
 
body, html {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

*/

.wrapper {
  display: flex;
  width: 60%;
  justify-content: space-around;
}

.card {
/* Changed this --was 280*/
  width: 106px;/* space inbetween cards  was 106px*/
  /* changed this was 360.... then 468     525 puts a nice rim on the bottom*/
  height: 525px; 
  /* I added this CB  increase number to round corners--- was 15px*/
  border-radius: 5px;
  padding: 1.5rem;
  background: white;
  position: relative; /* changed this to "fixed*/
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
  z-index:1; /* I added this*/
}
.card:hover {
  transform: translateY(20px); /*how far the CARD moves when hovering*/
}

 /* If set to 0, when hovering it dosent go dark, or to the color */
.card:hover:before {
  opacity: 1;
}


.card:hover .info {
/* If set to 0, =no text seen */
  opacity: 1;
  transform: translateY(30px); /* how far down words move when hoverinmg- makes the words move down a little slower when you increase the number.....nice though!!*/
}


.card:before {
  content: "";
  position: absolute;/* changed this to "fixed*/
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  /*  More/less rounded image corners -  made this 5 to match .card  border-radius above*/
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.6);
  /* z index for text- more foward */
  z-index: 3;
  transition: 0.5s; /* how long it takes to transition color ...or here get dark*/
  /* if set to 1 ,pannel stays dark*/
  opacity: 0;
}
.card img {
  width: 154; /* orig 154*/
  height: 568;/* orig 468 ..*/
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 3;/* moves image down*/
  left: 0;
  /*  More/less rounded image corners -  made this 5 to match .card  border-radius above*/
  border-radius: 5px;
  z-index:2;/* I added this AND had to chang it from 3 to 2 in onder to get the card to fade to black when hovered*/
  
  
}



.card .info {
	/*position: static; changed to fix*/
	z-index: 3;
	color: white;
	opacity: 1;
	transform: translateY(-30px); /*moves the text....the higher the neg number the higher the text*/
	transition: 0.5s;



}
.card .info h1 {
  margin: 0px;

  /*position: static;added*/
  /* transform: translateY(300px)added*/
}







.card .info button {
  padding: 0.6rem;
  outline: none;
  border: none;
  border-radius: 3px;
  background: white;
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: 0.4s ease;
}
.card .info button:hover {
  background: dodgerblue;
  color: white;
}