/* hero.css */

.hero--sect {}
  .hero--content {}
    .hero--content_wrap{}
      .hero--content_bg_img {}
      .hero--content_shout {}
        .hero--content_shout_wrap {}
          .hero--content_shout_h1 {}
          .hero--content_shout--button{}

.hero--sect {
  display: block;
  margin-top: 60px;
}
@media screen and (min-width:48.1rem){
    .hero--sect {
      margin-top: 0;
    }
}

.hero--content_wrap {
  display: flex;
  position: relative;
}

.hero--content_bg_img {
  background-color:#febac7;
  width:var(--actual-100w);
  min-height:100vw;
  background-image: url(../images/hero.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media screen and (min-width:32.1rem){
    .hero--content_bg_img {
      width:var(--actual-100w);
      min-height:50vh;
    }
}

@media screen and (min-width:48.1rem){
    .hero--content_bg_img {
      width:var(--actual-100w);
      height:95vh;
    }
}

.hero--content_shout{
  display: block;
  position: absolute;
  top: 60%;
  width: 50%;
  max-width: 90vw;
  margin: 0 1rem;
  /* padding: 1rem; */
  transform: translateY(-50%);
}

@media screen and (min-width:48.1rem){
    .hero--content_shout{
      top: 60%;
      width: 50%;
      max-width: 600px;
      margin: 0 60px;
      padding: 60px;
      transform: translateY(-50%);
    }
}

.hero--content_shout_h1 {
  /* Set max and min font sizes */
  --max-font: 2.5;
  --min-font: 2;
  font-family: var(--header-font);
  font-size: var(--responsive);
}

@media screen and (min-width:48.1rem){

    .hero--content_shout_h1 {
      /* Set max and min font sizes */
      --max-font: 3.375;
      --min-font: 3;
    }

}

.hero--content_shout--button{
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 16px 78px;
    /*  */
    color: var(--theme_black);
    border-color: var(--theme_black);
    border: solid 2px var(--theme_black);
    background-color: rgba(254, 186, 199, 0.6);
}

.hero--content_shout--button:hover {
    color: #febac7; /* rgba(254, 186, 199, 1) */
    border-color: rgba(33, 43, 54, 0);
    border: solid 2px rgba(33, 43, 54, 0);
    background-color: var(--theme_black);
}