.shop{
   width: 100%;
   min-height: 100vh;
   background: #f4f4f4;
   padding-bottom: 100px;
}

.container{
   max-width: 1400px;
   margin: 0 auto;
   padding-top: 50px;
}

.shop-title{
   font-family: "Press Start 2P";
   color: #000;
   font-size: 50px;
}
.shop-description, .skins-description{
   font-family: "Montserrat";
   color: #000;
   font-size: 14px;
   max-width: 600px;
}


.skins-title {
   margin-top: 75px;
   font-family: "Press Start 2P";
   color: #000;
   font-size: 35px;
}


.skins {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 25px;
   position: relative;
}
.shop-item-title{
   content: "СКІНИ";
   color: #969696;
   font-family: "Press Start 2P";
   font-size: 20px;
   margin-top: 100px;
}
.skin {
   flex: 1;
   gap: 10px;
   display: grid;
   grid-template-columns: auto auto;
   grid-template-areas:
      "player finish"
      "enemy about"
   ;
}
.skin-img {
   max-width: 200px;
}
.skin-player {
   grid-area: player;
}
.skin-finish {
   grid-area: finish;
}
.skin-enemy {
   grid-area: enemy;
}
.skin-about {
   grid-area: about;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.skin-title {
   font-family: "Press Start 2P";
   color: #111;
   font-size: 20px;
}

.skin-text{
   font-family: "Montserrat";
   color: #333;
   font-size: 16px;
   margin-top: 10px;
   max-width: 170px;
}
.btn {
   font-family: "Montserrat";
   background: #ededed;
   padding: 10px;
   width: 100%;
   color: #111;
   font-size: 20px;
   font-weight: 600;
   border-top: 4px solid #ffffff;
   border-left: 4px solid #ffffff;
   border-right: 10px solid #c3c3c3;
   border-bottom: 10px solid #c3c3c3;
   cursor: pointer;
}
.btn:active{
   border-top: 4px solid #c3c3c3;
   border-left: 4px solid #c3c3c3;
   border-right: 10px solid #fff;
   border-bottom: 10px solid #fff;
}

.price{
   font-family: "Press Start 2P";
   font-size: 15px;
   color: #36a743
}






.videos {
   display: flex;
   flex-wrap: wrap;
   margin-top: 50px;
   gap: 10px;
}
.video {
   position: relative;
   height: 300px;
   width: 300px;
}
.video-img {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0; left: 0;
   filter: grayscale(1);
   opacity: 0.8;
}
.video-content {
   position: absolute;
   top: 0; left: 0;
   width: 300px;
   height: 300px;
   padding: 10px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: rgba(0,0,0,0.6);
}
.video-title {
   font-family: "Press Start 2P";
   font-size: 25px;
   margin-top: 10px;
}

.video-description{
   font-family: "Montserrat";
}

@media (max-width: 500px) {
   .skins{
      flex-wrap: nowrap;
      overflow-x: scroll;
   }
}