///////////////////
//               //
//      MAIN     //
//               //
///////////////////

.home-lists {

  @include breakpoint(desktop) {
    display: inline-flex;
    flex-flow: row;
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;      // set the container width

    dt {
      flex: 0 0 39%;
      word-wrap: anywhere;
    }

    dd {
      flex: 0 0 59%;
      margin-left: auto;
      text-align: left;
    }
  }

  @include breakpoint(laptop) {
    display: inline-flex;
    flex-flow: row;
    flex-wrap: nowrap;
    flex-wrap: wrap;
    overflow: visible;
    margin-left: 3rem;

    dt {
      flex: 0 0 30%;
      word-wrap: anywhere;
    }

    dd {
      flex: 0 0 59%;
      margin-left: auto;
      text-align: left;
    }
  }

  @include breakpoint(mobile) {
    display: flex;
    flex-direction: column;
    place-items: center;
  }

  @include breakpoint(tablet) {
    display: flex;
    flex-direction: column;
    place-items: center;
  }

  dd {
    margin-left: .5rem;
  }

  dt::after {
    content: ' :';
  }

}

.contents {
  padding: 0;
}

.apps {
  display: flex;
  place-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 2rem 5rem;
  margin-top: 2rem;

  img {
    max-width: 60%;
  }
}

.home {
  background: url("images/assets/overlay.png"), url("images/assets/intro.jpg");
  background-size: 256px 256px, cover;
  background-attachment: fixed, fixed;
  background-position: top left, bottom center;
  background-repeat: repeat, no-repeat;
  background-blend-mode: difference;
}