*{
  margin:0;
  padding:0;
  box-sizing:border-box;

body{
  padding: 0px;
}

.hero{
  position: relative;
  height: 100vh;
  display: block; 
}

.bg-image{
  position:absolute;
  padding: 0;
  width:100%;
  height:100%;

  object-fit:cover;

object-position: right center;

  top:0;
  left:0;

  z-index:1;
}

.right-panel{
  position: absolute;
  right: 12%;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 16px;

  align-items: flex-start;
  z-index: 2;
}

.name{
  color:white;
  font-family:'Oswald', sans-serif;
  font-size:8rem;

  letter-spacing:0.1em;
  line-height:0.9;

  font-weight:100;

  margin-bottom:20px;
}
.nav-button{
  width:180px;
  height:60px;

  border:none;
  border-radius:999px;

  background:#f6b7e5;

  font-family:'Oswald', sans-serif;
  font-size:1.5rem;
  font-weight:700;

  color:black;

  cursor:pointer;

  transition:0.25s ease;

  text-decoration:none;

display:flex;
justify-content:center;
align-items:center;
}

.nav-button:hover{
  transform:translateY(-4px);
}

@media (max-width:1100px){

  .bg-image{
    object-position:60% center;
  }

  .right-panel{
    left: auto;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .name{
    text-align:left;
    font-size:5rem;
    line-height:0.9;
    letter-spacing:0.02em;
  }

  .nav-button{
    width:150px;
    height:50px;
    font-size:1.5rem;
  }
}}