/**
 * @file
 * Container utility class for containing max widths of components.
 */

/* The `.container` utility class allows for selectors which use this class
to expand full width holding a left/right padding of 16px until they reach 1376px in width.
After this point, the padding is removed and the selectors will not expand
any wider and they will be center-aligned to the page. */

.container {
  margin-inline: auto;
  max-inline-size: var(--size-max-content-width); /* 1376px */
  padding-inline: var(--size-4);
}

@media (min-width: 1280px) {
  .container {
    padding-inline: var(--size-8);
  }
}

@media (--desktop) {
  .container {
    padding-inline: var(--size-8);
  }
}

@media (min-width: 1440px) {
  .container {
    /* 1440px */
    padding-inline: 0;
  }
}

@media (--desktop-large) {
  .container {
    /* 1440px */
    padding-inline: 0;
  }
}

/**
 * @file
 * Grid system.
 */

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: var(--size-4);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr;
  width: 100%;
}

/* .grid classes nested 3 or more deep go full width. */

.grid .grid .grid {
  display: block;
}

@media (min-width: 1024px) {
  .grid {
    grid-column-gap: var(--size-8);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (--laptop) {
  .grid {
    grid-column-gap: var(--size-8);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.grid-cols-none {
  grid-template-columns: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-auto {
  grid-column: auto;
}

.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-5 {
  grid-column: span 5;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-7 {
  grid-column: span 7;
}

.col-span-8 {
  grid-column: span 8;
}

.col-span-9 {
  grid-column: span 9;
}

.col-span-10 {
  grid-column: span 10;
}

.col-span-11 {
  grid-column: span 11;
}

.col-span-12 {
  grid-column: span 12;
}

.col-span-full {
  grid-column: 1 / -1;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

.col-start-13 {
  grid-column-start: 13;
}

.col-start-auto {
  grid-column-start: auto;
}

.col-end-1 {
  grid-column-end: 1;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-end-5 {
  grid-column-end: 5;
}

.col-end-6 {
  grid-column-end: 6;
}

.col-end-7 {
  grid-column-end: 7;
}

.col-end-8 {
  grid-column-end: 8;
}

.col-end-9 {
  grid-column-end: 9;
}

.col-end-10 {
  grid-column-end: 10;
}

.col-end-11 {
  grid-column-end: 11;
}

.col-end-12 {
  grid-column-end: 12;
}

.col-end-13 {
  grid-column-end: 13;
}

.col-end-auto {
  grid-column-end: auto;
}

.grid-rows-1 {
  grid-row: 1;
}

.grid-rows-2 {
  grid-row: 2;
}

.grid-rows-3 {
  grid-row: 3;
}

.grid-rows-4 {
  grid-row: 4;
}

.grid-rows-5 {
  grid-row: 5;
}

.grid-rows-6 {
  grid-row: 6;
}

.grid-rows-none {
  grid-row: none;
}

.row-auto {
  grid-row: auto;
}

.row-span-1 {
  grid-row: span 1;
}

.row-span-2 {
  grid-row: span 2;
}

.row-span-3 {
  grid-row: span 3;
}

.row-span-4 {
  grid-row: span 4;
}

.row-span-5 {
  grid-row: span 5;
}

.row-span-6 {
  grid-row: span 6;
}

.row-span-full {
  grid-row: 1 / -1;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-start-auto {
  grid-row-start: auto;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-end-auto {
  grid-row-end: auto;
}

/* Medium Grid */

.grid--medium,
.grid--medium > * {
  grid-column: 1 / 7;
  width: 100%;
}

@media (min-width: 768px) {
  .grid--medium,
  .grid--medium > * {
    grid-column: 1 / 13;
  }
}

@media (--tablet) {
  .grid--medium,
  .grid--medium > * {
    grid-column: 1 / 13;
  }
}

@media (min-width: 1024px) {
  .grid--medium,
  .grid--medium > * {
    grid-column: 3 / 11;
  }
}

@media (--laptop) {
  .grid--medium,
  .grid--medium > * {
    grid-column: 3 / 11;
  }
}

/* Full Grid */

.grid--full,
.grid--full > * {
  grid-column: 1 / 7;
  width: 100%;
}

@media (min-width: 768px) {
  .grid--full,
  .grid--full > * {
    grid-column: 1 / 13;
  }
}

@media (--tablet) {
  .grid--full,
  .grid--full > * {
    grid-column: 1 / 13;
  }
}

/**
 * @file
 * Layout utility classes.
 */

.is-full-width {
  inset-inline: 50%;
  margin-inline: -50vw;
  position: relative;
  width: 100vw;
}

.lp-builder .is-full-width {
  margin-inline: auto;
  inset-inline: auto;
  width: 100%;
}

.is-full-width .paragraph--type--sf-table {
  margin-inline: auto;
  max-inline-size: var(--size-container);
  padding-block: var(--size-8);
  padding-inline: var(--size-8);
}

/* Experimental */

.full-width-bg {
  box-shadow: 0 0 0 100vmax #000;
  -webkit-clip-path: inset(0 -100vmax);
  clip-path: inset(0 -100vmax);
}

/**
 * @file
 * Prose styles.
*/

.prose {
  font-size: var(--font-size-2);
  line-height: var(--leading-relaxed);
}

.prose :where(p):not(:where([class~="not-prose"] *)) {
  margin-block: var(--size-6);
}

.prose :where(p):not(:where([class~="not-prose"] *)):first-child {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}

.prose :where(p):not(:where([class~="not-prose"] *)):last-child {
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
  color: var(--gray-600);
  font-size: var(--font-size-5);
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)):first-child {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  border-left-color: var(--blockquote-border-color);
  border-left-width: 1px;
  color: var(--blockquote-color);
  font-style: italic;
  font-weight: var(--font-weight-400);
  margin-block: var(--size-8);
  max-width: 100%;
  padding-block: var(--size-4);
  -webkit-padding-start: var(--size-6);
  padding-inline-start: var(--size-6);
  quotes: "\201C""\201D""\2018""\2019";
  width: 85ch;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) :where(em) {
  font-size: var(--font-size-1);
  font-style: normal;
  font-weight: var(--font-weight-400);
}

.prose :where(h1):not(:where([class~="not-prose"] *)) {
  color: var(--gray-900);
  font-size: var(--font-size-9);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-none);
  -webkit-margin-after: var(--size-8);
  margin-block-end: var(--size-8);
}

@media (min-width: 768px) {
  .prose :where(h1):not(:where([class~="not-prose"] *)) {
    font-size: var(--font-size-10);
  }
}

@media (--tablet) {
  .prose :where(h1):not(:where([class~="not-prose"] *)) {
    font-size: var(--font-size-10);
  }
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
  color: var(--gray-900);
  font-size: var(--font-size-7);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-snug);
  -webkit-margin-after: var(--size-6);
  margin-block-end: var(--size-6);
  -webkit-margin-before: var(--size-12);
  margin-block-start: var(--size-12);
}

@media (min-width: 768px) {
  .prose :where(h2):not(:where([class~="not-prose"] *)) {
    font-size: var(--font-size-8);
  }
}

@media (--tablet) {
  .prose :where(h2):not(:where([class~="not-prose"] *)) {
    font-size: var(--font-size-8);
  }
}

.prose :where(h3):not(:where([class~="not-prose"] *)) {
  color: var(--gray-900);
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-relaxed);
  -webkit-margin-after: var(--size-3);
  margin-block-end: var(--size-3);
  -webkit-margin-before: var(--size-8);
  margin-block-start: var(--size-8);
}

@media (min-width: 768px) {
  .prose :where(h3):not(:where([class~="not-prose"] *)) {
    font-size: var(--font-size-6);
  }
}

@media (--tablet) {
  .prose :where(h3):not(:where([class~="not-prose"] *)) {
    font-size: var(--font-size-6);
  }
}

.prose :where(h4):not(:where([class~="not-prose"] *)) {
  color: var(--gray-900);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-400);
  -webkit-margin-after: var(--size-2);
  margin-block-end: var(--size-2);
  -webkit-margin-before: var(--size-6);
  margin-block-start: var(--size-6);
}

.prose :where(a):not(:where(.button, .link, [class~="not-prose"] *)) {
  border-bottom: 1px solid transparent;
  color: var(--ucla-blue);
  font-weight: var(--font-weight-400);
}

.prose :where(a):not(:where(.button, .link, [class~="not-prose"] *)):hover {
  color: var(--silver-lake-reservoir);
  border-bottom: 1px solid var(--silver-lake-reservoir);
}

.prose :where(a):not(:where(.button, .link, [class~="not-prose"] *)):focus {
  box-shadow: 0 0 var(--white), 0 0 0 2px var(--ucla-blue), 0 0 var(--white);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.prose :where(img):not(:where([class~="not-prose"] *)) {
  -webkit-margin-after: var(--size-10);
  margin-block-end: var(--size-10);
}

.prose :where(video):not(:where([class~="not-prose"] *)) {
  -webkit-margin-after: var(--size-10);
  margin-block-end: var(--size-10);
}

.prose :where(figure):not(:where([class~="not-prose"] *)) {
  -webkit-margin-after: var(--size-10);
  margin-block-end: var(--size-10);
}

.prose :where(figure):not(:where([class~="not-prose"] *)) > * {
  margin-block: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
  color: var(--gray-500);
  -webkit-margin-before: var(--size-4);
  margin-block-start: var(--size-4);
}

.prose :where(code):not(:where([class~="not-prose"] *)) {
  color: var(--gray-900);
  font-weight: var(--font-weight-600);
}

.prose :where(code):not(:where([class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
  font-size: var(--font-size-8);
}

.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
  font-size: var(--font-size-6);
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
  background-color: var(--gray-800);
  border-radius: var(--radius-4);
  color: var(--gray-100);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-loose);
  margin-block: var(--size-9);
  overflow-x: auto;
  padding-block: var(--size-5);
  padding-inline: var(--size-6);
}

.prose :where(pre):not(:where([class~="not-prose"] *)) > code {
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) > code::after,
.prose :where(pre):not(:where([class~="not-prose"] *)) > code::before {
  content: none;
}

.prose :where(ol):not(:where([class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-block: var(--size-6);
  -webkit-padding-start: var(--size-8);
  padding-inline-start: var(--size-8);
}

.prose :where(ul):not(:where([class~="not-prose"] *)) {
  list-style-type: disc;
  margin-block: var(--size-6);
  -webkit-padding-start: var(--size-8);
  padding-inline-start: var(--size-8);
}

.prose :where(li):not(:where([class~="not-prose"] *)) {
  margin-block: var(--size-3);
}

.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
  -webkit-padding-start: var(--size-2);
  padding-inline-start: var(--size-2);
}

.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
  color: var(--gray-400);
  font-weight: var(--font-weight-400);
}

.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
  -webkit-padding-start: var(--size-2);
  padding-inline-start: var(--size-2);
}

.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
  color: var(--gray-400);
  font-weight: var(--font-weight-400);
}

.prose :where(> ul > li p):not(:where([class~="not-prose"] *)) {
  margin-block: var(--size-4);
}

.prose :where(> ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  -webkit-margin-before: var(--size-4);
  margin-block-start: var(--size-4);
}

.prose :where(> ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  -webkit-margin-after: var(--size-4);
  margin-block-end: var(--size-4);
}

.prose :where(> ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  -webkit-margin-before: var(--size-4);
  margin-block-start: var(--size-4);
}

.prose :where(> ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  -webkit-margin-after: var(--size-4);
  margin-block-end: var(--size-4);
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
  margin-block: var(--size-4);
}

.prose :where(hr):not(:where([class~="not-prose"] *)) {
  border-top-color: var(--gray-300);
  border-top-width: 1px;
  margin-block: var(--size-14);
}

.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
  -webkit-margin-before: 0;
  margin-block-start: 0;
}

.prose :where(.button):not(:where([class~="not-prose"] *)) {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--ucla-blue);
  border-color: var(--ucla-blue);
  border-radius: 0;
  border-width: 1px;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-system);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-700);
  justify-content: center;
  line-height: var(--leading-none);
  margin-block: var(--size-4);
  -webkit-margin-end: var(--size-2);
  margin-inline-end: var(--size-2);
  padding-block: var(--size-4);
  padding-inline: var(--size-6);
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.15s linear;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
}

.prose :where(.button):not(:where([class~="not-prose"] *)):visited {
  background-color: var(--ucla-blue);
  color: var(--white);
}

.prose :where(.button):not(:where([class~="not-prose"] *)):hover {
  background-color: var(--silver-lake-reservoir);
  border-color: var(--silver-lake-reservoir);
  color: var(--white);
}

.prose :where(.button):not(:where([class~="not-prose"] *)):focus {
  box-shadow: 0 0 var(--white), 0 0 0 2px var(--ucla-blue), 0 0 var(--white);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.prose :where(.button):not(:where([class~="not-prose"] *)):active {
  background-color: var(--silver-lake-reservoir);
  color: var(--white);
}

.prose :where(.button--secondary):not(:where([class~="not-prose"] *)) {
  background-color: var(--ucla-yellow);
  border-color: var(--ucla-yellow);
  color: var(--gray-900);
}

.prose :where(.button--secondary):not(:where([class~="not-prose"] *)):visited {
  background-color: var(--ucla-yellow);
  color: var(--gray-900);
}

.prose :where(.button--secondary):not(:where([class~="not-prose"] *)):hover {
  background-color: var(--chumash-soil);
  border-color: var(--chumash-soil);
  color: var(--gray-900);
}

.prose :where(.button--secondary):not(:where([class~="not-prose"] *)):focus {
  box-shadow: 0 0 var(--white), 0 0 0 2px var(--ucla-yellow), 0 0 var(--white);
}

.prose :where(.button--secondary):not(:where([class~="not-prose"] *)):active {
  background-color: var(--chumash-soil);
  color: var(--gray-900);
}

.prose
  :where(.media--view-mode-box-1-1):not(:where([class~="not-prose"] *))
  img {
  aspect-ratio: var(--ratio-box);
}

.prose
  :where(.media--view-mode-photo-3-2):not(:where([class~="not-prose"] *))
  img {
  aspect-ratio: var(--ratio-photo);
}

.prose
  :where(.media--view-mode-portrait-3-4):not(:where([class~="not-prose"] *))
  img {
  aspect-ratio: var(--ratio-portrait);
}

.prose
  :where(.media--view-mode-landscape-4-3):not(:where([class~="not-prose"] *))
  img {
  aspect-ratio: var(--ratio-landscape);
}

.prose
  :where(.media--view-mode-widescreen-16-9):not(:where([class~="not-prose"] *))
  img {
  aspect-ratio: var(--ratio-widescreen);
}

.prose
  :where(.media--view-mode-cinemascope-21-9):not(:where([class~="not-prose"] *))
  img {
  aspect-ratio: var(--ratio-cinemascope);
}

.prose :where(ul[class~="list"]):not(:where([class~="not-prose"] *)) {
  display: flex;
  flex-direction: column;
}

.prose
  :where(ul[class~="list--highlight"]):not(:where([class~="not-prose"] *)) {
  border-left-color: var(--ucla-blue);
  border-left-width: var(--size-1);
}

.prose
  :where(ul[class~="list--highlight"]):not(:where([class~="not-prose"] *))
  > li::marker {
  color: var(--ucla-blue);
}

.prose :where(ul[class~="list--link"]):not(:where([class~="not-prose"] *)) {
  list-style-type: none;
  -webkit-padding-end: var(--size-6);
  padding-inline-end: var(--size-6);
}

.prose
  :where(ul[class~="list--link"]):not(:where([class~="not-prose"] *))
  > li {
  margin-block: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
}

.prose
  :where(ul[class~="list--link"]):not(:where([class~="not-prose"] *))
  > li
  a {
  border-bottom-color: var(--ucla-blue);
  border-bottom-width: 1px;
  display: flex;
  padding-block: var(--size-2);
  padding-inline: var(--size-2);
  transition: all 0.15s linear;
}

.prose
  :where(ul[class~="list--link"]):not(:where([class~="not-prose"] *))
  > li
  a:hover {
  background-color: var(--silver-lake-reservoir);
  border-bottom-color: var(--silver-lake-reservoir);
  color: var(--white);
}

.prose :where(ol[class~="lower-roman"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[class~="upper-roman"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[class~="lower-alpha"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[class~="upper-alpha"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(a[class~="link"]):not(:where([class~="not-prose"] *)) {
  align-items: center;
  color: var(--ucla-blue);
  display: flex;
  flex-direction: row;
  font-weight: var(--font-weight-600);
  justify-content: space-between;
  padding-block: var(--size-4);
  padding-inline: var(--size-6);
  transition: all 0.15s linear;
}

.prose :where(a[class~="link"]):not(:where([class~="not-prose"] *))::after {
  background-color: var(--ucla-blue);
  background-size: cover;
  content: "";
  display: inline-block;
  height: 18px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 18px;
}

.prose :where(a[class~="link"]):not(:where([class~="not-prose"] *)):hover {
  background-color: var(--silver-lake-reservoir);
  color: var(--white);
}

.prose
  :where(a[class~="link"]):not(:where([class~="not-prose"] *)):hover::after {
  background-color: var(--white);
}

.prose
  :where(a[class~="link--download"]):not(:where([class~="not-prose"]
      *))::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E%0A");
}

.prose
  :where(a[class~="link--external"]):not(:where([class~="not-prose"]
      *))::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E%0A");
}

.prose :where(strong *):not(:where([class~="not-prose"] *)) {
  font-weight: var(--font-weight-700);
}

/**
 * @file
 * Background utility classes.
 */

.bg-transparent {
  background-color: transparent;
}

.bg-ucla-blue {
  background-color: var(--ucla-blue);
}

.bg-midnight-joshua-tree {
  background-color: var(--midnight-joshua-tree);
}

.bg-gradient-linear-ucla-blue {
  background-image: linear-gradient(to right, var(--sky-900), var(--ucla-blue));
}

/* Background colors for most components when using a one column layout,
full width  and background color is selected. */

:where(.bg-santa-barbara-sand.layout--onecol) {
  background-color: var(--santa-barbara-sand);
}

:where(.bg-venice-canal.layout--onecol) {
  background-color: var(--venice-canal);
}

/* For the Content Highlight component we are making an exception to not apply
background colors even if they are selected. */

.bg-santa-barbara-sand[\:has\(.content-highlight\)],
.bg-venice-canal[\:has\(.content-highlight\)] {
  background-color: transparent;
}

.bg-santa-barbara-sand:has(.content-highlight),
.bg-venice-canal:has(.content-highlight) {
  background-color: transparent;
}

/**
 * @file
 * List utility classes.
 */

.list-none {
  list-style-type: none;
}

.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

/**
 * @file
 * Spacing utility classes.
 */

.space-x-0 > * + * {
  margin-left: 0;
}

/* Margin bottom spacing. */

.mb-0 {
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

.mb-2 {
  -webkit-margin-after: 0.5rem;
  margin-block-end: 0.5rem; /* 8px */
}

.mb-5 {
  -webkit-margin-after: 1.25rem;
  margin-block-end: 1.25rem; /* 20px */
}

.mb-10 {
  -webkit-margin-after: 2.5rem;
  margin-block-end: 2.5rem; /* 40px */
}

.mb-15 {
  -webkit-margin-after: 3.75rem;
  margin-block-end: 3.75rem; /* 60px */
}

/* Margin top spacing. */

.mt-5 {
  -webkit-margin-before: 1.25rem;
  margin-block-start: 1.25rem; /* 20px */
}

.mt-10 {
  -webkit-margin-before: 2.5rem;
  margin-block-start: 2.5rem; /* 40px */
}

.mt-15 {
  -webkit-margin-before: 3.75rem;
  margin-block-start: 3.75rem; /* 60px */
}

.h-0 {
  height: 0;
}

.h-px {
  height: 1px;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-min {
  height: -moz-min-content;
  height: min-content;
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

/**
 * @file
 * SVG utility classes.
 */

.fill-none {
  fill: none;
}

.fill-current {
  fill: currentcolor;
}

.fill-ucla-blue {
  fill: var(--ucla-blue);
}

.fill-midnight-joshua-tree {
  fill: var(--midnight-joshua-tree);
}

.fill-southbay-waves {
  fill: var(--southbay-waves);
}

.fill-avocado-toast {
  fill: var(--avocado-toast);
}

.fill-santa-monica-sunset {
  fill: var(--santa-monica-sunset);
}

.fill-malibu-dolphin {
  fill: var(--malibu-dolphin);
}

.fill-topanga-creek {
  fill: var(--topanga-creek);
}

/**
 * @file
 * Text utility classes.
 */

.text-inherit {
  color: inherit;
}

.text-current {
  color: currentcolor;
}

.text-transparent {
  color: transparent;
}

.text-black {
  color: var(--black);
}

.text-white {
  color: var(--white);
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.line-through {
  text-decoration: line-through;
}

/**
 * @file
 * Visibility utility classes.
 */

.hidden,
.js-hide {
  display: none;
}

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  width: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.spacer-1 {
  -webkit-margin-after: var(--size-5);
  margin-block-end: var(--size-5);
}

.spacer-2 {
  -webkit-margin-after: var(--size-10);
  margin-block-end: var(--size-10);
}

.spacer-3 {
  -webkit-margin-after: var(--size-15);
  margin-block-end: var(--size-15);
}

.spacer-4 {
  -webkit-margin-after: var(--size-20);
  margin-block-end: var(--size-20);
}

.spacer-5 {
  -webkit-margin-after: var(--size-25);
  margin-block-end: var(--size-25);
}

.display-as-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}