:root {
  /* Program Introduction */
  --page-program-introduction-gap: calc(var(--layout-gap-basis) * 2.5);
  --page-program-introduction-image-dimensions: 72rem;
  --page-program-introduction-image-scaling-factor: 1.25;
  --page-program-introduction-image-translate-y: -4rem;
  --page-program-introduction-container-width: 80%;
  --page-program-introduction-container-margin: 0 auto;
  --page-program-introduction-bottom-margin: calc(var(--layout-gap-basis) * 4);
  --page-program-introduction-text-container-display: block;

  /* Work Package Descriptions */
  --page-program-work-package-descriptions-image-container-display: block;
  --page-program-work-package-descriptions-list-item-image-container-display: none;
  --page-program-work-package-descriptions-text-padding-top: calc(
    var(--layout-gap-basis) * 1.5
  );
  --page-program-work-package-descriptions-text-padding-bottom: var(
    --page-program-introduction-gap
  );
  --page-program-work-package-descriptions-list-item-margin-top: 0;
  --page-program-work-package-descriptions-list-item-image-dimensions: 15rem;
  --page-program-work-package-descriptions-list-item-image-border-radius: 1.4rem;
  --page-program-work-package-descriptions-list-item-image-border-rotation: 6deg;
  --page-program-work-package-descriptions-list-item-image-container-margin-bottom: 3rem;
  --page-program-work-package-descriptions-flex-direction: row;
  --page-program-work-package-descriptions-list-direction: column;
  --page-program-work-package-descriptions-text-to-image-ratio: 1;
  --page-program-work-package-descriptions-bottom-margin: calc(
    var(--layout-gap-basis) * 4
  );
  --page-program-work-package-descriptions-gap: calc(
    var(--layout-gap-basis) * 3
  );

  /* Program Info Segments */
  --page-program-info-segment-margin-top: 0;
  --page-program-info-segment-gap: var(--layout-gap-basis);
  --page-program-info-segment-flex-direction: column;
  --page-program-info-segment-header-max-width: 70rem;
  --page-program-info-segment-subheader-font-size: 2.4rem;
  --page-program-info-segment-subheader-line-height: 1.6;
  --page-program-info-segment-box-flex-direction: row;
  --page-program-info-segment-box-align-items: center;
  --page-program-info-segment-info-box-text-font-size: var(
    --typography-content-text-font-size
  );
  --page-program-info-segment-info-box-image-container-padding: 0;
  --page-program-info-segment-info-box-text-container-flex: 1.5 1 0;
  --page-program-info-segment-info-box-image-width: 100%;
  --page-program-info-segment-info-box-image-height: 100%;
  --page-program-info-segment-info-box-image-container-max-width: 100%;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --page-program-introduction-image-scaling-factor: 1.15;
    --page-program-introduction-container-width: 90%;
    --page-program-work-package-descriptions-text-to-image-ratio: 1.15;
    --page-program-info-segment-header-max-width: 60rem;
    --page-program-info-segment-subheader-font-size: 2.2rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --page-program-info-segment-gap: 3rem;
    --page-program-introduction-image-scaling-factor: 0.95;
    --page-program-introduction-container-width: 100%;
    --page-program-introduction-container-margin: 0;
    --page-program-work-package-descriptions-text-to-image-ratio: 1.25;
    --page-program-info-segment-subheader-font-size: 2rem;
    --page-program-info-segment-box-align-items: flex-start;
    --page-program-info-segment-info-box-text-font-size: 1.6rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --page-program-introduction-container-margin: 0;
    --page-program-info-segment-subheader-font-size: 1.8rem;
    --page-program-info-segment-subheader-line-height: 1.5;
    --page-program-work-package-descriptions-text-to-image-ratio: 1.35;
  }
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --page-program-introduction-image-scaling-factor: 1.15;
    --page-program-work-package-descriptions-text-to-image-ratio: 2;
    --page-program-introduction-gap: calc(var(--layout-gap-basis) * 2);
    --page-program-work-package-descriptions-bottom-margin: var(
      --layout-gap-basis
    );
    --page-program-introduction-bottom-margin: calc(
      var(--layout-gap-basis) * 2
    );
    --page-program-work-package-descriptions-gap: calc(
      var(--layout-gap-basis) * 1.5
    );
    --page-program-info-segment-box-flex-direction: column;
    --page-program-info-segment-info-box-text-container-flex: 1 1 0;
    --page-program-info-segment-info-box-image-width: 100%;
    --page-program-info-segment-info-box-image-height: 30rem;
    --page-program-info-segment-box-align-items: center;
    --page-program-info-segment-info-box-image-container-max-width: 65%;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    /* Program Introduction */
    --page-program-introduction-text-container-display: none;
    --page-program-introduction-image-scaling-factor: 1;
    --page-program-introduction-image-translate-y: 0;

    /* Work Package Descriptions */
    --page-program-work-package-descriptions-list-item-margin-top: 6rem;
    --page-program-work-package-descriptions-image-container-display: none;
    --page-program-work-package-descriptions-list-item-image-container-display: block;
    --page-program-work-package-descriptions-text-padding-top: 0;
    --page-program-work-package-descriptions-text-padding-bottom: 0;

    /* Program Info Segments */
    --page-program-info-segment-margin-top: 3rem;
    --page-program-info-segment-subheader-font-size: 1.6rem;
    --page-program-info-segment-info-box-image-height: auto;
    --page-program-info-segment-info-box-image-container-padding: 3rem;
    --page-program-info-segment-info-box-image-container-max-width: none;
    --page-program-info-segment-info-box-text-font-size: var(
      --typography-content-text-font-size
    );
  }
}

.light-box .page-program-introduction {
  margin-bottom: var(--page-program-introduction-bottom-margin);
}

.page-program-introduction-container {
  display: flex;
  gap: var(--page-program-introduction-gap);
  width: var(--page-program-introduction-container-width);
  margin: var(--page-program-introduction-container-margin);
}

.page-program-introduction-image-container,
.page-program-introduction-text-container {
  flex: 1;
}

.page-program-introduction-text-container *:first-child,
.page-program-work-package-descriptions-text > *:first-child {
  margin-top: 0;
}

.page-program-introduction-text-container {
  display: var(--page-program-introduction-text-container-display);
}

.page-program-introduction-image {
  display: block;
  width: 100%;
  object-fit: contain;
  transform: scale(var(--page-program-introduction-image-scaling-factor))
    translateY(var(--page-program-introduction-image-translate-y));
}

.page-program-work-package-descriptions:not(:last-child) {
  margin-bottom: var(--page-program-work-package-descriptions-bottom-margin);
}

.page-program-work-package-descriptions-inner {
  display: flex;
  align-items: flex-start;
  flex-direction: var(--page-program-work-package-descriptions-flex-direction);
  gap: var(--page-program-introduction-gap);
}

.page-program-work-package-descriptions-image-container {
  display: var(
    --page-program-work-package-descriptions-image-container-display
  );
  flex: 1 1 0;
  position: sticky;
  top: var(--page-program-introduction-gap);
  align-self: flex-start;
}

.page-program-work-package-descriptions-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--layout-lightbox-border-radius);
}

.page-program-work-package-descriptions-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--layout-lightbox-border-radius);
}

.page-program-work-package-descriptions-list {
  display: flex;
  flex-direction: var(--page-program-work-package-descriptions-list-direction);
  gap: var(--page-program-work-package-descriptions-gap);
}

.page-program-work-package-descriptions-list-item {
  margin-top: var(
    --page-program-work-package-descriptions-list-item-margin-top
  );
}

.page-program-work-package-descriptions-list-item-image-container {
  display: var(
    --page-program-work-package-descriptions-list-item-image-container-display
  );
  margin-bottom: var(
    --page-program-work-package-descriptions-list-item-image-container-margin-bottom
  );
}

.page-program-work-package-descriptions-list-item-image {
  width: var(
    --page-program-work-package-descriptions-list-item-image-dimensions
  );
  height: var(
    --page-program-work-package-descriptions-list-item-image-dimensions
  );
  border-radius: var(
    --page-program-work-package-descriptions-list-item-image-border-radius
  );
  object-fit: cover;
  transform: rotate(
    calc(
      0deg -
        var(
          --page-program-work-package-descriptions-list-item-image-border-rotation
        )
    )
  );
}

.page-program-work-package-descriptions-list-item:nth-child(2n)
  .page-program-work-package-descriptions-list-item-image {
  transform: rotate(
    calc(
      0deg +
        var(
          --page-program-work-package-descriptions-list-item-image-border-rotation
        )
    )
  );
}

.page-program-work-package-descriptions-text {
  flex: var(--page-program-work-package-descriptions-text-to-image-ratio) 1 0;
  padding-top: var(--page-program-work-package-descriptions-text-padding-top);
  align-self: stretch;
  padding-bottom: var(
    --page-program-work-package-descriptions-text-padding-bottom
  );
}

.page-program-info-segment {
  display: flex;
  flex-direction: var(--page-program-info-segment-flex-direction);
  align-items: center;
  gap: var(--page-program-info-segment-gap);
  margin-top: var(--page-program-info-segment-margin-top);
}

.page-program-info-segment:not(:last-child) {
  margin-bottom: calc(var(--layout-gap-basis) * 2.5);
}

.page-program-info-segment-header {
  max-width: var(--page-program-info-segment-header-max-width);
  text-align: center;
}

.page-program-info-segment-header-text {
  margin-bottom: calc(var(--layout-gap-basis) * 0.75);
}

.page-program-info-segment-subheader-text {
  font-size: var(--page-program-info-segment-subheader-font-size);
  line-height: var(--page-program-info-segment-subheader-line-height);
}

.page-program-info-segment-info-box {
  border-radius: var(--layout-lightbox-border-radius);
  background-color: var(--theme-color-info-box-background);
  padding: calc(var(--layout-gap-basis) * 1.5);
  display: flex;
  flex-direction: var(--page-program-info-segment-box-flex-direction);
  gap: calc(var(--layout-gap-basis) * 1.5);
  align-items: var(--page-program-info-segment-box-align-items);
}

.page-program-info-segment-info-box-image-container {
  padding: var(--page-program-info-segment-info-box-image-container-padding);
  flex: 1 1 0;
  max-width: var(
    --page-program-info-segment-info-box-image-container-max-width
  );
}

.page-program-info-segment-info-box-image {
  display: block;
  object-fit: contain;
  width: var(--page-program-info-segment-info-box-image-width);
  height: var(--page-program-info-segment-info-box-image-height);
}

.page-program-info-segment-info-box-text-container {
  flex: var(--page-program-info-segment-info-box-text-container-flex);
}

.page-program-info-segment-info-box-text {
  font-size: var(--page-program-info-segment-info-box-text-font-size);
}