save

assets/css/gp-style-core.css

@@ -118,6 +118,11 @@ button{
   cursor: pointer;
 }
 
+.wrapper{
+  margin: 0 auto;
+
+  width: 1280px;
+}
 
 /* компоненты */
 
@@ -394,4 +399,134 @@ button{
 .form__button:hover{
   opacity: .8;
 }
-/* form */
+/* form */
+
+
+/* social media */
+.social-media{
+  display: flex;
+  align-items: center;
+}
+.social-media__item{
+  margin-left: 32px;
+}
+.social-media__item:first-child{
+  margin-left: 0px;
+}
+.social-media__icon{
+  width: 32px;
+  aspect-ratio: 1;
+}
+/* social media */
+
+
+/* product */
+.product{
+  margin: -24px;
+
+  width: 100%;
+
+  display: flex;
+  align-items: start;
+}
+.product__item{
+  margin: 24px;
+
+  width: calc(33.3% - 48px);
+
+  background-color: var(--background-grey);
+
+  border-radius: 24px;
+}
+.product__product-card{
+  height: 274px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.product__images{
+  height: 242px;
+  object-fit: contain;
+}
+.product__content-card{
+  padding: 15px;
+}
+.product__title{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+}
+.product__price{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 200%;
+  text-transform: uppercase;
+  color: var(--text-black);
+}
+.product__price::after{
+  content: '₽';
+}
+.product__bye{
+  margin-top: 8px;
+}
+/* product */
+
+/* compound */
+.compound{
+  margin: -5px;
+
+  display: flex;
+  align-items: start;
+}
+.compound__item{
+  margin: 5px;
+
+  padding: 4px 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+
+  border-radius: 16px;
+  background-color: var(--background-white);
+}
+.compound__item:first-child{
+  margin-left: 0;
+}
+/* compound */
+
+/* button */
+.button{
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  border-radius: 20px;
+}
+.button--white{
+  width: 100%;
+
+  padding: 12px;
+  
+  text-align: center;
+
+  background-color: var(--background-white);
+  border: 1px solid var(--background-black);
+
+  transition: opacity .2s ease-out;
+}
+.button--white:hover{
+  opacity: .8;
+}
+/* button */