redbadger/website-honestly

@value badgerBlack from "../../../../../css/_colors.css";
@value mediumScreen, largeScreen from "../../../../../css/_sizes.css";

_:-ms-fullscreen,
:root .imageWrapper {
  min-height: 20vh;
}

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

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

.imageContainer {
  min-width: 260px;
  min-height: 205px;
  background-color: #8dcce0;
  position: relative;
}

.orders {
  position: absolute;
  right: 4%;
  top: 4%;
  text-align: right;
}

.visits {
  position: absolute;
  left: 4%;
  bottom: 4%;
}

.imagePercentage {
  composes: serif from '../../../../../css/typography/_fonts.css';
  color: badgerBlack;
  /* fallback */
  font-size: 18px;
  /* minFontSize + ((100vw - minScreenSize) / ((maxScreenSize - minScreenSize) / (maxFontSize - minFontSize))) */
  font-size: calc(18px + ((100vw - 320px) / ((690 - 320) / (40 - 18))));
}

.imageText {
  composes: fontS from '../../../../../css/typography/_fonts.css';
  composes: lightSerif from '../../../../../css/typography/_fonts.css';
  color: badgerBlack;
  /* fallback */
  font-size: 14px;
  /* minFontSize + ((100vw - minScreenSize) / ((maxScreenSize - minScreenSize) / (maxFontSize - minFontSize))) */
  font-size: calc(14px + ((100vw - 320px) / ((690 - 320) / (20 - 14))));
}

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

  .imagePercentage {
    /* fallback */
    font-size: 24px;
    /* minFontSize + ((100vw - minScreenSize) / ((maxScreenSize - minScreenSize) / (maxFontSize - minFontSize))) */
    font-size: calc(24px + ((100vw - 690px) / ((980 - 690) / (30 - 24))));
  }

  .imageText {
    /* fallback */
    font-size: 16px;
    /* minFontSize + ((100vw - minScreenSize) / ((maxScreenSize - minScreenSize) / (maxFontSize - minFontSize))) */
    font-size: calc(16px + ((100vw - 690px) / ((980 - 690) / (20 - 16))));
  }
}

@media largeScreen {
  .orders {
    right: 20px;
    top: 18px;
  }

  .imagePercentage {
    font-size: 30px;
  }

  .imageText {
    font-size: 20px;
  }

  .visits {
    left: 20px;
    bottom: 20px;
  }
}