/*
  .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-
 / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \  MAIN
`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'
*/

svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}

.splash {
  position: relative;
  margin: 179px 20px 0px 44px;
  max-width: calc(1440px - 20px - 44px);
}

.splash > .img-1 {
  width: 600px;
  height: 820px;
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: -20;
  background-size: auto 100vh;
}

@media (min-width: 1440px) { /*  larger than 1440 */
  .splash {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1220px) { /* smaller than 1220 */
  .splash > .img-1 {
    margin-top: 22px;
  }
}

@media (max-width: 800px) { /* smaller than 800 */
  .splash > .img-1 {
    right: -20px;
    width: 73vw;
    height: calc(73vw * 1.366);
  }
}

h3.sub-1 { /* sub heading: "How it works" */
  display: inline-block;
  position: relative;
  top: 37px;
  left: 517.2px;
}

@media (max-width: 800px) { /* smaller than 800 */
  h3.sub-1 {
    left: 10px;
  }
}

/*
  .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-
 / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \  MAIN SECTIONS
`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'
*/

.product, .patterns {
  position: relative;
  margin: 179px 20px 0px 44px;
  max-width: calc(1440px - 20px - 44px);
}

.product > .p-img {
  width: 60vw;
  height: 820px;
  position: absolute;
  top: 91px;
  left: 0px;
  z-index: -20;
  background-size: auto 100vh;
}

@media (min-width: 1440px) { /*  larger than 1440 */
  .product, .patterns {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1220px) { /* smaller than 1220 */
  .product > .p-img {
    margin-top: 22px;
  }
}

@media (max-width: 800px) { /* smaller than 800 */
  .product > .p-img {
    width: 100vw;
    top: 25px;
    height: calc(73vw * 1.366)
  }
}

.hash-blocks {
  display: flex;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: -20;
}

.hash-blocks > div {
  width: 84px;
  height: 84px;
}

@media (max-width: 1066px) {
  .hash-blocks > div {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 766px) {
  .hash-blocks{
    margin-bottom: -100px;
  }

  .info-2 {
    margin-top: 200px;
  }
}


/*
  .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-
 / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \  PATTERNS
`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'
*/

/* .patterns > .f-img {
  width: 100%;
  height: 360px;
  position: relative;
  z-index: -20;
  margin-bottom: 60px;
} */

.pattern-tiles {
  display: grid;
  /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-gap: 30px;
}

.pattern-image {
  width: 100%;
  height: 460px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1066px) {
  .pattern-image {
    height: 355px;
  }
}

@media (max-width: 766px) {
  .pattern-tiles {
    grid-template-columns: 1fr;
  }
}


.pattern-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pattern-name {
  margin-top: 25px;
  font-size: 1.75rem;
}

.pattern-size {
  font-size: 1.15em;
}

.pattern-price {
  font-size: 1.25rem;
}

/* to display original price next to discount price */
/* .pattern-price::before {
  content: "$1,500";
  text-decoration: line-through;
  padding-right: 10px;
  color: var(--lw-dark-grey);
} */

.pattern-opts {
  margin-top: 10px;
}

.pattern-opts > * {
  margin-right: 20px;
}

/*
  .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-
 / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \  LEARN MORE
`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'
*/

.learn-more {
  display: flex;
}

.learn-more > :first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  margin: 0 40px;
}

.learn-more > :first-child h3 {
  width: 550px;
  text-align: center;
}

/* // TODO: img-2 -- decide on parallax (below) or zoom effect */
/* .img-2 {
  width: 730px;
  height: 486px;
  position: absolute;
  top: 26px;
  z-index: -20;
  background-size: auto 100vh;
} */


@media (max-width: 1330px) { /* smaller than 1330 */
  /* .img-2 {
    width: 663px;
    height: 442px;
  } */
}

@media (max-width: 1170px) {
  .learn-more > :first-child h3 {
    width: 50vw;
    font-size: 2.3rem;
    /* text-align: left; */
  }
}

@media (max-width: 1000px) {
  /* .img-2 {
    width: 50vw;
    height: calc(50vw * 0.66);
  } */

  /* .learn-more > :first-child h3 {
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
  } */
}

@media (max-width: 900px) {
  .learn-more {
    flex-direction: column;
  }

  .learn-more > :first-child {
    width: 100%;
    margin: 0;
  }

  .learn-more > :first-child h3 {
    width: 100%;
  }
}

/*
  .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-.   .-.-
 / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \ \ / / \  Pixel Boxes
`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'   `-`-'
*/

.pixel-box.pb1 {
  left: 448px;
  top: 36px;
}

.pixel-box.pb2 {
  left: 788px;
  /* top: 27px; */
  top: 109px;
}

.pixel-box.pb3 {
  left: 140px;
  /* top: 100px; */
    top: 220px;
}


@media (max-width: 1440px) { /*  smaller than 1440 */
  .pixel-box.pb1 {
    left: 30.5vw;
  }

  .pixel-box.pb2 {
    left: 53.8vw;
  }

  .pixel-box.pb3 {
    left: 9.8vw;
  }
}

@media (max-width: 1066px) {
  .pixel-box.pb2 {
    left: 40vw;
    top: 72px;
  }
}

@media (max-width: 766px) {
  .pixel-box {
    max-width: 90vw;
    width: 90vw;
  }

  .pixel-box.pb1,
  .pixel-box.pb2,
  .pixel-box.pb3 {
    left: -32px;
  }

  .pixel-box > .pixel {
    width: 30px;
    height: 30px;
  }

  .pixel-box > p {
    padding-left: 47px;
  }
}

.pixel-box.pb4 {
  left: 900px;
  top: 146px;
}

.pixel-box.pb5 {
  left: 260px;
  top: 217px;
}

@media (max-width: 1440px) { /*  smaller than 1440 */
  .pixel-box.pb4 {
    left: 53vw;
  }

  .pixel-box.pb5 {
    left: 10vw;
  }
}

@media (max-width: 1066px) {
  .pixel-box.pb5 {
    left: 0;
    top: 182px;
  }
}

@media (max-width: 766px) {
  .pixel-box.pb4,
  .pixel-box.pb5 {
    left: -32px;
  }
}