<section class="promo--tryptich">
  <div class="promo-item">
    <span class="border border--top border--left"></span>
    <span class="border border--top border--right"></span>
    <span class="border border--bottom border--left"></span>
    <span class="border border--bottom border--right"></span>
    <div class="promo__content--wrap">
          <h3 class="promo__header">
            Easy Assembly
          </h3>
          <div class="promo__content">
            <p class="promo__content__text">
              With SteelTek you can assemble in minutes what would normally take hours of build time.
            </p>
            <span class="promo__content__link">Read More »</span>
          </div>
        </div>
        <svg class="hexagon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 200 226.2" style="enable-background:new 0 0 200 226.2;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
      </style>
      <path class="st0" d="M193.1,51.6L106.7,1.8c-4.1-2.4-9.2-2.4-13.3,0L6.9,51.6C2.8,54,0,58.4,0,63.1v100.1c0,4.7,2.8,9.1,6.9,11.5  l86.4,49.8c4.1,2.4,9.2,2.4,13.3,0l86.5-49.8c4.1-2.4,6.9-6.8,6.9-11.5V63.1C200,58.4,197.2,54,193.1,51.6z"/>
      <g id="site_styles_1_">
      </g>
      </svg>
    </div>
  </div>
</section>

@import url('https://fonts.googleapis.com/css?family=Arvo:700|Roboto');
$bg-color: white;

.promo--tryptich {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $bg-color;
  
  .promo-item {
    height: 75vh;
    width: 75vh;
    background-color: #9ACA3C;
    position: relative;
    overflow: hidden;
    
    .promo__content--wrap {
      position: relative;
      z-index: 1;
      padding: 15%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      
      .promo__header {
        font-family: 'Arvo', serif;
        font-style: normal;
        font-weight: 900;
        font-size: 3em;
        text-align: center;
        line-height: 1.25;
        color: #56c6d0;
        margin: 0;
      }
      
      .promo__content {
            transition: 1.2s;
            max-height: 0;
            height: auto;
            width: 100%;
            opacity: 0;
        
        &__text {
          font-family: 'Roboto', sans-serif;
          color: #2d5369;
          font-size: 1.75em;
          text-align: center;
          margin: 30px 0;
        }
        
        &__link {
          font-family: 'Arvo', serif;
          color: #2d5369;
          font-size: 2em;
          transition: .2s;
          display: block;
          text-align: center;
          
          &:hover {
            color: #9aca3C;
          }
        }
      }
    }
  
    .hexagon {
      height: 90%;
      width: 90%;
      position: absolute;
      top: 5%;
      left: 5%;
      z-index: 0;
      opacity: .55;
      transition: 1.2s;
    }
    
    &:hover {
      cursor: pointer;
      
      .promo__content {
        max-height: 200px;
        opacity: 1;
      }
      
      .hexagon {
        height: 200%;
        width: 200%;
        transform: rotate(360deg);
        top: -50%;
        left: -50%;
      }
    }
  }
}

.border {
  position: absolute;
  height: 30px;
  width: 30px;
  
  &::before, &::after {
    content: '';
    background-color: $bg-color;
    display: block;
    position: absolute;
  }
  
  &::before {
    height: 10px;
    width: 100%;
  }
  
  &::after {
    height: 100%;
    width: 10px;
  }
  
  &--top {
    top: 0;
    &::before {
      top: 0;
    }
  }
  
  &--bottom {
    bottom: 0;
    &::before {
      bottom: 0;
    }
  }
  
  &--left {
    left: 0;
     &::after {
      left: 0;
    }
  }
  
  &--right {
    right: 0;
    &::after {
      right: 0;
    }
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 12px;
}