.first-view {
  padding: 6.4rem max(calc((100% - var(--contents-width)) / 2 + var(--space-medium)), var(--space-medium));
  background-color: var(--color-secondary);
  display: flex;
  justify-content: space-between;
  gap: var(--space-medium);
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .first-view {
    width: calc(100% + var(--space-medium) * 2);
    margin-left: calc(var(--space-medium) * -1);
    padding: var(--space-medium);
    flex-direction: column;
    align-items: center;
  }
}

.first-view::before,
.first-view::after {
  content: "";
  position: absolute;
  width: 60rem;
  height: 60rem;
  background-image: url("/image/index/beehiv.svg");
  background-size: 60rem;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .first-view::before,
  .first-view::after {
    width: 40rem;
    height: 40rem;
    background-size: 40rem;
  }
}

.first-view::before {
  bottom: 20%;
  right: max(-25%, -34rem);
  background-position: left bottom;
}

@media screen and (max-width: 768px) {
  .first-view::before {
    bottom: 60%;
    right: max(-40%, -24rem);
  }
}

.first-view::after {
  top: 15%;
  left: max(-42%, -36rem);
  background-position: right top;
}

@media screen and (max-width: 768px) {
  .first-view::after {
    top: 60%;
    left: max(-40%, -20rem);
  }
}

.first-view .first-view__text {
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

.first-view .title {
  font-size: var(--font-size-x-large);
  font-weight: var(--font-weight-black);
}

.first-view .lead {
  margin-top: var(--space-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-medium);
}

.first-view .lead__text {
  font-weight: var(--font-weight-bold);
}

.first-view .lead__app-icon {
  width: 9rem;
  height: 9rem;
}

.first-view .first-view__mockup {
  position: relative;
  width: max(30%, 28rem);
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .first-view .first-view__mockup {
    height: 30rem;
  }
}

.first-view .first-view__mockup img {
  position: absolute;
  top: 0;
}

.download {
  padding: var(--space-x-large) var(--space-large);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-large);
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: var(--border-radius-large);
  text-align: center;
}

.download .download__button-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-x-small) var(--space-large);
}

.employer-information .button-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-medium) var(--space-x-large);
}