$thumbnail-width: 99px;
$thumbnail-height: 140px;
$thumbnail-border: 5px;
$thumbnail-border-colour: rgba(11, 12, 12, .1);
$thumbnail-shadow-colour: rgba(11, 12, 12, .4);
$thumbnail-shadow-width: 0 2px 2px;

.gem-c-attachment {
  @include govuk-font(19);
  @include govuk-clearfix;
}

.gem-c-attachment__thumbnail {
  float: left;
  margin-bottom: govuk-spacing(3);
  margin-right: govuk-spacing(5);
  padding: $thumbnail-border;
  position: relative;
}

.gem-c-attachment__thumbnail-image {
  display: block;
  width: auto; // for IE8
  max-width: $thumbnail-width;
  height: $thumbnail-height;
  outline: $thumbnail-border solid $thumbnail-border-colour;
  border: $thumbnail-border-colour; // for IE9 & IE10
  background: govuk-colour("white");
  box-shadow: $thumbnail-shadow-width $thumbnail-shadow-colour;
}

.gem-c-attachment__title {
  @include govuk-font($size: 27);
  margin: 0 0 govuk-spacing(3);
}

.gem-c-attachment__metadata {
  @include govuk-font($size: 14);
  margin: 0 0 govuk-spacing(3);
}

.gem-c-attachment__abbr {
  cursor: help;
  text-decoration: none;
}