.container {
  /* main style */
  & main {
    width: 100%;
    overflow: hidden;
    padding: 0 calc(var(--padding) * 4);
    :where(.introdaction, .about, .products) {
      width: 100%;
      display: flex;
      margin-top: calc(var(--margin) * 8);
      gap: calc(var(--margin) * 1.5);
    }

    .right-side,
    .left-side {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(var(--margin) * 2);
      color: var(--text-color);
    }
    .right-side {
      h1 {
        font-size: calc(var(--font-size) * 2.5);
      }
      p {
        text-align: justify;
        line-height: 25px;
      }
      .social-media {
        display: flex;
        gap: var(--margin);
        align-items: center;
        margin: 0 var(--margin);
        a {
          color: var(--text-color);
          text-decoration: none;
          font-size: calc(var(--font-size) * 1.5);
          transition: all 0.3s;
          &:hover {
            transform: translateY(-7px) scale(1.1);
            -webkit-transform: translateY(-7px) scale(1.1);
            -moz-transform: translateY(-7px) scale(1.1);
            -ms-transform: translateY(-7px) scale(1.1);
            -o-transform: translateY(-7px) scale(1.1);
          }
        }
      }
    }

    .left-side {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .display-product img {
        height: 400px;
        width: 400px;
        min-width: 200px;
        object-fit: fill;
      }

      .list-products {
        display: flex;
        flex-direction: column;
        gap: var(--margin);
        justify-content: center;
        flex-wrap: wrap;
        .item-product {
          width: 60px;
          height: 60px;
          img {
            width: inherit;
            height: inherit;
            object-fit: fill;
            cursor: pointer;
          }
        }
        .item-product-activ {
          border: 2px solid var(--primary-color);
          border-radius: var(--raudis);
          -webkit-border-radius: var(--raudis);
          -moz-border-radius: var(--raudis);
          -ms-border-radius: var(--raudis);
          -o-border-radius: var(--raudis);
        }
      }
    }

    section.products .header-products {
      display: flex;
      justify-content: space-between;
      width: 100%;
      & a {
        text-decoration: none;
        color: #4293c9;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;

        &:hover {
          color: #295c7ee7;
          text-decoration: underline;
        }
      }
    }
  }
}

@media screen and (max-width: 980px) {
  .container {
    & header,
    & main {
      padding: 0 var(--padding);
    }
    & main .left-side {
      flex-direction: column !important;
      .list-products {
        flex-direction: row !important;
      }
    }
  }
}

@media screen and (max-width: 700px) {
  .container {
    & main :where(.introdaction, .about) {
      flex-direction: column !important;
      height: unset;
    }
    & main .left-side,
    & main .right-side {
      width: 100% !important;
    }
  }
  .display-product.js-display-product img {
    width: 90% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 300px) {
  .container {
    main {
      .about {
        .left-side .logo {
          width: 100%;
          height: 100%;
          img {
            width: inherit;
            height: inherit;
          }
        }
      }
    }
  }
}