@import "_common.scss";

.plant-image {
  width: 100%;
  display: flex;
  margin: auto;
  border-radius: .5em;
  color: $highlight-text;
  box-shadow: 0.5em 0.5em $highlight;
  position: relative;

  a {
    color: $highlight-text;
  }

  .image-source {
    position: absolute;
    padding: 0.25em;
    border-radius: 0.25em;
    margin: 0.25em;
    bottom: 0;
    right: 0;
    font-size: 0.8em;
    background-color: transparentize($highlight, 0.75); 
  }

  img {
    border-radius: .5em;
    width: 100%;
  }

  &:hover .image-source {
    background-color: $highlight;      
  }
}