.highligth {
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  width: 100%;
  max-width: 1566px;
  margin: 0 auto;
  overflow: hidden;
}

.highligth__background .highligth__inner {
  border-radius: 28px;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.highligth__background--planet .highligth__inner {
  background: var(--color-neutral--1);
}

.highligth__background--planet .highligth__inner::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../images/highligth/planet.png);
  background-position: center;
  background-repeat: no-repeat;
  background: linear-gradient(270deg, rgba(4, 7, 33, 0.00) 0%, rgba(4, 7, 33, 0.75) 55.38%), url(../../images/highligth/planet.png) lightgray 50% / cover no-repeat;
}

.highligth__background--primary--2 .highligth__inner {
  background-color: var(--color-primary--2);
  color: var(--color-neutral--1);
}

.highligth__background--secondary--1 .highligth__inner {
  background-color: var(--color-secondary--1);
  color: var(--color-white);
}


.highligth__background--secondary--2 .highligth__inner {
  background-color: var(--color-secondary--2);
  color: var(--color-white);
}



.highligth__inner {
  margin: 32px 12px 64px 12px;
  display: flex;

  position: relative;

  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.highligth__wrapper {
  display: flex;
  padding: 58px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
  z-index: 1;

  max-width: 1440px;
  margin: 0 auto;
}

.highligth__texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.highligth__media {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.highligth__video {
  position: relative;
  width: 100%;
  height: fit-content;
  aspect-ratio: 16/9;
  margin: 0 auto;
}

.highligth__video-text {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}



@media all and (min-width:1024px) {
  .highligth__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 96px 24px;
    gap:34px;
    align-items: center;
  }


  .highligth__background .highligth__inner::before {
    display: block;
    content: '';
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .highligth__background--primary--2 .highligth__inner::before {
    background-image: url('../../images/highligth/background-shape.svg');
    width: 1438px;
    height: 920px;
    right: -510px;
    top: -60px;
  }

  .highligth__background--secondary--1 .highligth__inner::before {
    background-image: url('../../images/highligth/background-shape2.svg');
    width: 1570px;
    height: 886px;
    inset:0;
  }
}