@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,900&display=swap');

:root{
  --light-white: #DADDF0;
  --Spacial: #035D51;
  --light-blue: #009798;
  --dark: #00212B;
  --special-dark: #002B36;
  --background: #F38181;
  --headingColor: #ee0758;
  --headerBG: #121212;  
}
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   transition: 0.5s;
   font-family: "Poppins";
}
body{
   overflow-x: hidden;
}

.container{
   width: 80%;
   margin: auto;
   margin-bottom: 30px;
}
.container h1{
   color: var(--headingColor);
   text-align: center;
   margin: 30px;
   letter-spacing: 5px;
   font-size: 40px;
}
.container h1::after{
   content: "-----";
   letter-spacing: -15px;
   font-weight: lighter;
   margin: 0 20px 0 10px;
}
.container h1::before{
   content: "-----";
   letter-spacing: -15px;
   font-weight: lighter;
   margin: 0 20px 0 10px;
}
.container .row{
   display: flex;
   justify-content: space-between;
}
.container .column{
   width: 32%;
   height: 300px;
   position: relative;
   overflow: hidden;
}
.container .column img{
   width: 100%;
   height: 100%;
}
.container .column a:last-child{
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 99%;
   bottom: 0;
   left: 0;
   bottom: 0;
   background-color: var(--headingColor);
   text-align: center;
   padding-top: 14vw;
   font-size: 3vw;
   color: #ffffff;
   text-decoration: none;
}
.container .column:hover a:last-child{
   height: 100%;
   top: 0;
}

@media(max-width:760px)
{
   .container .column{
      width: 49%;
      height: auto;
      margin-right: 10px;
      margin-bottom: 20px;
   }
   .container .row{
      display: inline;
   }
}

@media(max-width:640px)
{
   .container .column{
      width: 80%;
      height: auto;
      text-align: center;
   }
   .container .row{
      display: block;
      text-align: center;
   }
}