section.ss_mycollection {
  margin: 10rem 0px;
}

.ss_mycollection h2 {
  margin: 2.5rem 0;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.collection-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collection-grid .collection-item {
  width: 274px;
  height: 274px;
  text-decoration: none;
  color: #232323;
  background-color: #ededed;
  border-radius: 10px;
  margin: 5px;
  transition: all 0.2s;
  overflow: hidden;
}

.collection-grid .collection-item:hover {
  transform: scale(1.05);
}

.collection-grid .collection-item span {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  position: relative;
  top: 20px;
  left: 15px;
}

.collection-grid .collection-item img {
  height: 100%;
}

@media screen and (max-width: 1080px) {
  .collection-grid .collection-item {
    width: 204px;
    height: 204px;
  }
}

@media screen and (max-width: 816px) {
  .collection-grid .collection-item {
    width: 184px;
    height: 184px;
  }

  .collection-grid .collection-item span {
    display: block;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 500px) {
  .collection-grid .collection-item {
    width: 144px;
    height: 144px;
  }

  .collection-grid .collection-item span {
    font-size: 1rem;
  }
}

@media screen and (max-width: 400px) {
  .collection-grid .collection-item {
    width: 124px;
    height: 124px;
  }

  .collection-grid .collection-item span {
    font-size: 0.9rem;
    top: 10px;
    left: 6px;
  }
}

@media screen and (max-width: 350px) {
  .collection-grid .collection-item {
    width: 104px;
    height: 104px;
  }
}