.section {
  height: 60rem;
  @media (min-width: 478px) {
    height: auto;
    min-height: 45rem;
  }
  .container {
    width: 100%;
    padding: 8rem 0 1.5rem 0;

    @media (min-width: 768px) {
      padding: 8rem 0 2.5rem 0;
    }
    .content_wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;

      @media (max-width: 478px) {
        left: 0;
        bottom: 21rem;
        height: 72rem;
      }

      .header {
        position: absolute;
        z-index: $z-nav;
        bottom: 1%;
        display: flex;
        text-transform: uppercase;
        flex-direction: column;
        justify-content: center;
        margin-left: 1rem;
        letter-spacing: -1px;
        color: $c-secondary;

        @media (min-width: 478px) {
          position: relative;
          align-items: center;
          top: 0;
          left: 0;
          margin-left: 1rem;
          color: $c-title;
        }
      }

      .content_container {
        position: relative;
        min-height: 40rem;

        -webkit-transition: transform ease 0.2s;
        -moz-transition: transform ease 0.2s;
        -o-transition: transform ease 0.2s;
        -ms-transition: transform ease 0.2s;
        transition: transform ease 0.2s;

        &:hover {
          transform: scale(1.01);
        }

        @media (min-width: 480px) {
          min-height: 50rem;
        }

        @media (min-width: 900px) {
          min-height: auto;
        }

        .content_wrapper {
          user-select: none;
          padding: 2.5rem;

          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 0;

          @media (min-width: 768px) {
            padding: 3rem;
          }

          @media (min-width: 900px) {
            padding: 3.5rem;
          }

          @media (min-width: 1200px) {
            padding: 4rem;
          }

          .content_title {
            line-height: 1;
            text-transform: uppercase;
            font-family: $font-f-primary;
            color: $c-secondary;
            letter-spacing: 0.2rem;
            font-weight: $font-w-700;
            margin-bottom: 0.5rem;
            text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.6);
            font-size: clamp(2.2rem, 3vw, 3.5rem);

            @media (min-width: 480px) {
              text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.5);
            }

            @media (min-width: 768px) {
              text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.15);
            }
          }

          .content_subtitle {
            font-family: $font-f-secondary;
            font-weight: $font-w-700;
            letter-spacing: $ls-secondary;
            color: $c-secondary;
            font-size: 1.3rem;
            margin-bottom: 0.8rem;
            text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.7);

            @media (min-width: 900px) {
              font-size: 1.5rem;
              text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.5);
              margin-bottom: 0.9rem;
            }

            @media (min-width: 1200px) {
              text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.15);
            }
          }

          .button {
            font-family: $font-f-primary;
            text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            color: $c-secondary;
            border-radius: 999rem;
            font-size: 1.2rem;
            background-color: rgba(61, 61, 61, 0.8);
            box-shadow: 0 0 2rem hsla(0, 0%, 5%, 0.6);
            display: inline-block;
            padding: 0.8rem 1.3rem;

            @media (min-width: 1200px) {
              padding: 1rem 1.5rem;
              font-size: 1.4rem;
            }

            &:hover {
              transform: translate(0, -4%);
              background-color: $back-c-button-hover;
            }
          }
        }
      }

      .buttons_wrapper {
        position: absolute;
        bottom: 0;
        margin-top: 2rem;
        margin-bottom: 1rem;
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;

        @media (min-width: 478px) {
          margin-top: 2rem;
          margin-bottom: 2rem;
          margin-left: 0;
          position: relative;
          top: 0;
          left: 0;
        }
        .button {
          font-family: $font-f-primary;
          text-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.2);
          color: $c-secondary;
          border-radius: 999rem;
          font-size: 1rem;
          background-color: rgba(61, 61, 61, 0.8);
          box-shadow: 0 0 2rem hsla(0, 0%, 5%, 0.6);
          display: inline-block;
          padding: 0.8rem 1.3rem;

          @media (min-width: 768px) {
            font-size: 1.4rem;
          }

          @media (min-width: 1200px) {
            padding: 1rem 1.5rem;
            font-size: 1.4rem;
          }

          &:hover {
            transform: translate(0, -4%);
            background-color: $back-c-button-hover;
          }
        }
      }
    }

    .image {
      position: relative;
      transition: transform 0.3s ease;
      width: 70%;
      height: auto;
      border-radius: 30% 70% 44% 56% / 49% 43% 57% 51%;
      overflow-x: hidden;

      @media (max-width: 478px) {
        width: 100%;
        left: 0;
        top: 10rem;
        overflow: hidden;
        transform: scale(3.5);
        border-radius: 0;
      }

      &.show {
        opacity: 1;
      }
    }
  }
}
