/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 100%; }

body {
  box-sizing: border-box; }
  @media only screen and (max-width: 56.25em) {
    body {
      padding: 0; } }

.bg-green {
  background-color: #3bb78f;
  background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }

.font-3 {
  font-size: 3rem; }

.font-1_5 {
  font-size: 2rem; }

.subtitle_1 {
  font-size: 1.5rem; }

.gap-1 {
  gap: 0.7rem; }

.banner_heading_4 {
  font-size: 3rem; }

.padding_top_14 {
  padding-top: 14rem; }

.vh-85 {
  height: 85vh; }

.vh-15 {
  height: 15vh; }

.button_dark {
  clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  padding-right: 1.7rem;
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  border-radius: 10px; }

.photo_dual {
  width: 40rem; }

.price_footer {
  background-color: #52cba5; }

.boxImgContainer {
  width: 4rem; }

.priceCut_multi {
  font-size: .7rem; }