.container
  article
    img(src="https://images.unsplash.com/photo-1482624056776-f0cda15a49cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=906&q=80", alt="").feature_image
    header
      h1 Hello, vacation
      p Isn't it time you got away from it all?
    main
      p All about it
      p Swimsuit pool surfing music amusement park summer fins, stand up paddleboarding seashells getaway sushi snorkel popsicle. Chalet ship pool postcard mojito seashore, catamaran scenery vacation Bluetent longboard sailing pool. Photographs offpiste airplane holiday guided tour, catamaran snorkel seashells offpiste comfort popsicle.
      
      p Clam bake eco tour destination, offpiste family sunscreen museum souvenirs amenities water taxi surfing amenities. Sights read a book explore summer sea coast, safari wedding sun photographs.
  .toaster
    .wrapper
      header.cta_header
        h1 Want more info? Check out our guides!
        svg(xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24").expand_icon
          path(d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z")
          path(d="M0 0h24v24H0z" fill="none")
      .airplane_icon_wrapper.airplane_left
        svg(viewBox="0 0 24 24").airplane_icon
          path(d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z")
      .airplane_icon_wrapper.airplane_right
        svg(viewBox="0 0 24 24").airplane_icon
          path(d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z")
      .promo
        p The mountains are beckoning, and your dream vacation awaits.
      
        p Check out our trekking guides to get your trip planning satarted!
        
        button.cta Start Browsing
      
    

html {
  font-size: 1rem;
}

body {
  margin: 0;
  padding: 0;
  background: #464646;
  background-image: linear-gradient(147deg, #4a4a4a 0%, #25303c 74%);
  color: #3c3c3c;
  font-family: "Lato", arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

.feature_image {
  grid-row: 1 / 1;
}

.container {
  max-width: 450px;
  margin: 20px auto;
  background-color: #fbfbfd;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

header {
  grid-row: 2 / span 1;
  color: #fff;
  h1 {
    font-family: "Merriweather", serif;
    margin: 0.4rem 0;
    font-size: 2.5rem;
  }
  p {
    margin: 0;
  }
}

header,
main {
  padding: 30px 20px;
}

article {
  display: grid;
  grid-template-rows: 570px auto 1fr;
  height: 100%;
}

.toaster {
  background-color: #02324a;
  color: #fff;
  position: absolute;
  bottom: 0;
  height: 60px;
  padding: 0 20px;
  transition: height 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);

  &.is_open {
    height: 320px;
  }

  h1 {
    font-size: 1.1rem;
    margin: 0.1rem 0;
    font-family: "Lato", arial, sans-serif;
  }

  header {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .wrapper {
    display: grid;
    grid-template-rows: 60px 1fr 1fr;
    height: 100%;
    position: relative;
  }
}

.airplane_icon {
  fill: #fff;
  width: 40px;
  height: auto;
  display: block;
  width: 32px;
  height: auto;
}

.airplane_icon_wrapper {
  position: absolute;
  opacity: 0;
  bottom: 0;
  
  &.airplane_left {
    left: 50px;
    
    &.is_moving {
      opacity: 1;
      animation: flyby_left 1s ease-in forwards;
    }
  }
  
   &.airplane_right {
    right: 160px;
     
     &.is_moving {
       animation: flyby_right 1s ease-in forwards;
     }
  }

}

.cta {
  letter-spacing: 0.07rem;
  background-color: #337a96;
  border-color: #337a96;
  display: block;
  color: #fff;
  border-radius: 4px;
  padding: 16px 12px;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: "Lato";
  width: 100%;
  margin: 20px 0 0;
  transition: all 0.3s ease-in;
  
  &:hover,
  &:active,
  &:focus {
    background-color: #49a1c3;
    border-color: #49a1c3;
  }
}

.expand_icon {
  fill: #fff;
  width: 30px;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);

  &.is_reversed {
    transform: rotate(180deg);
  }
}

@keyframes flyby_left {
  0% {
    transform: translateY(0%) translateX(-5%) rotate(-5deg) scale(0);
  }
  10% {
    transform: translateY(-80%) translateX(-7%) rotate(-10deg) scale(1);
  }
  25% {
    transform: translateY(-200%) translateX(-8%) rotate(-15deg) scale(1.1);
  }
  50% {
    transform: translateY(-250%) translateX(10%) rotate(-20deg) scale(1.2);
  }
  80% {
    transform: translateY(-680%) translateX(-100%) rotate(-40deg) scale(0);
  }
  100% {
    transform: translateY(-870%) translateX(-340%) rotate(-55deg) scale(0.8);
  }
}

@keyframes flyby_right {
  0% {
    opacity: 1;
    transform: translateX(-5%) translateY(-70) rotate(5deg) scale(0);
  }
  10% {
    transform: rotate(8deg) scale(1);
  }
  25% {
    transform: translateY(-200%) translateX(50%) rotate(10deg) scale(1.2);
  }
  50% {
    transform: translateY(-250%) translateX(80%) rotate(20deg);
  }
  80% {
    transform: translateY(-680%) translateX(380%) rotate(45deg) scale(0.9);
  }
  100% {
    transform: translateY(-950%) translateX(620%) rotate(65deg);
  }
}

const cta = document.querySelector('.cta_header');
const footer = document.querySelector(
'.toaster')
const expandIcon = document.querySelector('.expand_icon')
const airplaneIcon = document.querySelectorAll('.airplane_icon_wrapper')

function toggleFooter() {
  footer.classList.toggle('is_open');
  expandIcon.classList.toggle('is_reversed')
  Array.from(airplaneIcon).map(icon => icon.classList.toggle('is_moving'))
}

cta.addEventListener('click', toggleFooter);