header
  h1 Find your favorite place...
.container
  .thumbex
    .thumbnail
      a(href="javascript:void(0)") 
       img(src="https://bit.ly/2vnI5ZM")
       span Beaches
  .thumbex     
    .thumbnail
      a(href="javascript:void(0)")
       img(src="https://bit.ly/3qgufUp")
       span Mountains
  .thumbex
    .thumbnail
      a(href="javascript:void(0)")
       img(src="https://bit.ly/2NZ6ahm")
       span Forest

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');

$font: 'Raleway', sans-serif;

*{
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background: #84e8dc;
  background: -moz-linear-gradient(-45deg, #84e8dc 0%, #f4ed8b 100%);
  background: -webkit-linear-gradient(-45deg, #84e8dc 0%,#f4ed8b 100%);
  background: linear-gradient(135deg, #84e8dc 0%,#f4ed8b 100%);
}

header {
  padding: 50px 0;
  
  h1{
    color: white;
    text-shadow: 1px 3px 4px rgba(0,0,0,0.4);
    text-align: center;
    font-size: 40px;
    letter-spacing: 0.4px;
    font-family: $font;
  }
}

.container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  padding: 0 30px;
  
  .thumbex{
    margin: 10px 20px 30px;
    width: 100%;
    min-width: 250px;
    max-width: 435px;
    height: 300px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    outline: 2px solid white;
    outline-offset: -15px;
    background-color: blue;
    box-shadow: 5px 10px 40px 5px rgba(0,0,0,0.5);
    
    .thumbnail{
      overflow: hidden;
      min-width: 250px;
      height: 300px;
      position: relative;
      opacity: 0.88;
      backface-visibility: hidden;
      transition: all 0.4s ease-out;
      
      
      img{
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        height: 115%;
        width: auto;
        transform: translate(-50%, -50%);
        backface-visibility: hidden;
      }
      
      span{
        position: absolute;
        z-index: 2;
        top: calc(150px - 20px);
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.7);
        padding: 10px 50px;
        margin: 0 45px;
        text-align: center;
        font-size: 24px;
        color: white;
        font-weight: 300;
        font-family: $font;
        letter-spacing: 0.2px;
        transition: all 0.3s ease-out;
      }
      
      &:hover{
        backface-visibility: hidden;
        transform: scale(1.15, 1.15);
        opacity: 1;
        
        span{
          opacity: 0;
        }
        
      }
    }
  }
}

// No javascript!