/* Produkty */
.product-nav {
  margin-inline-start: .5rem;
  margin-block: 2rem;
}

.product-nav a {
  display: flex;
  gap: .5rem;
  transition: transform .25s ease;
}

@media (hover:hover) {
  .product-nav a:hover,
  .product-nav a:focus-visible  {
    transform: translateX(.5rem);
    font-weight: 700;
  }
}

.arrow {
  inline-size: 24px;
  aspect-ratio: 24px;
}

.bg:nth-child(odd) {
  background: linear-gradient(to right, white -100%, rgba(255, 0, 0, 0.395)100%);
}

.bg:nth-child(even) {
  margin-block: 1rem;
  background:linear-gradient(to left, white -100%,  var(--color-blue-pale) 100%);
}

.product {
  display: flex;
  padding-block: 0;
}

.bg:nth-child(even) .product {
  flex-direction: row-reverse;
}

.bg:nth-child(even) {
  inline-size: 95vw;
  margin-inline: auto;
  border-radius: 1.5rem;
}

figure {
  background: transparent;
}

.product-img {
  inline-size: 400px;
  margin-block-start: 5rem;
  border-radius: 1.5rem;
}

.gallery {
  transition: opacity .4s ease;
}

section.product > article {
  display: grid;
  gap: 1rem;
  padding-block: 1rem;
  padding-inline-start: 3rem;
}


.bg:nth-child(even) article {
  padding-inline-start: 0;
  padding-inline-end: 3rem;
}

article a {
  text-decoration: underline;
}



article li {
  list-style: circle;
  margin-inline-start: 1rem;
}

table {
  margin-block-start: .5rem;
  border-block-start: 1px solid black;
}

th,td {
  padding: .5rem;
  vertical-align: top;
}

th {
  text-align: right;
}

thead th {
  text-align: left;
}

@media screen and (width < 950px) {
  section.product {
    display: grid; 
  }

  figure > .gallery {
    aspect-ratio: 1;
    object-fit: cover;
  } 

  .product-img {
    margin-block-start: 1rem;
    margin-inline: auto;
  }

  section.product > article {
  padding-inline: 1rem;
}

  .bg:nth-child(even) {
    inline-size: 100%;
    margin-block: 0;
    border-radius: 0;
  }

  .bg:nth-child(even) article {
    padding-inline-start: 1rem;
  }
}

@media screen and (width < 950px) {
  .product-img {
    inline-size: 290px;
  }
}