.product-features {

  .product-features__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-l);

    .details__item {
      display: flex;
      flex-direction: column;
      gap: var(--gap);

      &:not(.details-summary):not(:last-of-type) {
        padding-bottom: var(--gap-xl);
      }

      p {
        line-height: var(--line-height--tall);

        &:not(:last-of-type) {
          padding-bottom: var(--gap-s);
        }
      }

      .details-rating__topic {
        border-top: var(--border--light);
        padding: var(--gap-s) 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap);

        h3 {
          font-family: var(--font-base--family);
          font-size: var(--font-14);
        }

        span {
          font-size: var(--font-12);
          color: var(--smoke)
        }

        svg {
          width: .9rem;
          height: auto;
          opacity: .88;

          &.star {
            opacity: .56;
          }
        }
      }

      &.details-includes {
        border: var(--border--light);
        background-color: var(--cloud);
        padding: var(--gap-s) var(--gap);
        margin-top: calc(var(--gap-s) * -1);

        svg {
          width: .8rem;
          height: auto;
        }

        div {
          display: flex;
          align-items: center;
          gap: var(--gap-xs);
        }

        ul {
          display: flex;
          flex-direction: column;
          gap: var(--gap-xs);

          li {
            display: flex;
            align-items: center;
            gap: var(--gap-xs);
            font-size: var(--font-16);

            svg {
              color: var(--ink);
              height: .56rem;
            }
          }
        }
      }
    }
  }

  &.template--product {
    .product-features__details {
      grid-template-columns: 1fr;

      .details-summary {
        display: none;
      }

      & > div:not(.details-summary) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-l);
        
        .details__item:not(:last-of-type) {
          padding-bottom: 0;
        }
      }
    }
  }

  .product-features__gallery {

    .gallery-carousel {
      display: grid;
      grid-template-columns: repeat(var(--size), 1fr);
      gap: var(--gap-l);

      img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: calc(2.4 / var(--size));
        object-fit: cover;
      }
    }

    & + .product-features__specifications {
      border-top: 0;
    }
  }

  .product-features__specifications {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);

    & > div {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap-l);

      article {
        display: grid;
        grid-template-areas: 'icon title' 'icon details';
        grid-template-columns: 2.5rem 1fr;
        gap: var(--gap-xs) var(--gap-s);

        svg {
          grid-area: icon;
          width: 2.5rem;
          height: 2.5rem;
          background-color: var(--cloud);
          padding: .4rem;
        }
        
        h3 {
          grid-area: title;
          font-size: var(--font-18);
          color: var(--color-primary);
        }

        p {
          grid-area: details;
          font-size: var(--font-14);
          color: var(--ink);
          line-height: var(--line-height--tall);
        }
      }
    }
  }
}

@media only screen and (max-width: 989px) {
  .product-features {
    .product-features__details {
      grid-template-columns: 1fr;
    }

    &.template--product .product-features__details > div:not(.details-summary) {
      grid-template-columns: 1fr;

      .details-includes {
        margin-top: 0;
      }
    }

    .product-features__gallery {
      position: relative;
      width: 100%;
      overflow: hidden;

      .gallery-carousel {
        display: flex;
        gap: var(--gap-l);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: var(--gap-s) 0;
        scrollbar-width: none;
        overflow: auto;

        &::-webkit-scrollbar { 
          display: none;
        }

        &::scroll-button(inline-start),
        &::scroll-button(inline-end) {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          background-color: var(--ink);
          color: white;
          border: none;
          cursor: pointer;
          font-size: var(--font-20);
          transition: var(--transition-all);
          position: absolute;
          top: 50%;
          translate: 0 -50%;
          z-index: 10;
          box-shadow: 0 .25rem .75rem var(--smoke);
        }

        &::scroll-button(inline-start):hover,
        &::scroll-button(inline-end):hover {
          background-color: var(--color-primary);
          transform: scale(1.05);
        }

        &::scroll-button(inline-start):disabled,
        &::scroll-button(inline-end):disabled {
          opacity: .4;
          pointer-events: none;
        }
        
        &::scroll-button(inline-start) {
          content: "←";
          left: var(--gap-xs);
        }
        
        &::scroll-button(inline-end) {
          content: "→";
          right: var(--gap-xs);
        }
      }
    }

    .product-features__specifications {
      & > div {
        grid-template-columns: 1fr;
      }
    }
  }
}