@media (min-width: 320px) and (max-width: 815px) {
  .container {
    padding: 0 24px;
  }

  .language {
    gap: 5px;
    width: 82px;
    min-height: 32px;
    max-height: 32px;
    font-size: 14px;
  }

  .language.open {
    max-height: 131px;
    padding: 8px 12px 10px 12px;
  }

  .language > .language-actual > span:nth-of-type(1) {
    width: 28px;
  }

  .language > .language-actual > span:nth-of-type(2) {
    width: 20px;
    height: 20px;
  }

  .nav-wrap > nav > ul {
    gap: 16px;
  }

  .nav-wrap > nav > ul > li > a {
    font-size: 24px;
    line-height: 28px;
  }

  .hero {
    gap: 115px;
    transform: translateY(-100px);
  }

  .hero-title > h2 {
    font-size: 100px;
    margin-top: 2px;
    margin-left: 24px;
  }

  .hero-title > h1 {
    font-size: 120px;
    margin-top: -77px;
    margin-left: 27px;
  }

  .hero-title > h4 {
    font-size: 80px;
    margin-top: -62px;
    margin-left: 225px;
  }

  .hero-title > h3 {
    font-size: 78px;
    margin-top: -35px;
    margin-right: 0;
  }

  .hero-cta {
    gap: 60px;
  }

  .hero-name {
    margin-left: 0;
    font-size: 40px;
  }

  .hero-btns {
    gap: 36px;
    height: 68px;
    margin-left: 0px;
  }

  .hero-btns > a:nth-of-type(1) {
    width: 376px;
    font-size: 28px;
  }

  .hero-btns > a:nth-of-type(2) {
    width: 376px;
    font-size: 22px;
  }

  .hero-socials {
    position: unset;
    flex-direction: row;
  }

  .aboutme {
    margin-top: 5px;
  }

  .about-wrap > .bl-l {
    max-width: 350px;
  }

  .about-title {
    font-size: 48px;
  }

  .about-text {
    font-size: 24px;
  }

  .about-wrap > .bl-r {
    width: 410px;
    height: 410px;
  }

  .sk-wrap {
    flex-wrap: wrap;
    gap: 56px;
    margin-top: 100px;
  }

  .sk-wrap > .bl-l {
    max-width: 572px;
  }

  .sk-wrap > .bl-r {
    max-width: 408px;
  }

  .contact {
    margin-top: 145px;
    margin-bottom: 373px;
  }
}