@font-face {
  font-family: SST-Regular;
  src: url(../font/SSTRg.woff);
}

@font-face {
  font-family: SST-Medium;
  src: url(../font/SSTMedium.woff);
}

@font-face {
  font-family: SST-Bold;
  src: url(../font/SSTBold.woff);
}

@font-face {
  font-family: SST-Light;
  src: url(../font/SSTLight.woff);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body.lp-playstation {
  width: 100vw;
  overflow-x: hidden;
  background-image: linear-gradient(to right, #ffffff 10%, #dadce9 100%);
}

@media only screen and (min-width: 600px) {
  .container-ps5 {
    height: 234vw;
    width: 100vw;
    display: grid;
    grid-template-columns: 300fr 115fr 22fr 180fr 22fr 180fr 22fr 115fr 300fr;
    grid-template-rows: 115fr 43fr 52fr 136fr 59fr 208fr 121fr 60fr 25fr 600fr 21fr 252fr 32fr 485fr 28fr 149fr 504fr 45fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .container-ps5 .section-1 {
    grid-area: 1 / 1 / 3 / 10;
    background-image: url("../img/PS5-Header.png");
    background-size: auto 100%;
    z-index: 2;
  }

  .container-ps5 .section-2 {
    grid-area: 1 / 1 / 9 / 10;
    background-image: url("../img/PS5-HERO-BENEFICIOS.jpg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .container-ps5 .section-3 {
    grid-area: 2 / 1 / 3 / 10;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container-ps5 .section-3 h2 {
    font-family: SST-Bold;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    font-size: 4vw;
  }

  .container-ps5 .section-4 {
    grid-area: 3 / 1 / 4 / 10;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container-ps5 .section-4 h3 {
    font-family: SST-Light;
    color: #ffffff;
    font-weight: 100;
    text-align: center;
    font-size: 1.5vw;
  }

  .container-ps5 .section-5 {
    grid-area: 10 / 1 / 11 / 5;
    background-image: url("../img/Background-Bundle.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #e2e5f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
  }

  .container-ps5 .section-6 {
    grid-area: 10 / 6 / 11 / 10;
    background-image: url("../img/Background-Bundle.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #e2e5f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-ps5 .section-5 img,
  .container-ps5 .section-6 img {
    margin-bottom: 2vw;
    font-size: 1.9vw;
    height: 22vw;
  }

  .container-ps5 .section-5 h3,
  .container-ps5 .section-6 h3 {
    font-family: sst-bold;
    margin-bottom: 2vw;
    font-size: 1.8vw;
  }

  .container-ps5 .section-5 p,
  .container-ps5 .section-6 p {
    margin-bottom: 2vw;
    font-weight: 400;
    font-size: 1.6vw;
  }

  .container-ps5 .section-5 a,
  .container-ps5 .section-6 a {
    margin-bottom: 3vw;
  }

  .container-ps5 .section-7 {
    grid-area: 12 / 1 / 13 / 10;
    background-image: linear-gradient(
        to right,
        rgb(255, 255, 255) 40%,
        rgba(255, 0, 0, 0) 50%
      ),
      url("../img/ps5-gatilho-adaptavel.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding-left: 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .container-ps5 .section-7 h3 {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 3.5vw;
    color: #0961c7;
    margin-bottom: 2vw;
  }

  .container-ps5 .section-7 p {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 1.4vw;
    color: #2c2c2c;
    margin-bottom: 1.6vw;
  }

  .container-ps5 .section-7 a {
    border: 1px solid #2940c1;
    padding: 0.8vw 4vw;
    border-radius: 999vw;
    font-family: SST-Bold;
    font-size: 1.4vw;
    color: #2940c1;
    background-color: #ffffff;
    text-decoration: none;
  }

  .container-ps5 .section-8 {
    grid-area: 14 / 1 / 15 / 5;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-ps5 .section-9 {
    grid-area: 14 / 6 / 15 / 10;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-ps5 .section-8 img,
  .container-ps5 .section-9 img {
    width: 22vw;
  }

  .container-ps5 .section-8 h3,
  .container-ps5 .section-9 h3 {
    font-family: sst-bold;
    margin-top: 2vw;
    margin-bottom: 2vw;
    font-size: 1.8vw;
    text-align: center;
  }

  .container-ps5 .section-8 p,
  .container-ps5 .section-9 p {
    font-size: 1.6vw;
    text-align: center;
  }

  .container-ps5 .section-8 a,
  .container-ps5 .section-9 a {
    margin-top: 2vw;
    margin-bottom: 2vw;
    text-align: center;
  }

  .container-ps5 .section-10 {
    grid-area: 15 / 1 / 17 / 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .container-ps5 .section-10 h3 {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 3.5vw;
    color: #0961c7;
    margin-bottom: 1.2vw;
  }

  .container-ps5 .section-10 p {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 1.4vw;
    color: #2c2c2c;
  }

  .container-ps5 .section-11 {
    grid-area: 17 / 1 / 18 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }

  .container-ps5 .section-12 {
    grid-area: 17 / 4 / 18 / 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }

  .container-ps5 .section-13 {
    grid-area: 17 / 8 / 18 / 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }

  .container-ps5 .section-11 img,
  .container-ps5 .section-12 img,
  .container-ps5 .section-13 img {
    width: 18vw;
  }

  .container-ps5 .section-11 h4,
  .container-ps5 .section-12 h4,
  .container-ps5 .section-13 h4 {
    font-family: sst-bold;
    margin-top: 2vw;
    margin-bottom: 2vw;
    font-size: 1.8vw;
    text-align: center;
  }

  .container-ps5 .btn-comprar-agora {
    padding: 0.8vw 2vw;
    border-radius: 999vw;
    font-family: SST-Bold;
    font-size: 1.4vw;
    color: #ffffff;
    background-color: #cf320d;
    text-decoration: none;
  }
}

@media only screen and (max-width: 600px) {
  .container-ps5  {
    height: 1200vw;
    width: 100vw;
    display: grid;
    grid-template-columns: 24fr 50fr 234fr 50fr 24fr;
    grid-template-rows: 71fr 94fr 41fr 470fr 24fr 183fr 295fr 24fr 183fr 295fr 24fr 258fr 24fr 480fr 24fr 480fr 24fr 160fr 430fr 16fr 430fr 16fr 430fr 35fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .container-ps5 .btn-comprar-agora {
    padding: 3vw 11vw;
    border-radius: 999vw;
    font-family: SST-Bold;
    font-size: 3vw;
    color: #ffffff;
    background-color: #cf320d;
    text-decoration: none;
  }

  .container-ps5 .section-1,
  .container-ps5 .section-3,
  .container-ps5 .section-4 {
    display: none;
  }

  .container-ps5 .section-2 {
    grid-area: 1 / 1 / 5 / 6;
    background-image: url("../img/PS5-HERO-BENEFICIOS-Mobile.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .container-ps5 .section-5 {
    grid-area: 6 / 1 / 8 / 6;
    background-image: url("../img/Background-Bundle.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #e2e5f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
  }

  .container-ps5 .section-6 {
    grid-area: 9 / 1 / 11 / 6;
    background-image: url("../img/Background-Bundle.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #e2e5f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-ps5 .section-5 img,
  .container-ps5 .section-6 img {
    margin-bottom: 8vw;
    font-size: 1.9vw;
    height: 50vw;
  }

  .container-ps5 .section-5 h3,
  .container-ps5 .section-6 h3 {
    font-family: sst-bold;
    margin-bottom: 4vw;
    font-size: 6vw;
    width: 70%;
  }

  .container-ps5 .section-5 p,
  .container-ps5 .section-6 p {
    margin-bottom: 6vw;
    font-weight: 400;
    font-size: 4vw;
    width: 80%;
  }

  .container-ps5 .section-5 a,
  .container-ps5 .section-6 a {
    margin-bottom: 6vw;
  }

  .container-ps5 .section-7 {
    grid-area: 12 / 1 / 13 / 6;
    background-image: linear-gradient(
        to right,
        rgb(255, 255, 255) 0%,
        #e5e7ea 100%
      ),
      url("../img/ps5-gatilho-adaptavel.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding-left: 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .container-ps5 .section-7 h3 {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 7vw;
    color: #0961c7;
    margin-bottom: 6vw;
    width: 60%;
  }

  .container-ps5 .section-7 p {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 3.6vw;
    color: #2c2c2c;
    margin-bottom: 3vw;
  }

  .container-ps5 .section-7 a {
    border: 1px solid #2940c1;
    padding: 3vw 12vw;
    border-radius: 999vw;
    font-family: SST-Bold;
    font-size: 4vw;
    color: #2940c1;
    background-color: #ffffff;
    text-decoration: none;
  }

  .container-ps5 .section-8 {
    grid-area: 14 / 1 / 15 / 6;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-ps5 .section-9 {
    grid-area: 16 / 1 / 17 / 6;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-family: sst-regular;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-ps5 .section-8 img, .container-ps5 .section-9 img {
    width: 65vw;
  }

  .container-ps5 .section-8 h3, .container-ps5 .section-9 h3{ 
    font-family: sst-bold;
    margin-top: 2vw;
    margin-bottom: 2vw;
    font-size: 5vw;
    text-align: center;
    width: 80%;
  }

  .container-ps5 .section-8 p, .container-ps5 .section-9 p{ 
    font-size: 4vw;
    margin-top: 6vw;
    margin-bottom: 3vw;
    text-align: center;
    width: 85%;
  }

  .container-ps5 .section-8 a, .container-ps5 .section-9 a{ 
    margin-top: 6vw;
    margin-bottom: 8vw;
    text-align: center;
  }

  .container-ps5 .section-10 {
    grid-area: 18 / 2 / 19 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .container-ps5 .section-10 h3 {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 7vw;
    color: #0961c7;
    margin-bottom: 3vw;
  }

  .container-ps5 .section-10 p {
    font-family: SST-Light;
    font-weight: 400;
    font-size: 3.6vw;
    color: #2c2c2c;
  }


  .container-ps5 .section-11 {
    grid-area: 19 / 2 / 20 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }

  .container-ps5 .section-12 {
    grid-area: 21 / 2 / 22 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }

  .container-ps5 .section-13 {
    grid-area: 23 / 2 / 24 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
  }

  .container-ps5 .section-11 img,
  .container-ps5 .section-12 img,
  .container-ps5 .section-13 img {
    width: 52vw;
  }

  .container-ps5 .section-11 h4,
  .container-ps5 .section-12 h4,
  .container-ps5 .section-13 h4 {
    font-family: sst-bold;
    margin-top: 5vw;
    margin-bottom: 5vw;
    font-size: 5vw;
    text-align: center;
  }

}