@media screen and ( max-width: 767px ){
    .container{
        width: 100%;
        padding: 0 15px;
    }
    .main-block__title{
        width: 100%;
        text-align: center;
        font-size: 20px;
    }
    .form-wrapper {
        width: 100%;
    }
    .input-wrap{
        flex-direction: column;
        gap: 0px;
    }
    .input{
        width: 100%;
    }
    .btn{
        font-size: 1rem;
        padding: 1rem;
    }
    .head-line{
        justify-content: center;
        flex-grow: 1;
        height: 66px;
    }
    .title-thanks{
        text-align: center;
        width: 100%;
    }
    .socials .flex{
        margin-top: 25px;
        display: flex;
        width: 100%;
        justify-content: space-around;
    }
    .main-block h3 {
        margin-top: 20px;
        font-size: 26px;
        width: 100%;
        font-weight: 700;
        text-align: center;
    }

	.main-block {
		padding-top: 70px;
		text-align: left;
	}

	.footer {
		position: relative;
		margin-top: 35px;
	}

    .main-block {
        flex-wrap: wrap;
        padding-top: 30px;
        flex-direction: column-reverse;
        gap: 5px;
    }

    /*test compact */
    .head {padding: 25px 15px; }
    .head-line {height: auto; }
    .logo {
        max-width: 160px;
        width: 100%;
        
    }

    .list {
        margin-top: 10px;
        margin-left: 20px;
      }
      .form-wrapper {
        margin-top: 20px;
      }

      .head-line {
        justify-content: center; }

    .product-image {
        margin-top: 20px;
    }

    .product-grid.pc-h {
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .main-block__title {
        width: 100%;
        text-align: center;
      }

    .form-wrapper {
        margin-top: 10px;
      }
    .main-block .collumn {
        gap: 30px;
    }
    .main-block .collumn.mob-h {display: none;}
    
    .product-grid {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and ( min-width: 768px ) and ( max-width: 1060px ){
    .main-block {
        gap: 30px;
    }
    
    .collumn.mob-h {
        flex: 1 1 50%;
        max-width: 50%;
    }
    
    .main-block .collumn {
        flex: 1 1 50%;
        max-width: 50%;
    }
}