@font-face {
  font-family: 'PlayfairDisplay-Regular';
  src: url('PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* диапазон весов для вариабельного шрифта */
  font-style: normal;
  font-display: swap;
}

/* Italic Variable (Playfair Display) */
@font-face {
  font-family: 'PlayfairDisplay-Italic';
  src: url('PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Inter Variable */
@font-face {
  font-family: 'Inter-Regular';
  src: url('InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.background,
.background * {
  box-sizing: border-box;
}
.background {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0cqw;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.text-01 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 5.333cqw;
  font-weight: 400;
  position: relative;
  transform: translateY(-40%);

  margin-top: 4.8cqw;
  
}
._250-c-8-c-2-bd-995-ec-33-e-5734-eeb-5-b-6-a-53-c-3837-f-15-e-3-f-361-de-2-d-9-bbc-4375140-c-1-f-30-photoroom-1 {
  flex-shrink: 0;
  width: 34.533cqw;
  height: 24cqw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 92/90;
  margin-top: 32.533cqw;
  
  
}
.text-02 {
  color: #000000;
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 4.267cqw;
  line-height: 5.867cqw;
  font-weight: 400;
  position: relative;
  width: 81.6cqw;
  height: 17.333cqw;
  margin-top: 4cqw;
  
}
.text-02-span {
  font-family: "PlayfairDisplay-Regular", sans-serif;
}
.text-02-span2 {
  font-family: "Inter-Regular", sans-serif;
  font-weight: 300;
}
.text-03 {
  color: #000000;
  text-align: center;
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 4.267cqw;
  line-height: 5.867cqw;
  font-weight: 500;
  position: relative;
  width: 77.867cqw;
  margin-top: 9.6cqw;
  
}
.overlay-blur {
  display: flex;
  flex-direction: column;
  gap: 2.667cqw;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 61.333cqw;
  position: relative;
  backdrop-filter: blur(3.067cqw);
  margin-top: 9.6cqw;
  
}
.link {
  background: #000000;
  border-style: solid;
  border-color: #000000;
  border-width: 0.267cqw;
  align-self: stretch;
  flex-shrink: 0;
  height: 14.667cqw;
  position: relative;
  overflow: hidden;
}
.text-04 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.733cqw;
  line-height: 5.787cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 17.352cqw;
  height: 4.533cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-05 {
  color: #000000;
  text-align: center;
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 5.333cqw;
  font-weight: 400;
  position: relative;
  margin-top: 14.133cqw;
  text-wrap: nowrap;
  
}
.text-06 {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.733cqw;
  font-weight: 200;
  position: relative;
  margin-top: 5.867cqw;
    text-wrap: nowrap;

  
}
.text-07 {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 5.333cqw;
  font-weight: 400;
  position: relative;
  margin-top: 11.467cqw;
  
}
.frame-37 {
  background: #f9f9f9;
  padding: 5.867cqw;
  flex-shrink: 0;
  display: grid;
  gap: 9.6cqw;
  row-gap: 10.133cqw;
  position: relative;
  overflow: hidden;
  grid-template-columns: repeat(2, fit-content(100%));
  grid-template-rows: fit-content(100%);
  margin-top: 5.867cqw;
  
}
.img-2923-1 {
  width: 40cqw;
  aspect-ratio: 572/910;
  position: relative;
  object-fit: cover;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.f-0-c-6-bf-84-a-73-e-3-afe-8-a-5218650-d-22-aab-4-1 {
  width: 40cqw;
  aspect-ratio: 572/910;
  position: relative;
  object-fit: cover;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.frame-58 {
  display: flex;
  flex-direction: column;
  gap: 2.667cqw;
  align-items: center;
  justify-content: center;
  width: 40cqw;
  height: 57.867cqw;
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.text-08 {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4.267cqw;
  font-weight: 200;
  position: relative;
  align-self: stretch;
  height: 5.333cqw;
}
.text-09 {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4.267cqw;
  font-weight: 200;
  position: relative;
  align-self: stretch;
  height: 5.333cqw;
}
.img-2924-1 {
  width: 40cqw;
  aspect-ratio: 572/910;
  position: relative;
  object-fit: cover;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
.text-10 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.733cqw;
  line-height: 5.787cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 17.352cqw;
  height: 4.533cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-38 {
  background: #f9f9f9;
  padding: 5.867cqw;
  flex-shrink: 0;
  display: grid;
  gap: 9.6cqw;
  row-gap: 10.133cqw;
  position: relative;
  overflow: hidden;
  grid-template-columns: repeat(2, fit-content(100%));
  grid-template-rows: fit-content(100%) 57.867cqw;
}
.text-11 {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4.267cqw;
  font-weight: 200;
  position: relative;
  align-self: stretch;
  height: 5.333cqw;
}
.text-12 {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4.267cqw;
  font-weight: 200;
  position: relative;
  align-self: stretch;
  height: 5.333cqw;
}
.text-13 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.733cqw;
  line-height: 5.787cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 17.352cqw;
  height: 4.533cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay-blur2 {
  display: flex;
  flex-direction: column;
  gap: 2.667cqw;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 86.933cqw;
  position: relative;
  backdrop-filter: blur(3.067cqw);
  margin-top: 6.4cqw;
  
}
.text-14 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.733cqw;
  line-height: 5.787cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 42.667cqw;
  height: 4.533cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-15 {
  color: #000000;
  text-align: center;
  font-family: "-", sans-serif;
  font-size: 6.667cqw;
  line-height: 10.4cqw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 21.6cqw;
  
}
.text-15-span {
  font-family: "PlayfairDisplay-Regular", sans-serif;
}
.text-15-span2 {
  font-family: "PlayfairDisplay-Italic", sans-serif;
  font-style: italic;
}
._02773-eadeb-27-b-06-b-7-b-8-a-3292-d-24-a-1-a-3-f-1 {
  flex-shrink: 0;
  width: 94.133cqw;
  height: 116.533cqw;
  position: relative;
  object-fit: cover;
  aspect-ratio: 353/437;
  margin-top: 7.2cqw;
  
}
.text-16 {
  color: #000000;
  text-align: left;
  font-family: "-", sans-serif;
  font-size: 3.733cqw;
  line-height: 5.333cqw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-self: start ;
  left: 5cqw;
  
  justify-content: flex-start;
  margin-top: -100cqw;
  
}
.text-16-span {
  font-family: "PlayfairDisplay-Regular", sans-serif;
}
.text-16-span2 {
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-weight: 900;
}
.text-17 {
  color: #4b4b4b;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.2cqw;
  line-height: 4.48cqw;
  letter-spacing: -0.053cqw;
  font-weight: 400;
  position: relative;
  width: 84.267cqw;
  height: 25.067cqw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 100cqw;
    align-self: start ;
  left: 5cqw;

  
}
.line-44 {
  width: 68.8cqw;
  height: 0.267cqw;
  background-color: rgba(68, 68, 68, 0.7);
  margin-top: 5.867cqw;
  
}
.text-18 {
  color: #000000;
  text-align: left;
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 4.8cqw;
  line-height: 6.72cqw;
  letter-spacing: -0.053cqw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  width: 79.733cqw;
  height: 8cqw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5.867cqw;
    align-self: start ;
  left: 5cqw;

  
}
.text-19 {
  color: #4b4b4b;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.2cqw;
  line-height: 4.48cqw;
  letter-spacing: -0.053cqw;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4cqw;
    align-self: start ;
  left: 5cqw;

  
}
.text-20 {
  color: #000000;
  text-align: left;
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 4.8cqw;
  line-height: 6.72cqw;
  letter-spacing: -0.053cqw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  width: 79.733cqw;
  height: 8cqw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 5.867cqw;
    align-self: start ;
  left: 5cqw;

  
}
.text-21 {
  color: #4b4b4b;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.2cqw;
  line-height: 4.48cqw;
  letter-spacing: -0.053cqw;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4cqw;
    align-self: start ;
  left: 5cqw;

  
}
.text-22 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.733cqw;
  line-height: 5.787cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 26.667cqw;
  height: 4.533cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-23 {
  color: #000000;
  text-align: left;
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 6.667cqw;
  line-height: 10.4cqw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 22.933cqw;
    align-self: start ;
  left: 5cqw;

  
}
.text-24 {
  color: #000000;
  text-align: right;
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 6.667cqw;
  line-height: 10.4cqw;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: end ;
  right: 5cqw;
}
.img {
  background: linear-gradient(to left, #dadada, #dadada);
  border-radius: 800cqw;
  flex-shrink: 0;
  width: 14.624cqw;
  height: 14.624cqw;
  position: relative;
  object-fit: cover;
  margin-left: -3cqw;
  
}
.text-25 {
  color: #000000;
  text-align: center;
  font-family: "PlayfairDisplay-Italic", sans-serif;
  font-size: 6.667cqw;
  line-height: 10.4cqw;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8.533cqw;
  
}
.text-26 {
  color: #4b4b4b;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.2cqw;
  line-height: 4.48cqw;
  letter-spacing: -0.053cqw;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 8.533cqw;
  align-self: start;
  left: 5cqw;
  
}
.link2 {
  background: #000000;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0);
  border-width: 0.267cqw;
  padding: 4.8cqw 14.4cqw 4.8cqw 14.4cqw;
  display: flex;
  flex-direction: row;
  gap: 2.667cqw;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  margin-top: 9.6cqw;
  
}
.text-27 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.2cqw;
  line-height: 4.96cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-28 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 5.333cqw;
  font-weight: 400;
  position: relative;
}
.frame-61 {
  display: flex;
  flex-direction: row;
  gap: 14.933cqw;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  margin-top: 7.2cqw;
  
}
.frame-60 {
  display: flex;
  flex-direction: column;
  gap: 3.467cqw;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 32cqw;
  position: relative;
}
.text-29 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-30 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-31 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-32 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-33 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-59 {
  display: flex;
  flex-direction: column;
  gap: 3.467cqw;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 19.2cqw;
  position: relative;
}
.text-34 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-35 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-36 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4cqw;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.text-37 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 5.333cqw;
  font-weight: 400;
  position: relative;
  margin-top: 7.2cqw;
  
}
.text-38 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 5.333cqw;
  font-weight: 400;
  position: relative;
  margin-top: 1.6cqw;
  
}
.text-39 {
  color: #a2a2a2;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 2.667cqw;
  line-height: 4.8cqw;
  letter-spacing: -0.053cqw;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6.133cqw;
  
}


/* ====================== HEADER ====================== */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  container-type: inline-size;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.2cqw 4cqw;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2.667cqw);
  -webkit-backdrop-filter: blur(2.667cqw);
  transition: transform 0.35s ease, opacity 0.35s ease;
  box-sizing: border-box;
}
.header--hidden {
  transform: translateX(-50%) translateY(-110%);
  opacity: 0;
}

.header-logo {
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 4cqw;
  letter-spacing: 0.05em;
  color: #000;
  text-align: center;
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.header-btn {
  width: 11.2cqw;
  height: 11.2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.2cqw;
  cursor: pointer;
  color: #000;
  border-radius: 50%;
  transition: background 0.2s ease;
  background: transparent;
}

.header-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

/* Бургер */
#burgerBtn span {
  display: block;
  width: 5.6cqw;
  height: 0.35cqw;
  background: #000;
  border-radius: 0.533cqw;
}

/* Иконка правой кнопки */
#modalBtn svg {
  width: 5.6cqw;
  height: 5.6cqw;
}

/* ====================== SIDE MENU ====================== */
.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1100;
}
.side-menu-overlay--open {
  opacity: 1;
  visibility: visible;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateX(-100%);
  width: 100%;
  max-width: 500px;
  height: 100vh;
  container-type: inline-size;
  background: #fff;
  z-index: 1200;
  padding: 6cqw 6cqw;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.side-menu--open {
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
}

.side-menu__close {
  display: flex;
  justify-content: flex-end;
}
.side-menu__close button {
  font-size: 5cqw;
  color: #000;
  cursor: pointer;
  padding: 2cqw;
  background: transparent;
}

.side-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 8.067cqw;
  margin: auto
}
.side-menu__nav a {
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.333cqw;
    font-weight: 500;
    text-align: center;

  color: #000;
}

/* ====================== MODAL ====================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1300;
}
.modal-overlay--open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: #fff;
  width: 100%;
  max-width: 500px;
  container-type: inline-size;
  height: 100%;
  padding: 0 3.467cqw;
  padding-bottom: 10.333cqw;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}


.modal-overlay--open .modal {
  transform: scale(1);
}

.modal__close {
  position: absolute;
  top: 3cqw;
  right: 3cqw;
  font-size: 5cqw;
  color: #000;
  cursor: pointer;
  padding: 2cqw;
  background: transparent;
}

.modal__content h3 {
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 5cqw;
  margin-bottom: 3cqw;
}
.modal__content p {
  font-family: "Inter-Regular", sans-serif;
  font-size: 3.7cqw;
  color: #4b4b4b;
}

/* ====================== SWIPER ====================== */
.swiper {
  width: 100%;
  margin-top: 39.2cqw;
  padding-bottom: 12cqw; /* место под пагинацию */
  overflow: hidden;
}

.swiper-wrapper {
  /* Никаких 600% — высота подстраивается автоматически */
  align-items: flex-start;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;         /* центрирует по горизонтали */
  justify-content: flex-start;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  text-align: center;          /* на всякий — для текста внутри */
  height: auto !important;
}



/* Картинка на слайде: 374px при экране 390px → 95.9cqw */
._5-d-59-d-221-d-332901-f-24-da-92251-d-49-d-37-c-1 {
  display: block;
  width: 90.9cqw;
  height: auto;
  margin: 0 auto;              /* ← центрирование */
}

/* ====================== ПАГИНАЦИЯ В ВИДЕ ПАЛОЧЕК ====================== */
.swiper-pagination {
  position: static !important;
  margin-top: 8cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5cqw;
  width: 100% !important;
  left: 0 !important;
  bottom: auto !important;
  transform: none !important;
}

.swiper-pagination-bullet {
  --swiper-pagination-bullet-width: 10cqw;
  --swiper-pagination-bullet-height: 0.8cqw;
  --swiper-pagination-bullet-inactive-color: #c4c4c4;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-border-radius: 0;

  width: 10cqw !important;
  height: 0.8cqw !important;
  border-radius: 0 !important;
  background: #c4c4c4 !important;
  opacity: 1 !important;
  margin: 0 !important;
  display: block;
}

.swiper-pagination-bullet-active {
  background: #000 !important;
  opacity: 1 !important;
}


.background {
  container-type: inline-size;
  container-name: site;
  max-width: 500px;
  margin: auto;
}