<main>
  <section>
    <article>

      <div class="top-section middle"></div>
      <div class="top-section divider"></div>
      <div class="top-section left"></div>
      <div class="top-section right">
        <ul class="side-grill">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      
      
      
      <div class="door-windows">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
      </div>
      <div class="windows">
        <div class="window"></div>
        <div class="window"></div>
        <div class="window"></div>
      </div>

      <div class="top-roof">

        <div class="suspension-clips">
          <div class="clip">
            <div class="bar"></div>
          </div>
          <div class="clip">
            <div class="bar"></div>
          </div>
        </div>
      </div>

      <div class="surf-board">
        <div class="fin"></div>

      </div>

      <div class="front-frame">
        <div class="frame-solid-bg">
          <ul class="side-grill">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="lights">
          <div class="side-light"></div>
          <div class="head-light"></div>
        </div>
        <div class="door">
          <div class="door-frame">
            
          </div>
          <div class="door-handle"></div>
          <div class="door-hinge"></div>
          <div class="door-hinge"></div>
        </div>
        <div class="shine"></div>
      </div>

      <div class="front-frame-shadow"></div>

      <div class="front-bumper"></div>
      <div class="back-bumper"></div>
      <div class="back-light">

      </div>

      <div class="wheels">
        <div class="wheel">
          <div class="tire">
            <div class="hook-cap">
              <div class="rim"></div>
            </div>
          </div>

        </div>

        <div class="wheel">
          <div class="tire">
            <div class="hook-cap">
              <div class="rim"></div>
            </div>
          </div>

        </div>
      </div>
      <div class="wheel-frames">
        <div class="wheel-frame"></div>
        <div class="wheel-frame back"></div>
      </div>
    </article>
    
 
  </section>

</main>

html {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

$bg: #da3a53;
$white: #f7f4e6;
$black: #1d1d1b;
$dot-bg: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231D1D1B' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
$tire-bg: linear-gradient(to right, #434343 0%, black 100%);

$surf-bg: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
$fin: linear-gradient(to top, #ffecd2 0%, #fcb69f 100%);

main {
  align-items: center;
  display: flex;
  background-color: $bg;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 100vh;
  justify-content: center;
  width: 100vw;
  // mix-blend-mode: luminosity;
}

section {
  background-color: $bg;
  bottom: 0;
  display: flex;
  height: 100vh;
  left: 0;
  margin: auto;
  mix-blend-mode: luminosity;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 360px;
  overflow: hidden;

  &::before {
    background: url("https://www.onlygfx.com/wp-content/uploads/2019/08/8-flock-of-birds-silhouette-5.png");
    background-position: 30% 20%;
    background-repeat: no-repeat;
    background-size: 200px;
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    mix-blend-mode: overlay;
    opacity: 0.3;
    position: absolute;
    top: -20px;
    width: 360px;
    z-index: 1;
  }

  &::after {
    background: url("https://www.onlygfx.com/wp-content/uploads/2017/12/palm-tree-silhouette-vol-2-4.png");
    background-position: 65% 15%;
    background-repeat: no-repeat;
    background-size: 200px 360px;
    bottom: 0;
    content: " ";
    display: block;
    height: 100%;
    right: -50px;
    mix-blend-mode: overlay;
    opacity: 0.3;
    overflow: hidden;
    position: absolute;
    top: 0px;
    width: 360px;
    z-index: 1;
  }
}

article {
  display: flex;
  margin: auto;
  border-bottom: 4px solid $black;
  width: 375px;
  height: 240px;
  position: relative;
  transform: scale(0.85);
  z-index: 2;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background: $dot-bg;
    background-size: 5px;
    width: 80%;
    margin: auto;
  }

  &::after {
    bottom: -15px;
    height: 5px;
    z-index: 1;

    width: 70%;
  }
}

.surf-board {
  position: absolute;
  left: 80px;
  width: 60%;
  height: 10px;
  background: $surf-bg;
  border-top-right-radius: 500px;
  border-top-left-radius: 500px;
  border: 2px solid $black;
  transform: skewY(1deg);

  .fin {
    background: $fin;
    position: absolute;
    right: 30px;
    width: 20px;
    height: 15px;
    top: -17px;
    border-top-left-radius: 25px;
    border: 2px solid $black;
    border-bottom: 0;
    transform: skew(-45deg, 0deg);
    border-top-right-radius: 5px;
  }
}
.front-frame {
  background-color: #f7f4e6;
  position: absolute;
  width: calc(100% - 20px);
  left: 11px;
  height: 120px;
  bottom: 45px;
  border: 4px solid #1d1d1b;
  border-bottom: 0;
  border-top-color: transparent;
  border-radius: 13% 9px 10% 100% / 73% 50% 0% 0%;

  transform: skewX(-1deg);
  z-index: 3;
}
.top-section {
  position: absolute;
  top: 15px;

  &.middle {
    border-top: 3px solid $black;
    background-color: $white;
    width: calc(100% - 115px);
    transform: skewX(-31deg);
    left: 59px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index: 4;
    height: 60px;
  }

  &.left,
  &.right {
    width: 60px;
    top: 15px;
    height: 70px;
  }

  &.left {
    left: 50px;
    
    border-left: 5px solid $black;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: skewX(-31deg);
    z-index: 4;
    height: 76px;
  }

  &.right {
    background-color: $white;
    border-radius: 0% 60% 0% 0%/0% 100% 0% 0%;
    box-shadow: inset -1px -2px 0px 0px $black;
    right: 13px;
    border-top: 3px solid $black;
    border-right: 3px solid $black;
    transform: skewX(2deg);
    width: 80px;
    z-index: 4;

    .side-grill {
      top: 15px;
      width: 30px;
    }
  }

  &.divider {
    top: 30px;
    width: calc(100% - 80px);
    left: 60px;
    border: 1px solid $black;
    height: 4px;
    z-index: 5;
    background: linear-gradient(
      to top,
      #d5d4d0 0%,
      #d5d4d0 1%,
      #eeeeec 31%,
      #efeeec 75%,
      #e9e9e7 100%
    );
    box-shadow: 0 3px 6px 0px rgba(97, 95, 95, 0.5);
  }
}

.windows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  position: absolute;
  top: 35px;
  justify-content: flex-end;
  width: 150px;
  left: 135px;
  padding: 12px;
  z-index: 6;
  height: 62px;

  .window {
    background-image: linear-gradient(
      225deg,
      #2cd8d5 0%,
      #c5c1ff 56%,
      #ffbac3 100%
    );
    border: 1px solid black;
    border-radius: 6px;

    &:nth-of-type(2) {
      background-image: linear-gradient(
        -225deg,
        #2cd8d5 0%,
        #c5c1ff 56%,
        #ffbac3 100%
      );
    }
  }
}

.door-windows {
  position: absolute;
  left: 54px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 6px;
  padding: 12px;
  width: 96px;
  top: 35px;
  height: 60px;

  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 0.75fr 2fr 2fr;
  grid-gap: 3px;

  .window {
    border: 1px solid $black;
    z-index: 6;
    border-radius: 3px;
    background-image: linear-gradient(
      225deg,
      #2cd8d5 0%,
      #c5c1ff 56%,
      #ffbac3 100%
    );

    &:nth-of-type(1) {
      left: -6px;
      border-radius: 0;
      border-top-right-radius: 0px;
      border-bottom: 1px solid $black;
      border-right: 1px solid $black;
      background-image: linear-gradient(
        -225deg,
        #2cd8d5 0%,
        #c5c1ff 56%,
        #ffbac3 100%
      );
      box-shadow: inset 6px 3px 9px 3px #bfbfbf;
      transform: skewX(-30deg);
      position: absolute;
      height: 36px;
      top: 12px;
      width: 15px;
    }

    &:nth-of-type(2) {
      width: 32px;
      left: -7px;
      position: relative;
      transform: skewX(-29deg);
      top: 0px;
      height: 36px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
      z-index: 5;
    }

    &:nth-of-type(3) {
      background-image: linear-gradient(
        -225deg,
        #2cd8d5 0%,
        #c5c1ff 56%,
        #ffbac3 100%
      );
      width: 58px;
      left: -21px;
      position: relative;
    }
  }
}

.door {
  position: absolute;
  left: 30px;

  width: 90px;
  top: 8px;
  height: calc(100% - 15px);
  .door-handle {
    position: absolute;
    right: 10px;
    width: 12px;

    height: 6px;

    width: 10px;
    top: 30px;

    &::before {
      border-radius: 35%;
      position: absolute;
      content: "";
      left: -6px;
      top: -3px;
      border: 1px solid $black;
      height: 10px;
      width: 10px;
      background-image: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
    }

    &::after {
      background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
      position: absolute;
      right: 3px;
      width: 12px;
      content: "";
      height: 6px;
      border: 1px solid $black;
      width: 10px;
      top: -1px;
    }
  }

  .door-hinge {
    position: absolute;
    left: 10px;
    height: 6px;

    width: 10px;
    top: 30px;

    &:last-of-type {
      bottom: 24px;
      top: unset;
    }

    &::before {
      border-radius: 50%;
      position: absolute;
      content: "";
      left: -7px;
      top: -3px;
      border: 1px solid $black;
      height: 5px;
      width: 5px;
    }

    &::after {
      border-radius: 50%;
      position: absolute;
      left: -7px;

      content: "";
      height: 5px;
      border: 1px solid $black;
      width: 5px;
      top: 2px;
    }
  }
}
.door-frame {
  width: 84px;
  left: 5px;
  position: absolute;
  top: 0px;
  height: calc(100% - 25px);
  border: 1px solid $black;
  border-bottom-right-radius: 65px;
  border-bottom-left-radius: 0px;
}
.top-roof {
  position: absolute;
  top: 9px;
  width: calc(100% - 80px);
  left: 60px;
  height: 20px;
  z-index: 4;

  .suspension-clips {
    position: absolute;
    left: 55px;
    display: flex;
    flex-flow: row nowrap;

    width: 115px;
    margin: 0 auto;
    height: 20px;
  }

  .clip {
    margin-top: auto;
    display: flex;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: -5px;
    background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    border: 1px solid $black;
    z-index: 2;

    &::after {
      content: "";
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      border: 2px solid $black;
      top: 0px;
      left: 0px;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    &:last-of-type {
      right: 0;
    }
  }

  .bar {
    width: 5px;
    border: 1px solid $black;
    height: 16px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 4px;
    margin: auto;
    bottom: 8px;
    background-image: linear-gradient(to right, #cfd9df 0%, #e2ebf0 100%);
  }
}
.front-frame-shadow {
  position: absolute;
  width: calc(100% - 85px);
  height: 25px;
  left: 45px;
  bottom: 35px;
  background-color: $black;
  z-index: 1;
}
.frame-solid-bg {
  border-radius: 35% 20px 5% 100% / 85% 9px 0% 0%;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  width: 100%;
  height: 96px;
  bottom: 0;
  position: absolute;
}
.shine {
  border-radius: 95% 0% 95% 0% / 85% 20% 10% 0%;
  background-color: rgba(247, 244, 230, 0.45);
  width: calc(100% - 65px);
  left: 60px;
  top: 24px;
  height: 12px;
  bottom: 0;
  position: absolute;
  mix-blend-mode: soft-light;
}
.side-grill {
  position: absolute;
  top: 0;
  right: 30px;
  list-style: none;
  width: 30px;
  display: flex;
  flex-flow: column wrap;

  li {
    margin: 1px 0;
    height: 2px;
    border-radius: 3px;
    background-color: $black;
    width: 100%;

    &:first-of-type {
      margin: 6px 0 1px 0;
    }
  }
}
.lights {
  top: 30px;
  left: 0;
  height: 45px;
  position: absolute;
  transform: scale(0.75);
  width: 30px;

  .side-light,
  .head-light {
    border-radius: 50%;
    background-image: radial-gradient(
        at 50% 100%,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(0, 0, 0, 0.25) 100%
      );
    background-blend-mode: screen, overlay;
    border: 1px solid $black;
    position: absolute;
  }

  .side-light {
    background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    width: 14px;
    height: 14px;

    right: 9px;
    z-index: 2;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
      border: 1px solid $black;
    }
  }

  .head-light {
    background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    background-blend-mode: screen, overlay;
    bottom: 0;
    height: 25px;
    width: 25px;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      height: 19px;
      width: 19px;
      border-radius: 50%;

      background-image: linear-gradient(315deg, #fec84e 0%, #ffdea8 74%);
      border: 1px solid $black;
    }
  }
}
.front-bumper {
  position: absolute;
  border: 3px solid $black;
  border-radius: 9px 12px 12px 9px;
  background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  bottom: 34px;
  height: 16px;
  width: 50px;
  z-index: 4;
}
.back-bumper {
  position: absolute;
  border: 3px solid $black;

  border-radius: 9px 12px 12px 9px;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  bottom: 34px;
  height: 16px;
  width: 45px;
  z-index: 4;
  right: -2px;
}
.back-light {
  background-image: linear-gradient(to bottom, #cfd9df 0%, #e2ebf0 100%);
  position: absolute;
  right: 7px;
  bottom: 75px;
  border-radius: 50%;
  border: 2px solid $black;
  height: 12px;
  width: 6px;
  z-index: 4;
}
.wheels,
.wheel-frames {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}
.wheel-frames {
  width: 75%;
  z-index: 4;
}
.wheel-frame {
  background-color: $black;
  border-radius: 2000px 2000px 0px / 2000px 1351px 0px 0px;
  bottom: 40px;
  height: 30px;
  left: 5px;
  position: absolute;
  width: 75px;

  &.back {
    bottom: 40px;

    left: unset;
    position: absolute;
    right: 0px;
    width: 80px;
  }
}
.wheels {
  width: 68%;
}
.wheel {
  z-index: 5;

  &:last-of-type {
    position: relative;
    right: -6px;
  }

  .tire {
    background: $tire-bg;
    border: 3px solid $black;
    border-radius: 50%;
    height: 60px;
    position: relative;
    width: 60px;
  }

  .hook-cap {
    background-image: linear-gradient(
      to top,
      #c4c5c7 0%,
      #dcdddf 52%,
      #ebebeb 100%
    );
    border: 1px solid $black;
    border-radius: 50%;
    bottom: 0;
    height: 40px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;

    &::before,
    &::after {
      background-image: linear-gradient(
        to top,
        #c4c5c7 0%,
        #dcdddf 52%,
        #ebebeb 100%
      );
      border-radius: 50%;
      border: 1px solid $black;
      content: "";
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
    }

    &:before {
      height: 30px;
      width: 30px;
    }

    &::after {
      background: linear-gradient(-180deg, #bcc5ce 0%, #929ead 98%),
        radial-gradient(
          at top left,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(0, 0, 0, 0.3) 100%
        );
      background-blend-mode: screen;
      border: 1px solid $black;
      height: 20px;
      width: 20px;
    }
  }

  .rim {
    border-radius: 50%;
    bottom: 0;
    height: 5px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    z-index: 1;

    &::before,
    &::after {
      border: 1px solid $black;
      border-radius: 50%;
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      margin: auto;
      top: 0;
      right: 0;
    }
  }
}


@media (min-width: 768px)  {
  .front-frame {
    border-radius: 15% 9px 10% 100% / 73% 50% 0% 0%;
  }
}