/* Mobile Media Query */
@media (max-width: 768px) {
    .product-section {
      padding: 40px 40px 20px;
      height: auto;
    }
  
    .product-content-container {
      gap: clamp(10px, 2.5vw, 300px);
    }
    
    .product-image {
      width: clamp(0px, 70vw, 300px);
      height: clamp(0px, 70vw, 300px);
    }
    
    .product-details-container {
      text-align: center;
      gap: clamp(4px, 1.5vw, 40px);
    }
    
    .product-title {
      font-size: 48px;
    }
    
    .product-artist {
      font-size: 24px;
      line-height: 1;
    }
    
    .release-date {
      font-size: 16px;
    }
    
    .price-and-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .product-price{
        justify-self: center;
        text-align: center;
    }
    
    .product-buy-button {
        justify-self: center;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 15px;
    }
    
    .track-list h3 {
      font-size: 24px;
      text-align: center;
    }
    
    .track-list ol {
      font-size: 17px;
      text-align: center;
      margin-bottom: 6px;
    }
    
    .pressing-info h3 {
      font-size: 18px;
      text-align: center;
    }
    
    .pressing-info p {
      font-size: 13px;
      text-align: center;
    }
    
    .wide-separator {
      display: none;
    }
  
    .description-section {
      font-size: 17px;
      line-height: 1.8;
      align-self: center;
      padding: 50px 40px;
    }

    .related-merch-section {
      padding: 0 4px 100px;
    }
  
    .store-section {
      padding: 0 8vw;
      margin-bottom: 50px;
    }
  
    .store-heading {
      font-size: 42px;
      align-self: center;
    }
  
    .store-grid {
      grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
      gap: clamp(1px, 9vw, 30px);
    }
  
    .merch-block:hover .default-image {
      opacity: 1;
    }
  
    .merch-block:hover .hover-image {
      opacity: 0;
    }
  
    .merch-block .default-image {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
  
    .merch-block .hover-image {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
  
    .merch-block.scrolled .default-image {
        opacity: 0;
    }
  
    .merch-block.scrolled .hover-image {
        opacity: 1;
    }
  
    .merch-block-names-container {
      padding: 4px;
    }
    
    .merch-block-artist-name {
      font-size: 18px;
      margin-bottom: 4px;
    }
    
    .merch-block-product-name {
      font-size: 11px;
    }
  
    .merch-block-price {
      font-size: 30px;
    }
}