@media (max-width: 1070px) {
  .shoe {
    width: 135%;
  }
}

@media (max-width: 1000px) {
  .github-fork-ribbon {
    display: none;
  }
  .card {
    flex-direction: column;
    width: 100%;
    box-shadow: 0 0 35px 1px rgba(0, 0, 0, 0.2);
    & > div {
      width: 100%;
      box-shadow: none;
    }

    .shoe {
      width: 100%;
      transform: rotate(-5deg) translateY(-50%);
      top: 55%;
      right: 2%;
    }
    .nike {
      top: 20%;
      left: 5%;
    }
  }
}

@media (max-width: 600px) {
  .share {
    width: 40px;
    height: 40px;
    svg {
      font-size: 1rem;
    }
  }
  .logo {
    width: 70px;
  }
}

@media (max-width: 490px) {
  .card {
    .nike {
      font-size: 7rem;
    }
  }
  .info {
    padding: 20px;
    .big {
      font-size: 1.3rem !important;
    }
    .small {
      font-size: 1rem;
    }

    .new {
      padding: 2px 6px;
      font-size: 0.9rem;
    }

    .title {
      font-size: 0.9rem;
    }
    .text {
      font-size: 0.8rem;
    }
    .buy-price {
      .buy {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
      }
      .price {
        h1 {
          font-size: 1.5rem;
        }

        svg {
          font-size: 0.9rem;
        }
      }
    }

    .color-container {
      .colors {
        .color {
          margin: 0 20px;
          width: 20px;
          height: 20px;
          border-width: 4px;
        }
      }
    }
    .size-container {
      .sizes {
        .size {
          width: 30px;
          height: 30px;
          margin: 0 8px;
          font-size: 0.9rem;
          line-height: 30px;
        }
      }
    }
  }
  .share {
    width: 35px;
    height: 35px;
    top: 10px;
    right: 10px;
  }

  svg {
    font-size: 0.8rem;
  }
  .logo {
    width: 60px;
    top: 10px;
    left: 10px;
  }
}

@media (max-width: 400px) {
  .buy svg {
    display: none;
  }
  .container {
    padding: 10px;
  }
}
@media (max-width: 340px) {
  .info {
    .color-container {
      .colors {
        display: flex;
        justify-content: space-around;
        .color {
          margin: 0;
        }
      }
    }
    .size-container {
      .sizes {
        display: flex;
        justify-content: space-around;
        .size {
          margin: 0;
        }
      }
    }
  }
}
