*{
    margin: 0;;
    box-sizing: border-box;
    font-family: 'Lato',sans-serif;
}
.red{
    height: 500px;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #dd3f31;
}
.pink {
    height: 400px;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #ff0066;
}    
.dark {
    height: 400px;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #202731;
  }
.spacer {
    aspect-ratio: 960/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.layer1 {
    height: 100%;
    background-image: url('pics/layer1.svg');
}
.layer2 {
    height: 100%;
    background-image: url('pics/layer2.svg');
}
.wrapper{
    display:flex;
    position: relative;
    justify-content: center;
}
.wrapper2{
    margin-bottom:200px;
    position: relative;
    display:flex;
    justify-content: center;
}
.wrapper3{
    margin-bottom:100px;
    position: relative;
    display:flex;
    justify-content: center;
}
.card{
    width:280px;
    height:360px;
    padding:2rem 1rem;
    background:#fff;
    position: relative;
    display: flex;
    align-items: flex-end;
    box-shadow: 0px 7px 10px  rgba(0, 0, 0, 0.5);
    transition: 0.5s ease-in-out;
    margin-right: 50px;
}
.card:hover{
    transform:translateY(20px)
}
.card:before{
    content: "";
    position: absolute;
    top: 0;
    left:0;
    display:block;
    width:100%;
    height:100%; 
    background:linear-gradient(to bottom,rgba(0,176,155,0.5),rgba(150,201,61,1));
    z-index:2;
    transition: 0.5s all;
    opacity: 0;
}
.card:hover:before{
    opacity: 1;
}
.card img{
    width:100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left:0;
}
.card .info{
    position: relative;
    z-index: 3;
    color:#fff;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.5s all;
}
.card:hover .info{
    opacity: 1;
    transform:translateY(0px);
}
.card .info h1{
    margin:0;
}
.card .info p{
    letter-spacing: 1px;
    font-size: 15px;
    margin-top: 8px;
    margin-bottom: 20px;
}
.card .info .btn{
    text-decoration: none;
    padding:0.5rem 1rem;
    background:#fff;
    color:#000;
    font-size: 14px;
    font-weight: bold;
    cursor:pointer;
    transition: 0.4s ease-in-out;
}
.card .info .btn:hover{
    box-shadow: 0px 7px 10px  rgba(0, 0, 0, 0.5);
}
#page{
    align-items: center;
    background: #ff0066;
    display: flex;
    justify-content: center;
    height: 100px;
}
.pbtn{
    margin-right: 10px;
    border:none;
    background-color: hsl(0, 0%, 60%);
}
.selected{
    background-color: hsl(0, 0%, 80%);
}
.pbtn:hover{
    box-shadow: 0px 7px 10px  rgba(0, 0, 0, 0.5);
}
.pbtn:active{
    background-color: hsl(0, 0%, 100%);
}
@media only screen and (max-width:500px){
    main{
        overflow-x:hidden;
    }
    .red{
        height:180px;
    }
    .pink{
        height:180px;
    }
    .dark{
        height:180px;
    }
    .wrapper{
        margin-left:50px;
    }
    .wrapper2{
        margin-left:50px;
        margin-top:150px
    }
    .wrapper3{
        margin-left:50px;
        margin-top:100px
    }
    .card{
        padding:0;
        width:90px;
        height:130px;
        justify-content: center;
        align-items: center;
    }
    .card:hover .info{
        transform:scale(0.6);
        position:absolute;
        margin-left: 0;
    }
}