tsurupin/portfolio

@value colors: 'shared/styles/colors.scss';
@value list-border-color from colors;

.root {
  composes: marginTopMedium from 'shared/styles/margins.scss';

  position: relative;
  padding-bottom: 15px;
  border-bottom: 1px solid list-border-color;
}

.title {
  composes: titleText from 'shared/styles/components.scss';
}


.imageBlock {
  composes: marginTopSmall from 'shared/styles/margins.scss';

}

.imageMinHeight {
  min-height: 436px;
}

@media(max-width: 414px) {
  .imageMinHeight {
    min-height: 0;
  }
}

.image {
  composes: imageMinHeight;

  display: block;
  max-width: 94%;
  height: auto;
  margin: 0 auto;
  opacity: 0;
}

.imageLoading {
  composes: image;

  opacity: 0;
}

.imageLoaded {
  composes: image;

  opacity: 1;
  transition: opacity 0.3s ease;
}

.caption {
  composes: caption from 'shared/styles/components.scss';
}

.description {
  composes: marginBottomLarge from 'shared/styles/margins.scss';
  composes: fontMedium from 'shared/styles/fonts.scss';
  composes: descriptionFont from 'shared/styles/fonts.scss';

  padding-bottom: 5px;
  line-height: 1.6;
}

.button {
  composes: primaryButton from 'shared/styles/components.scss';

  position: absolute;
  bottom: 20px;
  right: 1%;
}