.jewelryStore_4th_section {
 position: relative;
 font-family: 'irsans', sans-serif;
}

.jewelryStore_4th_section > .title {
 width: 100%;
 font-size: 40px;
 color: var(--title_color);
 text-align: center;

 @media screen and (max-width: 950px) {
     font-size: 28px;
 } 
}

.jewelryStore_4th_section > .about {
 display: block;
 width: 80%;
 max-width: 400px;
 text-align: center;
 font-size: 22px;
 margin: 0 auto;
 margin-top: 20px;

 @media screen and (max-width: 950px) {
     font-size: 18px;
 } 
}

.jewelryStore_4th_section > .itemContainer {
 display: grid;
 width: 100%;
 margin-top: 60px;
 grid-template-columns: repeat(2, 1fr);
 padding: 0 50px;
 -moz-column-gap: 30px;
      column-gap: 30px;
 row-gap: 50px;
 justify-items: center;
 justify-content: space-evenly;

 @media screen and (max-width: 750px) {
     display: flex;
     flex-direction: row;
     overflow-x: auto;
     -moz-column-gap: 50px;
          column-gap: 50px;
     padding-bottom: 10px;
     margin-top: 30px;
 }
}

.jewelryStore_4th_section > .itemContainer > .item {
 display: flex;
 width: 300px;
 height: -webkit-fit-content;
 height: -moz-fit-content;
 height: fit-content;
 flex-direction: column;
 align-items: center;
 direction: rtl;
 gap: 12px;

 @media screen and (max-width: 750px) {
     width: 200px;
 }
}

.jewelryStore_4th_section > .itemContainer > .item > .image {
 display: block;
 width: 300px;
 height: 300px;
 border-radius: 8px;

 @media screen and (max-width: 750px) {
     width: 200px;
     height: 200px;
 } 
}

.jewelryStore_4th_section > .itemContainer > .item > .title {
 font-size: 18px;
 color: var(--title_color);
 margin-top: 3px;
 text-align: center;

 @media screen and (max-width: 750px) {
     font-size: 16px;
 }
}

.jewelryStore_4th_section > .itemContainer > .item > .IO {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 20px;
}

.jewelryStore_4th_section > .itemContainer > .item > .IO > .line {
 display: inline-block;
 width: 2px;
 height: 50px;
 background-color: var(--primary_color);
}

.jewelryStore_4th_section > .itemContainer > .item > .IO > .price {
 font-size: 18px;

 @media screen and (max-width: 750px) {
     font-size: 14px;
 }
}

.jewelryStore_4th_section > .itemContainer > .item > .IO > .buyButton {
 position: relative;
 border: none;
 outline: none;
 background-color: transparent;
 font-size: 18px;
 color: #000000;
 padding: 10px 20px;
 transform: scale(1);
 transition: transform 0.2s ease;

 @media screen and (max-width: 750px) {
     font-size: 14px;
 } 
}

.jewelryStore_4th_section > .itemContainer > .item > .IO > .buyButton::before {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 background-color: var(--primary_color);
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: 8px;
 transform: scale(1.1);
 opacity: 0;
 transition: opacity 0.2s ease, transform 0.2s ease;
}
.jewelryStore_4th_section > .itemContainer > .item > .IO > .buyButton:hover::before {
 transform: scale(1);
 opacity: 1;
}
.jewelryStore_4th_section > .itemContainer > .item > .IO > .buyButton:active {
 transform: scale(0.9);
}