<section class="movie">
  <img
    alt="His Girl Friday."
    class="movie__poster"
    src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/download-movie-poster.jpg" />
  <div class="movie__instructions">
    <p>
      <a download href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/His%20Girl%20Friday%20%7C%20Public%20Domain%20Movies.webloc">Download movie</a>
    </p>
    <p class="movie__download-duration">
      <small>1.2 <abbr title="Gigabytes">GB</abbr>. A download of this size typically takes 15&ndash;25 minutes on an average connection for your area.</small>
    </p>
  </div>
</section>

// Variables
$breakpoint-wide: 30em;
$color-green-light: #d7f69e;
$transition-fast: 125ms;
$transition-slow: 500ms;
$transparancy-slight: 0.35;


// Download styling
a[download] {
  background-color: transparent;
  border-bottom: 1px solid transparentize($color-green-light, $transparancy-slight);
  box-shadow: inset 0 -0.4rem 0 transparentize($color-green-light, $transparancy-slight);
  color: $color-green-light;
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-decoration: none;
  transition: box-shadow ease-in-out $transition-fast; 

  // States
  &:focus,
  &:hover {
    border-bottom: none;
    box-shadow: none;
    transition: box-shadow ease-in-out $transition-fast;
  }
  
  // Media Queries
  @media screen and (min-width: $breakpoint-wide) {
    font-size: 1.5em;
  }
}




// Additional page styling
body {
  align-items: center;
  background-color: #495057;
  background: radial-gradient(ellipse at center, #495057 0%, #33383d 50%,#1b1e21 100%);
  color: #dee2e6;
  display: flex;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 400;
  height: 100vh;
  justify-content: center;
}

abbr[title] {
  cursor: help;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.movie {
  display: flex;
  width: 90vw;

  // States
  &:hover {
    .movie__poster {
      transform: rotate(0);
      transform: scale(1.15);
      transition: transform ease-in-out $transition-slow;
      
      // Feature queries
      @media screen and (prefers-reduced-motion: reduce) {
        transform: initial;
        transition: none;
      }
    }
  }

  // Media Queries
  @media screen and (min-width: $breakpoint-wide) {
    width: 80vw;
  }
  
  p {
    margin: 0;    
  }

  &__poster {
    box-shadow: 0 10px 30px -15px rgba(30, 33, 36, 0.85);
    height: 8rem;
    width: auto;
    transform: rotate(-3deg);
    transition: transform ease-in-out $transition-fast;

    // Media Queries
    @media screen and (min-width: $breakpoint-wide) {
      height: 14rem;
    }

    // Feature Queries
    @media screen and (prefers-reduced-motion: reduce) {
      transform: initial;
      transition: none;
    }
  }
  
  &__instructions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    margin-left: 1.5rem;
    max-width: 30ch;
     
    // Media Queries
    @media screen and (min-width: $breakpoint-wide) {
      margin-left: 2rem;
    }
  }

    
  &__download-duration {
    padding-top: 0.75em;
  }

  small {
    font-size: 0.85em;
  }
}