/*main card*/
.main-bkg {
    background-color: #EBEBEB;
    font-family: 'Montserrat';
}

.card-container {
    width: 1220px;
    margin: 0 auto;
    padding: 15px 0 88px 0;
}

.main-info {
    display: flex;
    gap: 45px;
    flex-wrap: wrap;
}

.back {
    display: flex;
    text-decoration: none;
    align-items: center;
    color: #4b4545;
    opacity: 0.5;
    fill: #4b4545;
    gap: 5px;
    margin: 0 0 6px 0;
}

.back-text {
    color: #000;
    font-size: 20px;
    font-weight: 700;
}

.card-title {
    display: flex;
    margin: 0 0 13px 0;
    align-items: flex-end;
    gap: 45px;
}

.game-name {
    font-family: 'Jost';
    font-size: 40px;
    font-weight: 700;
    width: 320px;
}

.game-img {
    width: 320px;
    height: 420px;
    background-color: #000;
    background-image: url(../img/orig.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.rating {
    display: flex;
    flex-wrap: nowrap;
}

.rating-item {
    border: none;
    background-color: #EBEBEB;
    display: flex;
    align-items: center;
    padding: 0px;
    margin-right: 20px;
    cursor: pointer;
}

.rating-item .like {
    color: #38A411;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.rating-item .dislike {
    color: #C40A0A;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.view-text {
    font-size: 16px;
    font-weight: 400;
    margin-left: 5px;
}

.game-info-item {
    display: flex;
    align-items: center;
    margin: 0 0 15px 0;
}

.game-info-header {
    font-size: 20px;
    font-weight: 500;
}

.game-info-header .item-info {
    font-size: 16px;
    font-weight: 400;
    margin-left: 7px;
}

.game-info-tag {
    margin-left: 7px;
}

.game-info-tag-item {
    background-color: #10069F;
    color: #FFF;
    font-size: 12px;
    font-weight: 400;
    border: none;
    border-radius: 10px;
    display: inline;
    padding: 2px 14px;
}

.game-info-link {
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    color: #10069F;
    border-color: #000;
    display: flex;
    align-items: center;
    margin: 0 0 0 7px;
}

.game-info-link svg {
    margin: 0 2px 0 0;
}

.header-media {
    font-family: 'Jost';
    font-size: 32px;
    font-weight: 500;
}

h5.header-media {
    margin: 0 0 30px 0;
}

/*description-block*/

.description-head {
    padding: 39px 0 12px;
}

.description {
    max-width: 962px;
    font-size: 20px;
}

/*screenshot-block*/

.header-screen {
    padding: 68px 0 0;
}

.screenshot-box {
    display: flex;
    margin: 39px 0 53px;
    flex-wrap: wrap;
}

.screenshot-box-item {
    display: flex;
    justify-content: center;
}



.screenshot {
    display: flex;
    gap: 20px;
    margin: 0px 14px;
    flex-wrap: wrap;
    transition: transform 0.4s ease-in-out;
}

.screen-slide-button {
    text-decoration: none;
    border: none;
    background-color: #EBEBEB;
    padding: 0px;
    cursor: pointer;
}

.screen-slide-item {
    background-color: #000;
    box-sizing: border-box;
    max-width: 353px;
    max-height: 189px;
    justify-content: center;
    transition: box-shadow 0.4s ease;
    cursor: pointer;
}

.screen-slide-item img {
    max-width: 353px;
    max-height: 189px;
    cursor: pointer;
}

.screen-slide-item:hover {
    box-shadow: 0 0 8px rgba(16, 6, 159, 0.4);
}

/*video block*/

.header-video {
    margin: 53px 0;
}

.video-box {
    background-color: #000;
    display: block;
    margin: 0 auto;
}

/*penis-block*/

.new-comment {
    display: block;
}

.new-comment h5 {
    margin: 32px 0;
}


.big-input {
    resize: none;
    border: none;
    border-radius: 7px;
    width: 452px;
    height: 190px;


    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 14px;
    padding-left: 23px;
    padding-top: 18px;

    box-sizing: border-box;
    line-height: 1.2;
    transition: box-shadow 0.4s ease;
    outline: none;
    background: #FFF;


}

.big-input:focus {
    box-shadow: 0 0 8px rgba(16, 6, 159, 0.4);
}

.submit-pos {
    margin: 33px 0;
}

/* Комментарий */

.comment {
    display: flex;
    gap: 26px;
    margin: 0 0 20px 0;
}

.comment img {
    width: 170px;
    height: 170px;
}

.comment-info {
    display: flex;
    margin: 0 0 29px 0;
}

.comment-info,
.comment-text p {
    font-size: 20px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
}

.comment-text svg {
    margin: 0 6px 0 0;
    fill: #0C2C67;
}

.comment-text {
    display: flex;
    justify-items: stretch;
}

.block-flex {
    display: flex;
}

.comments hr {
    margin: 0 0 32px 0;
}




/* Стили для модального окна */
.modal {
    display: none;
    /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    /* Темный фон */

    justify-content: center;
    align-items: center;
}

.modal-content {
    /* чтобы картинка не вылазила за рамки экрана */
    max-width: 95vw;            
    max-height: 95vh;
    
    /* при этом сохраняем пропорции */
    width: auto;
    height: auto;
    
    /* если хотите скруглить углы */
    border-radius: 4px;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* Сделаем стрелки чёрными и полностью видимыми */
.slick-prev:before,
.slick-next:before {
  color: #000;      /* нужный вам тёмный цвет */
  opacity: 1;       /* по умолчанию стоит 0.75, можно убрать полупрозрачность */
  font-size: 30px;  /* при желании поменять размер */
}

/* Иногда нужно побольше специфичности, если font-size не срабатывает */
.slick-slider .slick-prev:before,
.slick-slider .slick-next:before {
    color: #000 !important;
}

.slick-slide img {
  display: block;   /* превращаем в блочный элемент */
  margin: 0 auto;   /* автоматически центрируем по горизонтали */
}



@media(max-width: 1300px){
    .card-container{
        width: 90%;
        padding: 15px 15px 88px
    }
    


    .screen-slide-button{
        align-self: center;
    }

    .comment{
        width: 100%;
    }

    hr{
        width: 90%;
    }
}

@media(max-width: 820px){
    .card-title{
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .game-name{
        text-align: center;
    }

    .main-info{
        justify-content: center;
    }

    .video-box{
        width: 480px;
        height: 240px;
        
    }
}

.comment-wrp {
    width: 100%;
}

@media(max-width: 600px){
    .video-box{
        width: 320px;
        height: 160px;
    }

    .comment-wrp p{
        font-size: 12px;
    }

    .comment img{
        width: 85px;
        height: 85px;
    }

    .big-input{
        width: 90%;
        height: 100%;
    }

    .screenshot-box{
        width: 80%;
        margin: auto;
    }

    .description{
        font-size: 16px;
    }
}