body {
    background-color: #E3A0AC;
}

.uc-width {
    max-width: 1920px;
}

.winx-background-gradient {
    background-color: #FDDCE8;
     background-image: url('https://static.tildacdn.com/tild3963-6431-4532-b463-326336313731/Frame_110.svg');
  background-repeat: repeat;
  background-position: center center;
  background-size: 150% auto;
}

.collection-page__wrapper a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  align-items: unset;
  width: 30%;
  padding-bottom: 3%;
}

.collection-page__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  gap: 4%;
  padding-top: 4vw;
  padding-bottom: 8vw;

}

.trix-wrapper {
  background-color: #5859A6;
  background-image: url('https://static.tildacdn.com/tild3431-6665-4432-b330-323362636134/trix_back.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
    
}

.collection-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  align-items: center;
  max-width: 25%;
  
}

.collaborations-page {
    display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  align-items: center;
  max-width: 100%;
}

.collection-page img {
  margin: auto;
  max-width: 100%;
  
}

.collection-page img:first-of-type {
  box-shadow: 0 0 0 1px black;
}

.collection-page img:nth-of-type(2) {
    position: absolute;
}


.collection-page p {
    color: black;
}

.collection-page-prestige img {
  text-align: center;
}


.image-shadow-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.image-shadow-wrapper::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 100%;
  height: 100%;
  background: currentColor;
  border: 1px solid black;
  z-index: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.box-shadow {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.shadow-square {
  position: relative;
  display: inline-block;
  width: 100%;
  
}

.shadow-square::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100%;
  height: 100%;
  background: currentColor;
  border: 1px solid black;
  z-index: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.shadow-square img {
      position: relative;
  display: block;
  z-index: 1;
}

.image-shadow-wrapper img {
  position: relative;
  display: block;
  z-index: 1;
}

.image-shadow-wrapper img:nth-of-type(2) {
  position: absolute;
  width: 50%;
  bottom: 0;
  right: 0;
  transform: translate(35%, 30%)
}

/* Цвета для разных блоков */
.shadow-stormy::before {
  color: #C0386A; 
}

.shadow-icy::before {
  color: #0079AC; 
}

.shadow-darcy::before {
  color: #73217A; 
}

.shadow-bloom::before {
  color: #9ADAEE; 
}

.shadow-stella::before {
  color: #FFC549; 
}

.shadow-flora::before {
  color: #FEB4CB; 
}

.shadow-tecna::before {
  color: #DFCAE8; 
}

.shadow-musa::before {
  color: #F3689C; 
}

.shadow-aisha::before {
  color: #C5D7AD; 
}

.shadow-purple {
    color: #C3B5D3;
}

.shadow-orange {
    color: #F4C0A4;
}

.shadow-blue {
    color: #A9D8E8;
}

.shadow-green {
    color: #8ECACC;
}

.shadow-yellow {
    color: #F2EEAA;
}

.shadow-pink {
    color: #EC9BAD;
}

.winx-wrapper {
  background-color: #FFCFDF;
  background-image: url('https://static.tildacdn.com/tild6530-6466-4832-b066-353061363233/winx_back.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
    
}

.winx-wrapper-small {
    padding-bottom: 2vw;
    
}

.winx-banner {
    width: 100%;
    display: block;
}

.winx-banner-mob {
    display: none;
}


.frame23 {
  padding: 20px;
  background: linear-gradient(180deg, #FFC1E2 35%, #C3E2A7 100%);
  font-family: 'GTEstiProdisplay',Arial,sans-serif;
}

.winx-banner-green::before {
    color: #C3E2A7;
}

.trix-banner-pink::before {
    color: #65DEF8;
}

.trix-frame {
  background: linear-gradient(180deg, #93CBDD 55%, #9AA4DA 100%);
}

.content {
  display: flex;
  gap: 2vw;
  justify-content: center;
  align-items: flex-start;
  margin: auto;
  padding: 4vw 2vw 2vw 2vw;
  flex-wrap: nowrap;
}

.left, .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.4vw;
  align-self: center;
}

.right img {
    border: 1px solid black;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.shadow-wrapper {
    padding: 0 2vw;
    flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5vw;
  align-self: center;
}



.shadow-wrapper img {
    border: 1px solid black;
}

.shadow-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid black;
}

.text-block {
  background: white;
  text-align: center;
  padding: 20px;
  font-size: clamp(14px, 1.5vw, 26px);
  line-height: 1.5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid black;
  margin: 0 0 0 1vw;
}

.right img {
  max-width: 100%;
  height: auto;
  display: block;
}

.collaborations {
    padding: 1% 10% 4% 10%;
    gap: 3%;
    p
}

.breads {
    font-family: 'GTEstiProdisplay',Arial,sans-serif;
    font-size: clamp(12px, 1.2vw, 16px);
    text-align: center;
    padding: 1% 0 1% 0;
    display: flex;
    justify-content: center;
    
}

.breads a {
    color: black !important;
}

.frame23__choose {
    position: absolute;
    width: 22%;
    z-index: 2;
}

.choose__winx {
  left: 0;
  transform: translate(35%, 0);
}

.choose__trix {
  right: 0;
  transform: translate(-23%, -2%);
}

.text__wrapper {
    background-color: white;
    box-shadow: 0 0 0 1px black;
    position: relative;
    z-index: 1;
}

.text__wrapper::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background: #e3a0ac;
  border: 1px solid black;
  z-index: 0;
}

.text__wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 25px;
    gap: 15px;
    z-index: 1;
}

.text__header__wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.text__header {
    -webkit-text-stroke: 1px #10151C; 
    text-stroke: 1px #10151C; 
    color: #E3A0AC;
    font-size: clamp(24px, 2vw, 36px);
    font-family: 'GTEstiProdisplay',Arial,sans-serif;
    font-weight: 500;
    text-transform: uppercase
}

.text__header__wrapper img {
    width: 50%;
}

.text__header__hash {
    color: black;
    font-family: 'GTEstiProdisplay',Arial,sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 1.5vw, 26px);
}

.text__main {
    display: flex;
    flex-direction: column;
    color: black;
    gap: 4px;
    font-size: clamp(14px, 1vw, 18px);
    font-family: 'GTEstiProdisplay',Arial,sans-serif;
    font-weight: 400;
}

.text__main span {
    font-weight: 700;
}

.header-shadow {
    text-shadow: 3px 3px 0px black;
    -webkit-text-stroke: 1px #10151C; 
         text-stroke: 1px #10151C; 
         color: #E3A0AC !important; 
}

@media (min-width: 2010px) {
    .choose__winx {
      transform: translate(35%, 30%);
    }
    
    .choose__trix {
      transform: translate(-23%, 37%);
    }
}

@media (max-width: 960px) {
    
    .frame23 {
        padding-bottom: 10vw;
        padding-top: 35px;
    }
    
    .winx-background-gradient {
      background-repeat: repeat;
      background-size: 800% auto;
    } 
    
  .content {
    flex-direction: column;
  }

  .right {
    order: -1;
  }

  .text-block {
    font-size: 16px;
    margin: 0;
  }
  
    
    .shadow-square::before {
      top: 15px;
      left: 15px;
    }
    
    .left, .right {
        gap: 8vw;
    }
    
    .content {
        gap: 6vw;
    }
    
    .shadow-wrapper {
        padding: 0 17px 0 0;
    }
   
    .winx-banner {
        display: none;
    }
    
    .winx-banner-mob {
        width: 100%;
    display: block;
    }
    
        .collection-page__wrapper {
        width: 100%;
        gap: unset;
        padding-top: 0;
        
    }
    
    .winx-wrapper, .trix-wrapper {
        padding-top: 10vw;
    }
    
    .collection-page {
        max-width: 80%;
        padding-bottom: 18%;
    }
    
    .image-shadow-wrapper img:nth-of-type(2) {
        transform: translate(20%, 25%);
    }
    
    .image-shadow-wrapper::before {
        top: 10px;
        left: 10px;
    }
    
    .collection-page__wrapper a {
        padding-bottom: 4%;
    }
    
    .collection-page__wrapper {
        width: 100vw;
        gap: unset;
    }
    
    .collection-page__wrapper a {
        width: 85%;
    }
    
    
    .collaborations {
        padding: 0 0 6% 0;
    }
    
    .collaborations-page {
        max-width: 100%;
        padding-bottom: 6%;
    }
    
    
    
    .frame23__choose {
        width: 55%;
    }
    
    .choose__winx {
      left: 0;
      transform: translate(20%, -32%);
    }
    
    .choose__trix {
      right: 0;
      transform: translate(-63%, -31%);
    }
    
}