cssでとコンテンツ幅の範囲を決めて、その間はvisibility: hidden; にしてみたのですが、cssが有効に働いてくれなかったです。

/* ロゴが小さくなって不自然な対応 */
@media screen and (min-width: 640px) and (max-width: 1080px) {
   .c-headLogo__link {
visibility: hidden; /* 要素を非表示にする */
}
}

上記CSSが間違っているのか、もしくは別の手だてで追従ヘッダー内のロゴをコントロールできるやり方があるのか誰か教えてほしいです。