.hero-container {
  width: 100%;
  background-color: whitesmoke;
  height: 100%;
}
.hero-container .hero-img {
  position: relative;
  height: 100%;
}
.hero-container .hero-img img {
  min-width: 100%;
  min-height: 100%;
  background-color: #aaa;
  width: 100%;
  height: calc(100% + 11px);
  object-fit: cover;
  aspect-ratio: 5/2;
}
.hero-container .hero-img .hero-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 0 0 30px rgb(0, 0, 1);
  text-align: center;
  width: 100%;
}
.hero-container .hero-img .hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  width: 100%;
  margin: 0 0 1rem 0;
}
.hero-container .hero-img .hero-content p {
  margin: 0 auto;
  font-weight: 500;
  width: 80%;
  font-size: 1.5rem;
}
.hero-container .hero-img .studo-icon {
  background: #FE5253;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 999;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  text-indent: -99999px;
  margin-left: -35px;
  margin-bottom: -29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-container .hero-img .studo-icon:after {
  content: "";
  display: block;
  background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%20%20%20%20%20width%3D%2276px%22%20height%3D%2276px%22%20viewBox%3D%220%200%2076%2076%22%20style%3D%22enable-background%3Anew%200%200%2076%2076%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M28.7%2C4.9L18.3%2C15.2L34.1%2C31c2.8-1.5%2C6.9-1.3%2C9.6%2C1.4c3.1%2C3.1%2C3.1%2C8.3-0.1%2C11.4s-8.1%2C3-11.2-0.1%0A%09c-2.6-2.6-3.3-6.4-1.1-9.8L15.5%2C18.1L4.6%2C28.9C-0.4%2C34-0.2%2C42%2C4.9%2C47.1l24%2C24c5.1%2C5.1%2C13.1%2C5.3%2C18.1%2C0.3l24-24%0A%09c5.1-5.1%2C5.3-13.6%2C0.3-18.7l-24-24C42.3-0.4%2C33.7-0.2%2C28.7%2C4.9z%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 100%;
  width: 40px;
  height: 40px;
}
@media (max-width: 993px) {
  .hero-container .hero-img {
    height: 400px !important;
  }
  .hero-container .hero-img img {
    height: 400px !important;
    aspect-ratio: auto;
  }
  .hero-container .hero-content {
    width: 95% !important;
  }
  .hero-container .hero-content h1 {
    font-size: 2rem !important;
  }
  .hero-container .hero-content p {
    font-size: 1rem !important;
  }
}

.hero-container-small {
  width: 100%;
  height: 320px;
  position: relative;
}
.hero-container-small::after {
  content: "";
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
.hero-container-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
.hero-container-small .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  max-width: 1230px;
  margin: auto;
}
.hero-container-small .container .hero-content {
  color: white;
  text-align: left;
  line-height: 1.3;
  margin: auto auto 2rem;
  gap: 30px;
  display: grid;
}
.hero-container-small .container .hero-content:is(.no-right-column-grid-template) .right {
  display: none;
}
.hero-container-small .container .hero-content:is(.no-left-column-grid-template) .left {
  display: none;
}
.hero-container-small .container .hero-content:is(.one-column-grid-template) .left {
  display: none;
}
.hero-container-small .container .hero-content:is(.one-column-grid-template) .right {
  display: none;
}
.hero-container-small .container .hero-content:is(.default-grid-template) .right {
  display: none;
}
@media (max-width: 993px) {
  .hero-container-small .container .hero-content:is(.default-grid-template) {
    grid-template-columns: 1fr;
  }
}
.hero-container-small .container .hero-content:is(.no-left-column-grid-template) .right {
  display: none;
}
.hero-container-small .container .hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0;
}
.hero-container-small .container .hero-content h2 {
  margin-bottom: 0;
}
.hero-container-small .container .hero-content p {
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 0;
}
@media (max-width: 1230px) {
  .hero-container-small .container .hero-content {
    padding-inline: 1rem;
  }
}
@media (max-width: 993px) {
  .hero-container-small .container .hero-content {
    max-width: 95%;
    margin: 0 0 2rem;
  }
  .hero-container-small .container .hero-content h1 {
    font-size: 2rem;
  }
  .hero-container-small .container .hero-content p {
    font-size: 1rem;
  }
}

/*# sourceMappingURL=hero.css.map */