.product-image {
    max-height: 400px;
    object-fit: cover;
}

.thumbnail {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    object-fit: cover;
}
.thumbnail:hover, .thumbnail.active {
    opacity: 1;
}

.propage-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0 60px 0;
  position: relative;
}

.propage-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 40%);
  position: absolute;
  inset: 0;
}

.propage-title .container {
  position: relative;
}

.propage-title h1 {
  font-weight: 700;
}


.list-group-flush .list-group-item {
    border: none;
    position: relative;
}

.list-group-flush .list-group-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 60%;
    background-color: rgba(0, 0, 0, 0.125);
}

.list-group-item-action::before {
  color: #9b0000;
  font-family: "bootstrap-icons";
  font-weight: 900;
  opacity: 0;
  display: inline-block;
  transform: rotate(-90deg);
  transition: opacity linear 0.4s, transform cubic-bezier(0.5, 0, 0.5, 1) 0.5s;
}

.list-icon-desc::before{
  content: " \F431";
}
.list-icon-data::before{
  content: " \F38B";
}
.list-icon-guide::before{
  content: " \F4F7";
}
.list-icon-pinout::before{
  content: " \F2D6";
}
.list-icon-schematic::before{
  content: " \F2EE";
}
.list-icon-github::before{
  content: " \F3ED";
}
.list-group-item-action:hover::before {
  transform: rotate(0deg);
  opacity: 1;
}

.product-pinouts .preview-link {
   cursor: pointer;
}

.w-4 {
  vertical-align: baseline;
}

.product-details .product-image img { transition: opacity 0.5s; }