.photographer-promo {
  @apply h-full w-full font-sans;
}

.photographer-promo__header {
  @apply
    flex
    flex-col
    items-center
    justify-center
    relative;
  height: 70vh;
}

@screen sm {
  .photographer-promo__header {
    @apply items-start;
  }
}

.photographer-promo__header-image {
  @apply w-full absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

.photographer-promo__header-image .image {
  object-fit: cover;
  height: 100%;
}

.photographer-promo__header-welcome,
.photographer-promo__header-video,
.photographer-promo__header-text,
.photographer-promo__header-price {
  @apply text-white;
  z-index: 2;
}

.photographer-promo__header-video {
  @apply mb-12;
  width: 75%;
}

@screen sm {
  .photographer-promo__header-video {
    width: 50%;
    max-width: 200px;
    position: absolute;
    right: 2rem;
  }
}

@screen md {
  .photographer-promo__header-video {
    max-width: 400px;
  }
}

@screen sm {
  .photographer-promo__header-welcome,
  .photographer-promo__header-text,
  .photographer-promo__header-price {
    @apply ml-10;
  }
}

.photographer-promo__header-welcome {
  @apply mb-8 tracking-extra-wide;

  display: none;
}

@screen sm {
  .photographer-promo__header-welcome {
    @apply block uppercase text-sm;
  }
}

.photographer-promo__header-text {
  @apply
    text-3xl
    font-semibold
    text-center
    mb-4
    tracking-normal-plus
    leading-tight;

  max-width: 300px;
}

@screen sm {
  .photographer-promo__header-text {
    @apply
      text-4xl
      text-left
      mb-8;

    max-width: 350px;
  }
}

.photographer-promo__header-price {
  @apply
    text-xl
    text-grey
    bg-blue-darker
    rounded-xl
    py-3
    px-5
    tracking-extra-wide;
}

.photographer-promo__header-price-per {
  @apply text-base;
}

.photographer-promo__header-price-value {
  @apply text-white;
}

.photographer-promo__contacts {
  @apply
    relative
    pt-8
    px-6
    pb-12
    bg-white;

  z-index: 2;
  margin-top: -2.5rem;
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
}

.photographer-promo,
.photographer-promo__contacts,
.photographer-promo__about {
  background-color: #FAFBFC;
}

.photographer-promo__form {
  @apply mb-6 ml-1;
}

.photographer-promo__form .form {
  max-width: unset;
}

@screen lg {
  .photographer-promo__form .form {
    max-width: 500px;
  }
}

.photographer-promo__form-header,
.photographer-promo__contacts-header {
  @apply
    text-black
    text-sm
    font-semibold
    ml-2;
}

.photographer-promo__contacts-header {
    @apply mb-6
  }

.photographer-promo__form .input__supertext {
  background-color: #FAFBFC;
}

.photographer-promo .photographer-promo__form-form {}

@screen sm {
  .photographer-promo .photographer-promo__form-form {
    @apply flex items-center w-full;
  }
}

.photographer-promo .photographer-promo__form .pin {
  @apply mb-4;
}

.photographer-promo .photographer-promo__form-booking-status {
  @apply text-sm font-normal text-grey-dark text-center;
}

.photographer-promo .photographer-promo__form .link {
  @apply flex w-full justify-center mt-4;
}

.photographer-promo .photographer-promo__form-form .btn {
  @apply mt-0;
}

.photographer-promo .photographer-promo__form-form > *:first-child {
  @apply mr-4;
  flex: 2;
}

.photographer-promo .photographer-promo__form-form > *:last-child {
  flex: 1;
}

@screen sm {
  .photographer-promo__contacts-header {
    display: none;
  }
}

.photographer-promo__about {
  @apply px-6;
  display: none;
}

@screen sm {
  .photographer-promo__about {
    @apply block;
  }
}