[section="product-details"] {
  display: grid;
  gap: var(--spacing-12);
}

[section="product-details"] .section-core {
    display: grid;
    gap: var(--spacing-12);
  }

:is([section="product-details"] .section-core) li {
      display: grid;
      gap: var(--spacing-12);
      grid-template-columns: auto 60%;
    }

:is(:is([section="product-details"] .section-core) li):first-child {
        grid-template-columns: 60% auto;
      }

:is(:is([section="product-details"] .section-core) li):first-child .media {
          order: -1;
        }

:is(:is([section="product-details"] .section-core) li) .content {
        padding: var(--spacing-64);
        border-radius: var(--radius-md);
        background-color: var(--color-surface-container-low);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

:is(:is(:is([section="product-details"] .section-core) li) .content) .title {
          font: var(--font-headline-md);
        }

:is(:is(:is([section="product-details"] .section-core) li) .content) .description {
          opacity: 0.8;
          text-wrap: balance;
        }

:is(:is([section="product-details"] .section-core) li) .media {
        height: 70vh;
        overflow: hidden;
        position: relative;
        border-radius: var(--radius-md);
        background-color: var(--color-surface-container);
      }

:is(:is(:is([section="product-details"] .section-core) li) .media) img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

:is(:is(:is([section="product-details"] .section-core) li) .media) > [ui-icon] {
          opacity: 0.3;
          position: absolute;
          translate: -50% -50%;
          left: 50%;
          inset-block-start: 50%;
        }

/* Responsive */
@media (max-width: 1280px) {
      :is([section="product-details"] .section-core) li {
        height: 35vh;
        grid-template-columns: repeat(2, 1fr) !important;
      }

        :is(:is([section="product-details"] .section-core) li) .content {
          padding: var(--spacing-48);
        }

          :is(:is(:is([section="product-details"] .section-core) li) .content) .title {
            margin-block-end: var(--spacing-16);
          }

        :is(:is([section="product-details"] .section-core) li) .media {
          height: 100%;
        }
}

@media (max-width: 1024px) {
      :is([section="product-details"] .section-core) li {
        height: auto;
        grid-template-columns: 1fr !important;
      }

        :is(:is([section="product-details"] .section-core) li) .content {
          padding: calc(var(--spacing-24) + var(--spacing-8));
        }

          :is(:is(:is([section="product-details"] .section-core) li) .content) .title {
            font: var(--font-title-lg);
          }

        :is(:is([section="product-details"] .section-core) li) .media {
          order: -1;
          height: 35vh;
        }
}