/* Add custom CSS styles below */ 
@media (min-width: 768px) {

  .container--product-details {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "product-description product-gallery"
      "product-purchase product-gallery";
    gap: 30px !important;
    align-items: start !important;
    direction: ltr;
  }

  .container--product-details > .s-block.w-full.overflow-hidden {
    grid-area: product-gallery !important;
    width: 100% !important;
    margin: 0 !important;
    direction: rtl;
    border-radius: 16px;
    overflow: hidden;
  }

  .container--product-details > form.product-form,
  .container--product-details > form.product-form > .s-block.main-content,
  .container--product-details > form.product-form > .s-block.main-content > .grid {
    display: contents !important;
  }

  .container--product-details .main-content-data {
    grid-area: product-description !important;
    width: 100% !important;
    min-width: 0 !important;
    direction: rtl;
  }

  .container--product-details
  .main-content-data + [class*="sticky"] {
    grid-area: product-purchase !important;
    width: 100% !important;
    position: static !important;
    top: auto !important;
    direction: rtl;
  }

  .container--product-details .details-slider-wrapper {
    width: 100% !important;
    height: 560px !important;
  }

  .container--product-details
  form.product-form
  .s-block.main-content > :not(.grid) {
    grid-column: 1 / -1 !important;
    direction: rtl;
  }
}