.hero {
  min-height: 100vh;
  max-width: 100vw;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-bottom: 64px;

  .hero__content {
    padding-left: 9vw;
    padding-right: 9vw;
    padding-top: clamp(120px, 5vw, 160px);

    .wp-block-button {
      a {
        display: flex;
        flex-direction: column;
        border-radius: 24px;
        padding-left: 3vw;
        padding-right: 3vw;
      }
    }
  }

  .hero__cols {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    
    figure {
      margin-bottom: 0;
    }
  }

  .hero__social {
    padding-left: 3.35vw;
    max-width: 1920px;

    & > div {
      display: flex;
      align-items: center;
      gap: clamp(16px, 2.08vw, 40px) !important;
    }
  }

  .eu-mobile {
    display: none;
  }

  .eu-desktop {
    img {
      border-radius: 16px;
    }
  }
}

@media only screen and (max-width: 1300px) {
  .hero {
    .hero__content {
      padding-left: 64px;
      padding-right: 64px;

      .wp-block-button {
        a {
          padding-left: 24px;
          padding-right: 24px;
        }
      }
    }
  }

}

@keyframes float {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
}

@keyframes float2 {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(64px);
    }

}

@media only screen and (max-width: 1110px) {
 .hero {
    .hero__content {
      padding-top: 64px;
    }

    .hero__cols {
      display: grid;
      grid-template-areas: 
        "img img"
        "exp btn";
      gap: 24px !important;

      .col--1 {
        grid-area: exp;
      }

      .col--2 {
        grid-area: img;
        padding: 0 !important;
      }

      .col--3 {
        grid-area: btn;
        display: flex;
        flex-direction: column;
        height: 100%;

        div {
          height: 100%;
        }

        .wp-block-button {
          width: 100%;
          height: 100%;

          a {
            justify-content: center;
          }

          a br {
            display: none;
          }
        }
      }
    
    }

    .hero__social {
      padding-top: 24px;
      padding-left: 64px;
    }
  }
}


@media only screen and (max-width: 576px) {
     .hero {
        .hero__content {
          padding-top: 16px;
          padding-left: 24px;
          padding-right: 24px;

          h1 {
            width: 270px;
          }
        }

        .hero__cols {
          gap: 16px !important;
          grid-template-areas: 
            "img"
            "exp"
            "btn"; 

            .wp-block-button a { 
              display: flex;
              flex-direction: row;
            }
        }

        .hero__social {
          padding-left: 24px;
        }

        .eu-desktop {
          display: none;
        }

        .eu-mobile {
          display: block;
          margin-top: 80px;
          width: 200px;
          height: auto;

          img {
            border-radius: 16px;
          }
        }
    }
}