* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    font-size: 40px;
}

h2{
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 10px;
}

body{
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: hidden;
    width: 100%;
}

#cards{
    position: relative;
    overflow: hidden;
    transform: translateY(1.728rem);
    transition: transform 0.25s;
}

#cards img {
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
  }

#cards a:hover {
    transform: translateY(0);
}

#cards .behind{
    opacity: 1;
    transition: 0.25s;
}

#cards .over{
    position: relative;
    top: 1.44rem;
    opacity: 0;
    transition: 0.25s;
}

#cards a:hover .over{
    top:0;
    opacity: 1;
}

#cards a:hover .behind{
    top:0;
    opacity: 0;
}