.hero {
  height: calc(var(--vh, 1vh) * 90);
  position: relative;
  padding-top: calc(var(--index) * 5);
}
.center-right
{
  display: flex;
  flex-wrap: nowrap;
}

.block {
  margin-top: calc(var(--index) * 1);
  will-change: transform;
  position: relative;
  width: 25vw;
  height: 60vh;
  margin-left: calc(var(--index) * 1);
  margin-right: calc(var(--index) * 1);
}

.block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: 0;
  will-change: transform;
}

.block:hover::before {
  transform: scale(1.05);
}

.block::after {
  content: attr(data-name);
  will-change: transform;
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 1.5rem;
  color: #f1f1f1;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  font-family: 'Bebas', sans-serif;
}

.block:hover::after {
  opacity: 1;
}


.bottom-content {
    padding-left: calc(var(--index) * 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: calc(100% - 3%);
}

.bottom-content p {
    font-family: 'Montserrat';
    font-size: calc(var(--index) * 0.7);
    font-weight: 700;
}

.bottom-content .left .contact_email {
    text-decoration: underline;
}

.bottom-content .right {
    display: flex;
    align-items: center; 
}

.bottom-content .right p {
    color: #7D7D7D;
}

@media (max-width: 900px) {
  .hero {
    height: auto;
    padding-top: calc(var(--index) * 2.5);
    padding-bottom: calc(var(--index) * 5);
  }

  

  .center-right {
      height: 60vh;
  }


  .block {
    width: 90vw;
    
  }

  .bottom-content {
        width: calc(100% - 5.5%);
  }

  .bottom-content  p {
    font-size: calc(var(--index) * 1);
  }
}