Untitled

@import "StandartProperty";
@import "Fonts";
@import "Media";

%IconsPropertyes {
    display: block;
    width: 30px;
    cursor: pointer;
}


header {
    width: 100%;
    height: 80px;
    background: #1f1f1f;
}

.head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 20px;
    align-items: center;
    margin-right: 40px;
    margin-left: 40px;
    height: 80px;
}

.menu {
    width: 30px;
    grid-column: 1/2;

    img {
        @extend %IconsPropertyes;
    }
}

.menu {
    img:hover {
        opacity: 0.9;
    }
}
.SearBas {
    grid-column: 11/12;
}

.included {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
    grid-gap: 30px;

}

.search {
    width: 30px;

    img {
        @extend %IconsPropertyes;
    }
}

.search {
    img:hover {
        opacity: 0.9;
    }
}

.basket {
    width: 30px;

    img {
        @extend %IconsPropertyes;
    }
}

.basket {
    img:hover {
        opacity: 0.9;
    }
}

.sign_out {
    width: 110px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: #ffff;
    cursor: pointer;
    grid-column: 12/13;
    justify-self: end;
    p {
        font-family: "Anton";
        font-size: 20px;
    }
}

.sign_out:hover {
    background: #000000;
    color: white;
    border: 2px solid white;
    transition: 0.3s
}
.sign_out:active {
    transition:0.01s;
    background: #ffffff;
    transition: none;
    color: #000000
}

<body>
    <header>
<nav class="head">
    <div class="menu"><img src="Images/Adidas/menu-white.png" alt="menu" ></div>

<div class="SearBas">
    <div class="included">
        <div class="search"><img src="Images/Adidas/search-white.png" alt="search"></div>

        <div class="basket"><img src="Images/Adidas/basket-white.png" alt="basket"></div>
 </div>
</div>
    <button class="sign_out"><p>SIGN IN</p></button>
</nav>
    </header>
</body>

@media screen and (max-width: 1024px) {
    .sign_out {
        display: none;
    }
    .head {
        margin-right: 20px;
        margin-left: 20px;
    }
    .SearBas {
    grid-column: 12/13;
}
}