article.sf-brand-page {
  --section-container-width: calc(1200px + calc(var(--spacing-200) * 2));

  main:has(&) > .container-fluid {
    max-width: unset;
    padding: unset;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    max-inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    object-position: center;
  }

  /* Constrain width of parent container */
  .container-width-1200 {
    max-width: var(--section-container-width);
    padding-right: var(--spacing-200, 16px);
    padding-left: var(--spacing-200, 16px);
  }

  .container-width-1100 {
    max-width: calc(var(--section-container-width) - 100px);
    padding-right: var(--spacing-200, 16px);
    padding-left: var(--spacing-200, 16px);
  }

  .brand-logo {
    width: 50vw;
  }

  p.brand-page-overview-copy {
    margin: 0 clamp(1rem, -1.4348rem + 13.913vw, 9rem);
    font-size: 1rem;
    text-wrap: balance;
  }

  .container-bg-grey {
    background-color: var(--greyscale-300, #f2f2f2);
  }

  /* Seagate page has three column category tiles */
  .three-col {
    @media screen and (width >= 990px) {
      --content-grid__amount-per-row: 3;
    }
  }

  .content-grid .content-grid__item__content-container {
    align-items: center;

    .content-grid__item__text-container {
      text-align: center;
    }
  }

  .full-width-section {
    container-type: inline-size;

    .full-width-grid__container {
      display: grid;
      grid-template-columns: 100cqw;
      gap: 2rem;

      &.cta-button {
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
          "text-container"
          "image-container"
          "button";
      }

      &.no-button {
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
          "text-container"
          "image-container";
      }

      .full-width-grid__image-container {
        grid-area: image-container;
        margin: 0 auto;
        width: 100cqw;
        img,
        iframe {
          border-radius: var(--spacing-100, 1rem);
        }
      }

      .full-width-grid__text-container {
        display: flex;
        grid-area: text-container;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        text-align: center;

        p {
          font-size: 1rem;
        }
      }

      .full-width-grid__btn {
        display: flex;
        grid-area: button;
        align-self: baseline;
        margin: 0 auto;
      }
    }

    @media screen and (width >= 900px) {
      .full-width-grid__container {
        grid-template-columns: repeat(2, auto);
        gap: 3rem;

        &.cta-button {
          grid-template-rows: repeat(2, auto);

          &.text-first {
            grid-template-areas:
              "text-container image-container"
              "button image-container";
          }

          &.image-first {
            grid-template-areas:
              "image-container text-container"
              "image-container button";
          }
        }

        &.no-button {
          grid-template-rows: auto;

          &.text-first {
            grid-template-areas: "text-container image-container";
          }

          &.image-first {
            grid-template-areas: "image-container text-container";
          }
        }

        .full-width-grid__text-container {
          text-align: left;
        }

        .full-width-grid__btn {
          margin: 0;
        }

        .full-width-grid__image-container {
          width: 50cqw;
          max-width: 550px;
        }
      }
    }
  }

  #lacie-featured-product-section .featured-product-grid__container {
    container-type: inline-size;
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 100%;
    grid-template-areas:
      "featured-product-heading"
      "featured-product-image"
      "shop-now-button";
    padding: 2rem 0;

    .featured-product-grid_text-container {
      display: flex;
      grid-area: featured-product-heading;
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;

      p {
        max-width: 25ch;
        margin: 0 auto;
        font-size: 1rem;
      }
    }

    .featured-product-grid_image-container {
      grid-area: featured-product-image;
      max-width: 650px;
      margin: -25px auto;
    }

    .featured-product-grid_btn {
      display: flex;
      grid-area: shop-now-button;
      align-self: baseline;
      margin: 0 auto;
    }

    @media screen and (width >= 768px) {
      grid-template-rows: repeat(2, auto);
      grid-template-columns: repeat(2, auto);
      grid-template-areas:
        "featured-product-heading featured-product-image"
        "shop-now-button featured-product-image";
      padding: 2rem;

      .featured-product-grid_text-container {
        justify-content: center;
        width: 40cqw;
        text-align: left;

        p {
          margin: 0;
        }
      }

      .featured-product-grid_image-container {
        width: 60cqw;
      }

      .featured-product-grid_btn {
        margin: 0;
      }
    }
  }

  /* Data rescue recovery services grid */

  .content-grid--borderless.content-grid__4-col {
    --content-grid__amount-per-row: 1;
    --content-grid__gap: 0;

    .data-recovery-step-number {
      display: flex;
      justify-content: center;
      font-size: 2rem;
    }

    .content-grid__item {
      position: relative;
      flex-grow: 1;
      padding: var(--spacing-200, 24px);

      /* Grid divider lines> horizontal > add ::after pseudo-element and a bottom border to first three grid items */
      &:nth-child(-n + 3)::after {
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        border-bottom: 1px solid var(--grey-400, #dedede);
        content: "";
      }
    }

    .content-grid__item__text-container {
      flex: 1;
      text-align: center;

      h4 {
        text-wrap: balance;
      }
    }

    @media screen and (width >= 640px) {
      --content-grid__amount-per-row: 2;

      .content-grid__item {
        width: 50%;
      }

      /* Grid divider lines > vertical > add ::before pseudo-element and a LHS line to even numbered grid items (i.e., items 2 & 4) */
      .content-grid__item:nth-child(even)::before {
        position: absolute;
        top: 12.5%;
        left: 0;
        width: 1px;
        height: 75%;
        background-color: var(--grey-400, #dedede);
        content: "";
      }

      /* Grid divider lines > horizontal > add ::after pseudo-element and bottom border to the first two grid items */
      .content-grid__item:nth-child(-n + 2)::after {
        left: 15%;
        width: 70%;
        border-bottom: 1px solid var(--grey-400, #dedede);
      }

      /* Grid divider lines > horizontal > remove bottom border from third grid item */
      .content-grid__item:nth-child(3)::after {
        border-bottom: none;
      }
    }

    @media only screen and (width >= 990px) {
      --content-grid__amount-per-row: 4;

      .content-grid__item {
        width: 25%;
      }

      /* Grid divider lines > vertical > add ::before pseudo-element and a LHS line to the second and all following grid items */
      .content-grid__item:nth-child(n + 2)::before {
        position: absolute;
        top: 5%;
        left: 0;
        width: 1px;
        height: 90%;
        background-color: var(--grey-400, #dedede);
        content: "";
      }

      /* Grid divider lines > horizontal > ensure no horizontal divider lines are displayed */
      .content-grid__item:nth-child(-n + 2)::after {
        border-bottom: none;
      }
    }
  }
}