/* MOBILE FIRST */
body {
  margin: unset;
}
.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  max-width: 100vw;
}

.trovao-grid {
  display: block;
  margin: unset;
  grid-column-start: 1;
  grid-column-end: 24;
  grid-row-start: 1;
  grid-row-end: 1;
}

.next-joy-div {
  display: block;
  grid-column-start: 1;
  grid-column-end: 24;
  grid-row-start: 2;
  grid-row-end: 2;
  text-align: unset;
  margin-top: 10vw;
  margin-bottom: 25vw;
  position: unset;
  left: unset;
  transform: unset;
}

.next-joy-img {
  display: block;
  width: 30%;
  margin-bottom: 50vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.text-grid {
  display: block;
  grid-column-start: 5;
  grid-column-end: 20;
  grid-row-start: 3;
  grid-row-end: 3;
  text-align: center;
  flex-direction: row;
  min-width: none;
  margin-top: unset;
  margin-left: unset;
}

.apps-grid {
  display: block;
  grid-column-start: 8;
  grid-column-end: 17;
  grid-row-start: 4;
  grid-row-end: 4;
  text-align: center;
  flex-direction: unset;
  margin-top: 5%;
  margin-bottom: 7vw;
}

.text-light {
  font-family: BradescoSans-light;
  font-size: 16px;
  position: unset;
  left: unset;
  transform: unset;
}
.text-bold {
  font-family: BradescoSans-bold;
  font-size: 16px;
  position: unset;
  left: unset;
  transform: unset;
  margin-top: unset;
}

.frozen-img-mobile {
  display: block;
  width: 100%;
}
.frozen-div {
  display: block;
  grid-column-start: 1;
  grid-column-end: 24;
  grid-row-start: 5;
  grid-row-end: 5;
}
.capitao-america-div {
  display: none;
  grid-column-start: unset;
  grid-column-end: unset;
  grid-row-start: unset;
  grid-row-end: unset;
  overflow: hidden;
}
.frozen-img {
  display: none;
}

.capitao-america-img {
  display: none;
}
.apps-img {
  width: 100%;
  cursor: pointer;
}

/* SM */

@media only screen and (min-width: 600px) {
  .trovao-grid {
    display: block;
    margin: unset;
    grid-column-start: 1;
    grid-column-end: 24;
    grid-row-start: 1;
    grid-row-end: 1;
  }

  .next-joy-div {
    display: block;
    grid-column-start: 1;
    grid-column-end: 24;
    grid-row-start: 2;
    grid-row-end: 2;
    text-align: unset;
    margin-top: 10vw;
    margin-bottom: 25vw;
    position: unset;
    left: unset;
    transform: unset;
  }

  .next-joy-img {
    display: block;
    width: 25%;
    margin-bottom: 50vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .text-grid {
    display: block;
    grid-column-start: 1;
    grid-column-end: 24;
    grid-row-start: 3;
    grid-row-end: 3;
    text-align: center;
    flex-direction: row;
    min-width: none;
    margin-top: unset;
    margin-left: unset;
  }

  .apps-grid {
    display: block;
    grid-column-start: 8;
    grid-column-end: 17;
    grid-row-start: 4;
    grid-row-end: 4;
    text-align: center;
    flex-direction: unset;
    margin-top: 5%;
    margin-bottom: 7vw;
  }

  .text-light {
    font-family: BradescoSans-light;
    font-size: 18px;
    position: unset;
    left: unset;
    transform: unset;
  }
  .text-bold {
    font-family: BradescoSans-bold;
    font-size: 18px;
    position: unset;
    left: unset;
    transform: unset;
    margin-top: unset;
  }

  .frozen-img-mobile {
    display: block;
    width: 100%;
  }
  .frozen-div {
    display: block;
    grid-column-start: 1;
    grid-column-end: 24;
    grid-row-start: 5;
    grid-row-end: 5;
  }
  .capitao-america-div {
    display: none;
    grid-column-start: unset;
    grid-column-end: unset;
    grid-row-start: unset;
    grid-row-end: unset;
    overflow: hidden;
  }
  .frozen-img {
    display: none;
  }

  .capitao-america-img {
    display: none;
  }
  .apps-img {
    width: 100%;
  }
}

/*  LG */
@media only screen and (min-width: 1280px) {
  body {
    margin: unset;
    overflow: hidden;
  }

  .frozen-img-mobile {
    display: none;
  }
  .capitao-america-img-mobile {
    display: none;
  }
  .text-light {
    font-family: BradescoSans-light;
    font-size: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .text-bold {
    font-family: BradescoSans-bold;
    font-size: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4rem;
  }
  .trovao-grid {
    display: none;
  }
  .espada-grid {
    display: none;
  }

  .frozen-div {
    display: block;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 6;
  }

  .frozen-img {
    display: block;
    width: 170%;
    margin-top: -2rem;
  }

  .capitao-america-div {
    display: block;
    grid-column-start:17;
    grid-column-end: 24;
    grid-row-start: 1;
    grid-row-end: 6;
  }
  .capitao-america-img {
    display: block;
    width: 100%;
  }

  .next-joy-div {
    display: block;
    grid-column-start: 9;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 1;
    text-align: center;
    margin-top: 6vh;
    margin-left: 6vh;
    margin-bottom: unset;
    /* left: 50%; */
    /* transform: translateX(-50%); */
  }
  .next-joy-img {
    display: block;
    margin-bottom: unset;
    position: unset;
    left: unset;
    transform: unset;
    width: 60%;
    margin-left: 40%;
  }

  .text-grid {
    display: block;
    grid-column-start: 6;
    grid-column-end: 17;
    grid-row-start: 2;
    grid-row-end: 2;
    text-align: center;
    min-width: 500px;
    margin-top: 10vh;
    margin-left: 1rem;
  }

  .apps-grid {
    display: block;
    grid-column-start: 6;
    grid-column-end: 19;
    grid-row-start: 3;
    grid-row-end: 3;
    text-align: center;
    flex-direction: row;
    margin-top: 8rem;
  }

  .apps-img {
    width: unset;
  }
}

@media only screen and (min-width: 1600px) {
  .frozen-img {
    display: block;
    width: 150%;
    margin-top: -2rem;
  }
}

/** ULTRA WIDE **/
@media only screen and (min-width: 1900px) {

  .next-joy-img {
    display: block;
    margin-bottom: unset;
    position: unset;
    left: unset;
    transform: unset;
    width: 60%;
    margin-left: unset;
  }
  .frozen-img {
    display: block;
    width: 110%;
    margin-top: -2rem;
  }

  .apps-grid {
    display: block;
    grid-column-start: 4;
    grid-column-end: 19;
    grid-row-start: 3;
    grid-row-end: 3;
    text-align: center;
    flex-direction: row;
    margin-top: 8rem;
  }
}