.thing { padding-top: 15px; padding-bottom: 30px; background: $gradient; color: $black; overflow: hidden; position: relative; @media (min-width: $laptop) { padding-top: 20px; padding-bottom: 60px; } @media (min-width: $desktop) { padding-bottom: 90px; } &__body { display: flex; flex-direction: column; align-items: flex-start; } &__breadcrumbs { width: 100%; margin-bottom: 40px; position: relative; z-index: 2; @media (min-width: $tablet) { margin-bottom: 60px; } } &__title { width: 100%; font-size: 32px; font-weight: 700; margin: 0; max-width: 780px; position: relative; z-index: 2; line-height: 1.1; @media (min-width: $tablet) { font-size: 40px; } @media (min-width: $desktop) { font-size: 64px; } } &__text { width: 100%; font-weight: 700; font-size: 14px; line-height: 1.4; margin: 15px 0 0 0; max-width: 780px; position: relative; z-index: 2; @media (min-width: $tablet) { margin-top: 15px; } @media (min-width: $laptop) { font-weight: 400; font-size: 18px; } } &__search { width: 100%; max-width: 640px; margin-top: 20px; position: relative; z-index: 2; @media (min-width: $tablet) { margin-top: 30px; } } &__badge { position: relative; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 0 12px; background: $blue; color: $white; font-size: 12px; line-height: 1; height: 26px; border-radius: 999px; margin-bottom: 20px; @media (min-width: $laptop) { font-size: 16px; gap: 10px; padding: 0 24px; height: 42px; margin-bottom: 30px; } svg { width: 12px; height: 12px; @media (min-width: $laptop) { width: 20px; height: 20px; } } } &__pic { width: 60px; aspect-ratio: 1/1; object-fit: contain; position: relative; z-index: 1; margin-bottom: 15px; @media (min-width: $tablet) { width: 160px; position: absolute; top: 15px; right: 20px; } @media (min-width: $laptop) { width: 330px; top: 50%; transform: translate(0, -50%); } @media (min-width: $desktop) { right: auto; left: 50%; margin-left: 200px; } &_two { object-fit: cover; border-radius: 30px; aspect-ratio: 44/37; width: 100%; max-width: 440px; @media (min-width: $tablet) { position: static; transform: translate(0, 0); } @media (min-width: $desktop) { position: absolute; transform: translate(0, -50%); } } } &__buttons { width: 100%; position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; margin-top: 15px; @media (min-width: $laptop) { margin-top: 30px; gap: 30px; } .button { @media (min-width: $laptop) { padding: 0 22px; } } } &__checkbox { margin-top: 20px; .checkbox__icon { border-color: $green; } .checkbox__text { color: $green; } } &__profile { display: flex; flex-direction: column; @media (min-width: $tablet) { flex-direction: row; align-items: flex-start; } &-photo { width: 210px; border-radius: 8px; aspect-ratio: 1/1; } &-body { display: flex; flex-direction: column; margin-top: 15px; @media (min-width: $tablet) { width: calc(100% - 210px); padding-left: 35px; } } } &__profile &__title { max-width: none; @media (min-width: $tablet) { margin-top: -20px; } } &__profile &__text { max-width: none; } &__bottom { display: flex; align-items: center; gap: 15px; margin-top: 15px; @media (min-width: $tablet) { margin-top: 30px; } } &__select { width: 100%; max-width: 640px; margin-top: 20px; @media (min-width: $tablet) { margin-top: 30px; } } }