Alams Stoyne

<div class="ratio">
    <div class="ratio-inner ratio-1-1">
        <div class="ratio-content">
            Это содержимое блока 1/1
        </div>
    </div>
</div>

.ratio {
    width: 150px; /* здесь можно установить любую нужную ширину */
}

.ratio-inner {
    position: relative;
    height: 0;
    border: none;
}

.ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #eee;
}
.ratio-1-1 {
    padding-top: 100%; /* здесь можно установить пропорцию высоты в % отношении от ширины */
}

.img_black:hover .vis
{
    display:none;
}

<div class="tab_block">
    <div class="tab">Content#1</div>
    <div class="tab">Content#2</div>
    <div class="tab">Content#3</div>
</div>
<div class="nav_block">
    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>
</div>

.d-none{
  display: none;
}
.tab{
  display: none;
}
.tab.selected{
   display: block; 
}

$(document).ready(function(){
    $('.tab:first').addClass('selected');
  
    $('.nav_block a').click(function(e){
        e.preventDefault();   
        let this_selected_tab = $('.tab.selected');
        if($(this).hasClass('prev')){
          if(this_selected_tab.prev('.tab').length > 0){
            this_selected_tab.prev('.tab').addClass('selected');    
          }else{
            $('.tab:last').addClass('selected');
          }       
        }
        if($(this).hasClass('next')){
          if(this_selected_tab.next('.tab').length > 0){
            this_selected_tab.next('.tab').addClass('selected');     
          }else{
            $('.tab:first').addClass('selected');
          }
        }
      this_selected_tab.removeClass('selected');
    });
});

$('.projects__card-7').hover(
function() {$('.projects-paths #path-1').show(); }, 
function() {$('.projects-paths #path-1').hide();}
 );
*... если много элементов на которые придётся наводить*
$('.project__card-*...*').hover(
function() {$('.project__paths #path_id*...*').show(); }, 
function() {$('.project__paths #path_id*...*').hide();}
 );

<div class="col-12 projects__cards">
    <svg class="projects-paths" width="740" height="405" viewBox="0 0 740 405" fill="none" xmlns="http://www.w3.org/2000/svg"> 
        <path id="path-1" d="M220 103V1........" fill="#00AAFF"></path></svg>
<div class="projects__card text-center" data-pathid="path-1"></div>
</div>

$('.projects__card').hover(
let path_id = $(this).data('pathid');
function() {$('.projects__card #'+path_id ).show(); }, 
function() {$('.projects__card #'+path_id ).hide();}
 );

<section class="mainmenu">
  <div class="menu">
      <a href="#"><h3>Меню</h3></a>
      <div class="submenu">
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
      </div>
  </div>  
   <div class="menu">
      <a href="#"><h3>Меню</h3></a>
      <div class="submenu">
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
      </div>
  </div>  
</section>

*{
    padding: 0;
    margin: 0;
}

body{
  background: white;
  padding-top: 50px;
  padding-left: 200px;
  font-family: 'Montserrat Alternates', sans-serif;
}


.mainmenu .menu .submenu{
  display: none;
}
.mainmenu .menu:hover .submenu{
  border-top: 2px solid #E5E2E2;
  background: gray;
  display: block;
}
.mainmenu .menu:hover .submenu a:hover{
    color: #FFF
}
.menu a{
    text-decoration: none;
    color: #E5E2E2;
}
.mainmenu .menu{
    border: 2px solid #B18552;
    width: 300px;
    overflow: hidden;
    text-align: center;
    background: blue;
}

.mainmenu div:first-child{
    border-radius: 30px 30px 0 0;

}
.mainmenu div:last-child{
    border-radius: 0 0 30px 30px;
}
.mainmenu h3{
          transition: all 4s;
    padding: 25px 0 25px 0;
    font-size: 25px;
}

.mainmenu p{
    font-size: 20px;
       padding: 25px 0 25px 0;
}

.tip::before {
          content: '';
          background: transparent;
          border: 0px solid transparent;
          border-top: 10px solid #bdbdbd;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
          position: absolute;
          right: 20px;
          top: -10px;
      }

<video autoplay="" loop="" muted="" playsinline="" preload="yes" poster="poster/1.jpg">
<source src="video/1-test.m4v" type="video/mp4">
</video>

.nav-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;    
    margin-top: 2%;
    border: 1px solid #e7e7e7;
    background: #f3f3f3;
    list-style: none;
    height: 2.5rem; 
}
.nav-menu li{
  display: flex;
  flex : 1 1 auto;
  height: 2.5rem;
}

.nav-menu a {
    margin: auto 0;
    text-transform: uppercase;
    color: #c8c8c8;
    text-decoration: none;
    font-size: .875rem;
    text-align: center;
    width: 100%;
}
.nav-menu li:hover,
.nav-menu li:hover a{
    color: #fff;
    background: #29c5e6;
}

.links {
    width: 100%;
    height: 50px;
    background: #f3f3f3;
    border-bottom: 1px solid #e7e7e7;
}
.links ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 15px;
    List-style: none;
}
.links ul li a {         
    display: block;
    text-decoration: none;
    color: #8f8f8f;
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: 300;
}
.links span {
    margin-right: 10px;
    padding: 0 10px;
    width: 24px;
    height: 24px;
    background: #8f8f8f;
    color: #fff;
}
.links ul li:hover a {
    color: #29c5e6;
}
.links ul li:hover span {
    background: #29c5e6;
    color: #fff;
}