.production-page { color: #f7f4ee;
overflow: hidden;
}
.prod-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
}
.prod-label {
position: relative;
width: fit-content;
margin: 0 0 30px;
padding-bottom: 14px;
font-size: 11px;
line-height: 1;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(191, 164, 106, 0.82);
}
.prod-label:after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 140px;
height: 1px;
background: linear-gradient(
90deg,
rgba(191, 164, 106, 0.95),
rgba(191, 164, 106, 0.18),
transparent
);
}  .prod-hero {
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
padding: 120px 0 90px;
}
.prod-hero__container {
position: relative;
z-index: 0;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
opacity: 0;
visibility: hidden;
}
.prod-hero__title-box {
position: relative;
width: 100%;
}
.prod-hero__frame {
position: relative;
height: 78vh;
min-height: 560px;
max-height: 820px;
overflow: hidden;
background: #070707;
border: 2px solid rgba(219, 197, 143, 0.75); box-shadow:
0 0 0 7px #0a0a09,
0 0 0 9px rgba(191, 164, 106, 0.92),
inset 0 0 0 1px rgba(255, 255, 255, 0.035),
inset 0 0 80px rgba(191, 164, 106, 0.05);
}
.prod-hero__corner {
position: absolute;
z-index: 7;
width: 46px;
height: 46px;
pointer-events: none;
border: 2px solid rgba(232, 212, 165, 0.85);
}
.prod-hero__corner--tl {
top: -14px;
left: -14px;
border-right: none;
border-bottom: none;
}
.prod-hero__corner--tr {
top: -14px;
right: -14px;
border-left: none;
border-bottom: none;
}
.prod-hero__corner--bl {
bottom: -14px;
left: -14px;
border-right: none;
border-top: none;
}
.prod-hero__corner--br {
bottom: -14px;
right: -14px;
border-left: none;
border-top: none;
}
.prod-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.06);
filter: brightness(1) contrast(1.04) saturate(1);
opacity: 0;
pointer-events: auto;
}
.prod-hero__black {
position: absolute;
inset: 0;
z-index: 5;
background:
linear-gradient(
135deg,
rgba(5, 5, 5, 0.92) 0%,
rgba(5, 5, 5, 0.75) 40%,
rgba(5, 5, 5, 0.88) 100%
),
url(//harmoniya-smaku.com/wp-content/themes/imperia-appetita/assets/images/fone2.png) center center / cover no-repeat;
pointer-events: none;
}
.prod-hero__content {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 6;
width: min(1500px, calc(100% - 96px));
transform: translateX(-50%);
display: grid;
place-items: center;
text-align: center;
perspective: 1400px;
pointer-events: none;
}
.prod-hero__title-wrap {
position: relative;
width: 100%;
opacity: 0;
transform-origin: center center;
will-change: transform, opacity, filter;
}
.prod-hero__logo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 38px;
}
.prod-hero__logo img {
width: 170px;
max-width: 26vw;
height: auto;
display: block;
filter:
drop-shadow(0 0 20px rgba(255,255,255,.08))
drop-shadow(0 0 35px rgba(155,129,77,.18));
transition: transform .4s ease;
}
.prod-hero__logo img:hover {
transform: scale(1.04);
}
.prod-hero__title {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(58px, 8.6vw, 150px);
font-weight: 500;
line-height: 0.86;
letter-spacing: -0.045em;
text-transform: uppercase;
white-space: nowrap;
}
.prod-hero__title--outline {
color: transparent;
-webkit-text-stroke: 1.15px rgba(247, 244, 238, 0.24);
}
.prod-hero__title--fill {
position: absolute;
inset: 0;
color: #9b814d;
clip-path: inset(100% 0 0 0);
filter: drop-shadow(0 0 22px rgba(155, 129, 77, 0.14));
}
.prod-hero__system-content {
position: absolute;  z-index: 7;
width: 800px;
max-width: 90%;
text-align: center;
color: #fff;
opacity: 0;
isolation: isolate;
}
.prod-hero__system-content::before {
content: "";
position: absolute;
inset: -120px;
z-index: -1;
background: radial-gradient(
ellipse,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.35) 35%,
rgba(0, 0, 0, 0) 75%
);
filter: blur(60px);
}
.prod-hero__system-content .prod-label {
margin-right: auto;
margin-left: auto;
}
.prod-hero__system-content .prod-label::after {
left: 50%;
transform: translateX(-50%);
}
.prod-hero__system-content h2 {
max-width: 760px;
font-family: "Cormorant Garamond", Georgia, serif;
margin: 0;
font-size: 72px;
line-height: 0.95;
font-weight: 500;
letter-spacing: -0.06em;
color: #f7f4ee;
text-shadow:
0 18px 52px rgba(0, 0, 0, 0.72),
0 0 28px rgba(5, 5, 5, 0.66);
}
.prod-hero__system-line {
width: 420px;
height: 1px;
margin: 24px auto;
background: linear-gradient(
90deg,
transparent,
rgba(191, 164, 106, 0.92),
transparent
);
}
.prod-hero__system-text {
margin: 0;
font-size: 18px;
line-height: 1.6;
font-family: "Manrope", sans-serif;
line-height: 1.8;
letter-spacing: 0.04em;
color: rgba(247, 244, 238, 0.76);
}
@media (max-width: 900px) {
.prod-hero {
padding: 130px 0 70px;
}
.prod-hero__container {
padding: 0 24px;
}
.prod-hero__frame {
height: 68vh;
min-height: 480px;
}
.prod-hero__content {
width: calc(100% - 40px);
}
.prod-hero__title {
font-size: clamp(40px, 10vw, 84px);
letter-spacing: -0.035em;
}
.prod-hero__corner {
width: 32px;
height: 32px;
}
.prod-hero__corner--tl,
.prod-hero__corner--tr {
top: -10px;
}
.prod-hero__corner--bl,
.prod-hero__corner--br {
bottom: -10px;
}
.prod-hero__corner--tl,
.prod-hero__corner--bl {
left: -10px;
}
.prod-hero__corner--tr,
.prod-hero__corner--br {
right: -10px;
}
.prod-hero__logo{
margin-bottom:30px;
}
.prod-hero__logo img{
width:130px;
}
}
@media (max-width: 560px) {
.prod-hero {
padding: 118px 0 56px;
}
.prod-hero__container {
padding: 0 16px;
}
.prod-hero__frame {
height: 58vh;
min-height: 420px;
}
.prod-hero__content {
width: calc(100% - 32px);
}
.prod-hero__title {
white-space: normal;
font-size: clamp(34px, 11vw, 56px);
line-height: 0.98;
letter-spacing: -0.03em;
}
.prod-hero__logo{
margin-bottom:22px;
}
.prod-hero__logo img{
width:92px;
}
}   .prod-standards {
position: relative;
overflow: hidden;
padding: 120px 0 80px; }
.prod-standards::before {
content: "";
position: absolute;
right: -180px;
top: 70px;
width: 520px;
height: 520px;
border-radius: 50%;
border: 1px solid rgba(155, 129, 77, 0.1);
pointer-events: none;
}
.prod-standards::after {
content: "";
position: absolute;
left: -160px;
bottom: -160px;
width: 500px;
height: 500px;
border-radius: 50%;
filter: blur(130px);
pointer-events: none;
}
.prod-standards__container {
position: relative;
z-index: 1;
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
gap: 82px;
align-items: start;
}
.prod-standards__content {
position: sticky;
top: 120px;
}
.prod-standards__title {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 52px;
font-weight: 500;
line-height: 0.94;
letter-spacing: -0.05em;
}
.prod-standards__title span {
display: block;
}
.prod-standards__title span:nth-child(1),
.prod-standards__title span:nth-child(3) {
color: #f5f2ec;
}
.prod-standards__title span:nth-child(2) {
color: #9b814d;
}
.prod-standards__lead {
position: relative;
max-width: 440px;
margin: 34px 0 0;
padding-top: 24px;
font-size: 15px;
line-height: 1.75;
color: rgba(245, 242, 236, 0.58);
}
.prod-standards__lead::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 280px;
height: 1px;
background: linear-gradient(
90deg,
rgba(155, 129, 77, 0.64),
transparent
);
} .prod-standards__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.prod-standards__item {
position: relative;
min-height: 250px;
padding: 30px;
overflow: hidden;
border: 1px solid rgba(155, 129, 77, 0.18);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.01)),
rgba(8, 8, 8, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
0 26px 80px rgba(0, 0, 0, 0.32);
opacity: 0;
transform: translateY(34px) scale(0.985);
clip-path: inset(12% 0 0 0);
transition:
opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.45s ease,
background 0.45s ease;
}
.prod-standards.is-visible .prod-standards__item {
opacity: 1;
transform: translateY(0) scale(1);
clip-path: inset(0 0 0 0);
}
.prod-standards.is-visible .prod-standards__item:nth-child(1) {
transition-delay: 0.05s;
}
.prod-standards.is-visible .prod-standards__item:nth-child(2) {
transition-delay: 0.18s;
}
.prod-standards.is-visible .prod-standards__item:nth-child(3) {
transition-delay: 0.3s;
}
.prod-standards.is-visible .prod-standards__item:nth-child(4) {
transition-delay: 0.42s;
}
.prod-standards.is-visible .prod-standards__item:nth-child(5) {
transition-delay: 0.54s;
}
.prod-standards__item::before {
content: "";
position: absolute;
left: 30px;
right: 30px;
top: 86px;
height: 1px;
background: linear-gradient(
90deg,
rgba(155, 129, 77, 0.36),
transparent
);
}
.prod-standards__item::after {
content: "";
position: absolute;
right: -120px;
bottom: -120px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 1px solid rgba(155, 129, 77, 0.08);
opacity: 0;
transform: scale(0.8);
transition:
opacity 0.45s ease,
transform 0.45s ease;
}
.prod-standards__item:hover {
transform: translateY(-6px);
border-color: rgba(155, 129, 77, 0.36);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
rgba(10, 10, 10, 0.82);
}
.prod-standards__item:hover::after {
opacity: 1;
transform: scale(1);
}
.prod-standards__item--featured {
grid-row: span 2;
min-height: 518px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background:
radial-gradient(circle at 20% 20%, rgba(155, 129, 77, 0.13), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
rgba(8, 8, 8, 0.78);
}
.prod-standards__item--featured::before {
top: auto;
bottom: 170px;
}
.prod-standards__item span {
display: block;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 42px;
line-height: 0.9;
color: rgba(155, 129, 77, 0.78);
}
.prod-standards__item:not(.prod-standards__item--featured) span {
margin-bottom: 58px;
}
.prod-standards__item--featured span {
position: absolute;
left: 30px;
top: 30px;
font-size: 76px;
color: rgba(155, 129, 77, 0.82);
}
.prod-standards__item h3 {
margin: 0 0 14px;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 32px;
font-weight: 500;
line-height: 1;
color: #f5f2ec;
}
.prod-standards__item--featured h3 {
max-width: 320px;
font-size: 32px;
}
.prod-standards__item p {
max-width: 360px;
margin: 0;
font-size: 13px;
line-height: 1.65;
color: rgba(245, 242, 236, 0.6);
}
.prod-standards .container::before {
content: "";
position: absolute;
left: -100vw;
right: -100vw;
top: -120px;
height: 170px;
z-index: -1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(5, 5, 5, 0.45) 0%,
rgba(5, 5, 5, 0.32) 18%,
rgba(5, 5, 5, 0.18) 42%,
rgba(5, 5, 5, 0.08) 68%,
transparent 100%
);
} @media (max-width: 1100px) {
.prod-standards__container {
grid-template-columns: 1fr;
gap: 60px;
}
.prod-standards__content {
position: relative;
top: auto;
}
.prod-standards__title {
font-size: 60px;
}
.prod-standards__lead {
max-width: 620px;
}
}
@media (max-width: 768px) {
.prod-standards {
padding-top: 90px;
padding-bottom: 96px;
}
.prod-standards__container {
padding-left: 20px;
padding-right: 20px;
}
.prod-standards__title {
font-size: 46px;
line-height: 0.98;
}
.prod-standards__grid {
grid-template-columns: 1fr;
}
.prod-standards__item,
.prod-standards__item--featured {
min-height: 220px;
grid-row: auto;
}
.prod-standards__item--featured {
justify-content: flex-start;
}
.prod-standards__item--featured span {
position: static;
font-size: 42px;
margin-bottom: 58px;
}
.prod-standards__item--featured h3 {
font-size: 34px;
}
.prod-standards__item--featured::before {
top: 86px;
bottom: auto;
}
}
@media (max-width: 480px) {
.prod-standards {
padding-top: 78px;
padding-bottom: 86px;
}
.prod-standards__container {
padding-left: 16px;
padding-right: 16px;
}
.prod-standards__title {
font-size: 38px;
}
.prod-standards__lead {
font-size: 14px;
line-height: 1.7;
}
.prod-standards__item {
min-height: 200px;
padding: 24px;
}
.prod-standards__item::before {
left: 24px;
right: 24px;
}
.prod-standards__item h3,
.prod-standards__item--featured h3 {
font-size: 30px;
}
}   .prod-products {
position: relative;
overflow: hidden;
padding: 120px 0px 130px; }
.prod-products__head {
width: min(1180px, calc(100% - 80px));
margin: 0 auto 70px;
}
.prod-products__title {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 64px;
font-weight: 500;
line-height: 0.94;
letter-spacing: -0.055em;
}
.prod-products__title span {
display: block;
}
.prod-products__title span:first-child {
color: #f7f4ee;
}
.prod-products__title span:last-child {
color: #9b814d;
}
.prod-products__slider {
position: relative;
height: 520px;
touch-action: pan-y;
}
.prod-products__stage {
position: relative;
width: 100%;
height: 100%;
perspective: 1200px;
}
.prod-products__card {
position: absolute;
left: 50%;
top: 50%;
width: 280px;
height: 390px;
padding: 22px;
border: 1px solid rgba(191, 164, 106, 0.22);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018)),
rgba(12, 12, 12, 0.82);
box-shadow:
0 34px 100px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255,255,255,0.06);
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.75s ease,
filter 0.75s ease;
}
.prod-products__card img {
width: 100%;
height: 260px;
object-fit: contain;
}
.prod-products__card h3 {
margin: 22px 0 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 30px;
font-weight: 500;
line-height: 1;
color: #f7f4ee;
}
.prod-products__card.is-active {
z-index: 5;
opacity: 1;
transform: translate(-50%, -50%) scale(1.12);
filter: none;
pointer-events: auto;
}
.prod-products__card.is-prev {
z-index: 4;
opacity: 0.72;
transform: translate(-118%, -50%) scale(0.88) rotateY(18deg);
filter: brightness(0.65);
}
.prod-products__card.is-next {
z-index: 4;
opacity: 0.72;
transform: translate(18%, -50%) scale(0.88) rotateY(-18deg);
filter: brightness(0.65);
}
.prod-products__card.is-far-prev {
z-index: 3;
opacity: 0.38;
transform: translate(-188%, -50%) scale(0.72) rotateY(24deg);
filter: brightness(0.45);
}
.prod-products__card.is-far-next {
z-index: 3;
opacity: 0.38;
transform: translate(88%, -50%) scale(0.72) rotateY(-24deg);
filter: brightness(0.45);
}
.prod-products__arrow {
position: absolute;
top: 50%;
z-index: 10;
width: 64px;
height: 64px;
border: 1px solid rgba(191, 164, 106, 0.42);
border-radius: 50%;
background: rgba(5, 5, 5, 0.72);
cursor: pointer;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
transition: 0.35s ease;
}
.prod-products__arrow::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: #d7c18a;
box-shadow:
0 0 18px rgba(191, 164, 106, 0.55),
0 0 38px rgba(191, 164, 106, 0.22);
transition: 0.35s ease;
}
.prod-products__arrow::after {
content: "";
position: absolute;
inset: 13px;
border: 1px solid rgba(191, 164, 106, 0.26);
border-radius: 50%;
transition: 0.35s ease;
}
.prod-products__arrow:hover {
border-color: rgba(215, 193, 138, 0.9);
box-shadow: 0 0 36px rgba(191, 164, 106, 0.18);
}
.prod-products__arrow:hover::before {
transform: scale(1.35);
background: #f5f2ec;
}
.prod-products__arrow:hover::after {
inset: 9px;
border-color: rgba(215, 193, 138, 0.5);
}
.prod-products__arrow--prev {
left: 40px;
}
.prod-products__arrow--next {
right: 40px;
}
@media (max-width: 768px) {
.prod-products {
padding: 90px 0 100px;
}
.prod-products__head {
width: calc(100% - 40px);
margin-bottom: 46px;
}
.prod-products__title {
font-size: 46px;
}
.prod-products__slider {
height: 440px;
}
.prod-products__card {
width: 220px;
height: 330px;
padding: 18px;
border-radius: 22px;
}
.prod-products__card img {
height: 210px;
}
.prod-products__card h3 {
font-size: 24px;
}
.prod-products__arrow {
display: none;
}
} .own-brands {
position: relative;
overflow: hidden;
padding: 130px 0 150px; }
.own-brands__container {
max-width: 1320px;
margin: 0 auto;
padding: 0 40px;
}
.own-brands__head {
max-width: 760px;
margin-bottom: 80px;
}
.own-brands__title {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 64px;
font-weight: 500;
line-height: 0.94;
letter-spacing: -0.055em;
}
.own-brands__title span {
display: block;
}
.own-brands__title span:first-child {
color: #f7f4ee;
}
.own-brands__title span:last-child {
color: #9b814d;
}
.own-brands__slider {
position: relative;
}
.own-brands__row {
position: relative;
display: flex;
justify-content: flex-start;
align-items: stretch;
gap: 28px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 8px 34px;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.own-brands__row::-webkit-scrollbar {
display: none;
}
.own-brands__card {
position: relative;
flex: 0 0 auto;
width: 200px;
height: 280px;
border: 1px solid rgba(191, 164, 106, 0.28);
border-radius: 20px;
overflow: hidden; }
.own-brands__pagination {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.own-brands__dot {
position: relative;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid rgba(191, 164, 106, 0.38);
border-radius: 50%;
background: rgba(5, 5, 5, 0.5);
cursor: pointer;
transition:
border-color 0.3s ease,
transform 0.3s ease,
background 0.3s ease;
}
.own-brands__dot::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(191, 164, 106, 0.55);
transform: translate(-50%, -50%);
transition:
width 0.3s ease,
height 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.own-brands__dot:hover {
border-color: rgba(215, 193, 138, 0.85);
transform: scale(1.08);
}
.own-brands__dot.is-active {
border-color: rgba(215, 193, 138, 0.95);
background: rgba(191, 164, 106, 0.08);
}
.own-brands__dot.is-active::before {
width: 8px;
height: 8px;
background: #d7c18a;
box-shadow:
0 0 10px rgba(215, 193, 138, 0.7),
0 0 24px rgba(191, 164, 106, 0.35);
}
@media (max-width: 560px) {
.own-brands__pagination {
gap: 9px;
margin-top: 14px;
}
.own-brands__dot {
width: 20px;
height: 20px;
}
}
.own-brands__row::before {
content: "";
position: absolute;
left: 50%;
bottom: 10px;
width: 780px;
max-width: 90%;
height: 140px;
transform: translateX(-50%);
background: radial-gradient(
ellipse at center,
rgba(191, 164, 106, 0.18),
rgba(191, 164, 106, 0.06) 42%,
transparent 72%
);
filter: blur(34px);
pointer-events: none;
}
.own-brands__card {
position: relative;
flex: 0 0 auto;
width: 200px;
height: 280px;
border: 1px solid rgba(191, 164, 106, 0.28);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
opacity: 0;
transform: translateY(40px);
transition:
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.7s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.own-brands.is-visible .own-brands__card {
padding:16px;
opacity: 1;
transform: translateY(0);
}
.own-brands.is-visible .own-brands__card:nth-child(1) { transition-delay: 0.05s; }
.own-brands.is-visible .own-brands__card:nth-child(2) { transition-delay: 0.13s; }
.own-brands.is-visible .own-brands__card:nth-child(3) { transition-delay: 0.21s; }
.own-brands.is-visible .own-brands__card:nth-child(4) { transition-delay: 0.29s; }
.own-brands.is-visible .own-brands__card:nth-child(5) { transition-delay: 0.37s; }
.own-brands.is-visible .own-brands__card:nth-child(6) { transition-delay: 0.45s; }
.own-brands__card-photo {
position: absolute;
inset: 8px;
z-index: 0;
width: calc(100% - 16px);
height: calc(100% - 16px);
object-fit: contain;
object-position: center;
}
.own-brands__card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 40%;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.7));
}
.own-brands__card-index {
position: absolute;
left: 14px;
top: 14px;
z-index: 2;
padding: 6px 11px;
border: 1px solid rgba(191, 164, 106, 0.35);
border-radius: 999px;
background: rgba(5, 5, 5, 0.45);
backdrop-filter: blur(3px);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(215, 193, 138, 0.9);
}
.own-brands__card-watermark {
position: absolute;
right: 16px;
bottom: 12px;
z-index: 2;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 56px;
font-weight: 500;
line-height: 1;
color: #f7f4ee;
text-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
pointer-events: none;
user-select: none;
}
.own-brands__card:hover {
transform: translateY(-10px);
border-color: rgba(215, 193, 138, 0.62);
box-shadow:
0 32px 90px rgba(0, 0, 0, 0.6),
0 0 60px rgba(191, 164, 106, 0.18);
}
@media (max-width: 1100px) {
.own-brands__row {
gap: 18px;
}
.own-brands__card {
width: 160px;
height: 230px;
}
.own-brands__card-watermark {
font-size: 44px;
}
}
@media (max-width: 900px) {
.own-brands {
padding: 90px 0 100px;
}
.own-brands__container {
padding-left: 24px;
padding-right: 24px;
}
.own-brands__title {
font-size: 48px;
}
.own-brands__row {
justify-content: flex-start;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 24px;
padding-left: 24px;
padding-right: 24px;
margin: 0 -24px;
scrollbar-width: none;
}
.own-brands__row::-webkit-scrollbar {
display: none;
}
.own-brands__card {
scroll-snap-align: center;
width: 180px;
height: 250px;
}
.own-brands__card:hover {
transform: none;
}
}
@media (max-width: 560px) {
.own-brands__container {
padding-left: 16px;
padding-right: 16px;
}
.own-brands__head {
margin-bottom: 46px;
}
.own-brands__title {
font-size: 40px;
}
.own-brands__row {
gap: 14px;
padding-left: 16px;
padding-right: 16px;
margin: 0 -16px;
scroll-padding-left: 16px;
}
.own-brands__card {
width: 168px;
height: 236px;
}
.own-brands__card-index {
left: 10px;
top: 10px;
font-size: 10px;
padding: 5px 9px;
}
.own-brands__card-watermark {
font-size: 40px;
}
} @media (max-width: 768px) {
.prod-hero__system-content {
width: 90%;
}
.prod-hero__system-content h2 {
font-size: 42px;
}
.prod-hero__system-line {
width: 220px;
}
.prod-hero__system-text {
font-size: 15px;
}
}