redbadger/website-honestly

View on GitHub
site/pages/our-work/slices/shared/image/styles.css

Summary

Maintainability
Test Coverage
@value mediumScreen, largeScreen from "../../../../../css/_sizes.css";

.base {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.attachToBottom {
  composes: base;
  align-self: flex-end;
}

.base img {
  display: block;
  width: 100%;
}

@media mediumScreen {
  .base {
    flex-basis: 50%;
    width: 50%;
  }

  .attachToBottom img {
    width: auto;
    max-width: 581px;
    max-height: 494px;
    margin-bottom: -60px;
  }
}

@media largeScreen {
  .attachToBottom img {
    max-width: none;
  }
}