/* Exact same as necklaces.css and earrings.css */

.active-collection {
  background-color: var(--earth-sand2);
}

.collection-row a {
  cursor: pointer;
}

.collection-text {
  font-family: "DM-Serif", serif;
}

.main-header {
  font-family: "Glorify", sans-serif;
  font-weight: 400;
}

.header {
  font-family: "Glorify", sans-serif;
  font-weight: 200;
}

.button:not(.active-collection) {
  background-color: rgba(214, 213, 210, 0.497);
}

.button:hover {
  background-color: var(--button-hover-color);
  transition: background-color 0.5s ease;
}

.img-container {
  position: relative;
}

.img-container::after {
  content: "";
  float: left;
  padding-bottom: 100%;
}

.img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product p {
  font-weight: 500;
}

.page-item {
  position: relative;
}

.page-item::after {
  content: "";
  float: left;
  padding-bottom: 100%;
}

.page-link {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-item {
  width: 38px;
  height: 38px;
}

.page-link {
  border: none;
}

.page-link:not(.active-pagination),
.page-link:not(.active-pagination):hover {
  background: none;
  color: var(--bs-dark);
}

.page-link:focus {
  box-shadow: none;
}

.active-pagination,
.active-pagination:hover {
  background-color: var(--bs-dark);
  color: var(--bs-light);
}

.page-item.disabled > .page-link {
  color: gray;
  background: none;
}

/* XXL screen sizes */
@media (min-width: 1400px) {
  .col-5ths {
    width: calc((100% / 4 - 1rem + 1rem / 4)) !important;
  }
}

/* XL screen sizes */
@media (max-width: 1399px) {
  .col-5ths {
    width: calc((100% / 4) - 1rem + (1rem / 4)) !important;
  }
}

/* Large screen sizes */
@media (max-width: 1199px) {
  .col-5ths {
    width: calc((100% / 4) - 1rem + (1rem / 4)) !important;
  }
}

/* Medium screen sizes */
@media (max-width: 991px) {
  .col-5ths {
    width: calc((100% / 3) - 1rem + (1rem / 3)) !important;
  }
}

/* small screen sizes */
@media (max-width: 767px) {
  .col-5ths {
    width: calc((100% / 2) - 0.5rem + (0.5rem / 2)) !important;
  }

  .collection-text {
    font-size: 13px;
  }
}

/* Target extra small screens and above (Bootstrap "xs" breakpoint, all screens) */
@media (max-width: 575px) {
}