/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
:root {
  --gutter: 1.5em;
  --accentColor: hsl(300, 50%, 50%);
  --accentColorMuted: hsl(300, 40%, 40%);
  --material-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 23.97em) {
  :root {
    --gutter: 1.25rem;
  }
}
@media (min-width: 72em) {
  :root {
    --gutter: 2rem;
  }
}
*, *::before, *::after {
  box-sizing: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  box-sizing: border-box;
  color: hsl(0, 0%, 25%);
  font: 1em/1.5 system-ui;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

h2 {
  font-size: 1.4em;
  font-weight: 500;
  margin-bottom: 1em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.075);
}

h3 {
  font-size: 1.2em;
  font-weight: 500;
  margin: 1em 0;
}

a {
  color: var(--accentColorMuted);
  text-decoration: underline;
}

p {
  margin: 0 0 1em;
  max-width: 48em;
}

ul {
  margin: 0 0 1em;
  max-width: 48em;
  padding-left: 1.2em;
}

li {
  list-style: square;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

code {
  background: hsla(0, 0%, 0%, 0.05);
  border-radius: 2px;
  color: #000;
  display: inline-block;
  font-family: Monaco, monospace;
  font-size: 0.8em;
  padding: 2px 5px 1px;
  text-decoration: inherit;
}

pre code {
  background: inherit;
  color: inherit;
  display: block;
  font-size: 0.875em;
  padding: 0;
}

table {
  border-collapse: collapse;
  margin: 0 0 1em;
  max-width: 100%;
  width: 100%;
}

th {
  font-weight: 700;
  vertical-align: bottom;
}

td {
  vertical-align: top;
}

th, td {
  background-color: #fff;
  border: 1px solid hsl(0, 0%, 92.5%);
  padding: 0.5em 1em;
  text-align: left;
}

[type=checkbox] {
  vertical-align: 0.1em;
  margin-right: 0.333em;
}

[tabindex="-1"] {
  outline: none;
}

/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
/**
 * Ensures anchor links are fixed to the top of the page when JS is enabled,
 * so new page loads referencing an anchor always display the header.
 * (this is unset in a <noscript> tag)
 */
[data-section-anchor] {
  position: fixed;
  top: 0;
}

responsive-container {
  container-type: inline-size;
  overflow: hidden;
  position: relative;
  display: block;
}

responsive-container[name=Gallery] {
  container-name: Gallery;
}

responsive-container[name=Custom] {
  container-name: Custom;
}

.DemoWrapper::before,
.GalleryDemoWrapper::before,
.CustomDemoWrapper::before {
  background-color: #ccc;
  color: hsl(0, 100%, 100%);
  content: "XS";
  font-size: 0.8em;
  -webkit-font-smoothing: initial;
  font-weight: 700;
  letter-spacing: 0.1em;
  position: absolute;
  right: -3.1em;
  text-align: center;
  top: -1.2em;
  transform: rotate(45deg);
  transform-origin: 0 0;
  width: 6em;
  z-index: 10;
}

@supports (container-type: inline-size) {
  @container (min-width: 384px) {
    .DemoWrapper::before {
      background-color: #40bf80;
      content: "SM";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(responsive-container.SM) .DemoWrapper::before {
    background-color: #40bf80;
    content: "SM";
  }
}
@supports (container-type: inline-size) {
  @container (min-width: 576px) {
    .DemoWrapper::before {
      background-color: #33b2cc;
      content: "MD";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(responsive-container.MD) .DemoWrapper::before {
    background-color: #33b2cc;
    content: "MD";
  }
}
@supports (container-type: inline-size) {
  @container (min-width: 768px) {
    .DemoWrapper::before {
      background-color: #bc79ec;
      content: "LG";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(responsive-container.LG) .DemoWrapper::before {
    background-color: #bc79ec;
    content: "LG";
  }
}
@supports (container-type: inline-size) {
  @container (min-width: 960px) {
    .DemoWrapper::before {
      background-color: #f0427c;
      content: "XL";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(responsive-container.XL) .DemoWrapper::before {
    background-color: #f0427c;
    content: "XL";
  }
}

.GalleryDemoWrapper .DemoWrapper::before {
  left: -1.2em;
  right: auto;
  top: 3.1em;
  transform: rotate(-45deg);
}
@supports (container-type: inline-size) {
  @container Gallery (min-width: 384px) {
    .GalleryDemoWrapper::before {
      background-color: #40bf80;
      content: "SM";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Gallery-SM) .GalleryDemoWrapper::before {
    background-color: #40bf80;
    content: "SM";
  }
}
@supports (container-type: inline-size) {
  @container Gallery (min-width: 576px) {
    .GalleryDemoWrapper::before {
      background-color: #33b2cc;
      content: "MD";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Gallery-MD) .GalleryDemoWrapper::before {
    background-color: #33b2cc;
    content: "MD";
  }
}
@supports (container-type: inline-size) {
  @container Gallery (min-width: 768px) {
    .GalleryDemoWrapper::before {
      background-color: #bc79ec;
      content: "LG";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Gallery-LG) .GalleryDemoWrapper::before {
    background-color: #bc79ec;
    content: "LG";
  }
}
@supports (container-type: inline-size) {
  @container Gallery (min-width: 960px) {
    .GalleryDemoWrapper::before {
      background-color: #f0427c;
      content: "XL";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Gallery-XL) .GalleryDemoWrapper::before {
    background-color: #f0427c;
    content: "XL";
  }
}

/* Custom breakpoints */
@supports (container-type: inline-size) {
  @container Custom (min-width: 400px) {
    .CustomDemoWrapper::before {
      background-color: #40bf80;
      color: hsl(0, 100%, 100%);
      content: "C2";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Custom-C2) .CustomDemoWrapper::before {
    background-color: #40bf80;
    color: hsl(0, 100%, 100%);
    content: "C2";
  }
}
@supports (container-type: inline-size) {
  @container Custom (min-width: 800px) {
    .CustomDemoWrapper::before {
      background-color: #33b2cc;
      content: "C3";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Custom-C3) .CustomDemoWrapper::before {
    background-color: #33b2cc;
    content: "C3";
  }
}
@supports (container-type: inline-size) {
  @container Custom (min-width: 1200px) {
    .CustomDemoWrapper::before {
      background-color: #bc79ec;
      content: "C4";
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Custom-C4) .CustomDemoWrapper::before {
    background-color: #bc79ec;
    content: "C4";
  }
}

/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
@media (max-width: 575px) {
  .hidden\@MD {
    display: none !important;
  }
}
@media (min-width: 576px) {
  .visible\@MD {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden\@LG {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .visible\@LG {
    display: none !important;
  }
}
@media (max-width: 959px) {
  .hidden\@XL {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .visible\@XL {
    display: none !important;
  }
}
/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
/**
 * .App
 * ------------------------------------------------------------------------ \\
 */
.App {
  position: relative;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .App {
    display: flex;
    position: static;
  }
}
/**
 * .App-content
 * ------------------------------------------------------------------------ \\
 */
.App-content {
  contain: content;
  padding: var(--gutter);
}

@media (min-width: 768px) {
  .App-content {
    flex: 1 1 0%;
    min-width: 16em;
  }
}
/**
 * .App-footer
 * ------------------------------------------------------------------------ \\
 */
.App-footer {
  contain: content;
}

/**
 * .App-main
 * ------------------------------------------------------------------------ \\
 */
.App-main {
  contain: content;
  background: hsl(0, 0%, 96%);
}

@media (min-width: 768px) {
  .App-main {
    display: flex;
    flex: 1 1 0%;
    flex-flow: column;
    min-width: 0;
  }
}
/**
 * .App-mainContent
 * ------------------------------------------------------------------------ \\
 */
@media (min-width: 768px) {
  .App-mainContent {
    contain: content;
    display: flex;
    flex: 1 0 auto;
  }
}
/**
 * .App-mainHeader
 * ------------------------------------------------------------------------ \\
 */
.App-mainHeader {
  align-items: center;
  background: hsl(0, 0%, 100%);
  border-top: 1px solid var(--accentColor);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.075);
  contain: strict;
  display: flex;
  height: 5em;
  padding: 0 var(--gutter);
}

@media (min-width: 768px) {
  .App-mainHeader {
    position: relative;
  }
}
/**
 * .App-mainHeaderLink
 * --------------------
 */
.App-mainHeaderLink {
  color: inherit;
  margin-left: 1.25em;
}

@media (min-width: 960px) {
  .App-mainHeaderLink {
    font-size: 0.85em;
    margin-left: 0.75em;
  }
}
.App-mainHeaderLink:first-child {
  margin-left: 0;
}

/**
 * .App-mainHeaderLinks
 * --------------------
 */
.App-mainHeaderLinks {
  align-items: center;
  display: flex;
}

@media (min-width: 768px) {
  .App-mainHeaderLinks {
    transform: translate3d(0em, 0, 0);
  }
  .App--isSidebarTransitioning .App-mainHeaderLinks {
    transition: transform 0.3s var(--material-easing);
  }
  .App--isSidebarHidden .App-mainHeaderLinks {
    transform: translate3d(-3em, 0, 0);
  }
}
/**
 * .App-mainHeaderTitle
 * ------------------------------------------------------------------------ \\
 */
.App-mainHeaderTitle {
  color: #999;
  flex: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  word-spacing: 0.2em;
}

@media (min-width: 768px) {
  .App-mainHeaderTitle {
    word-spacing: 0.2em;
    transform: translate3d(0, 0, 0);
  }
  .App--isNavTransitioning .App-mainHeaderTitle {
    transition: transform 0.3s var(--material-easing);
  }
  .App--isNavSidebarCollapsed .App-mainHeaderTitle {
    transform: translate3d(3em, 0, 0);
  }
}
/**
 * .App-mainHeaderTitleEmphasis
 * ------------------------------------------------------------------------ \\
 */
.App-mainHeaderTitleEmphasis {
  color: var(--accentColor);
  font-style: normal;
  margin-right: 0.2em;
}

/**
 * .App-modalOverlay
 * ------------------------------------------------------------------------ \\
 */
.App-modalOverlay {
  display: none;
}

.App--isNavTransitioning .App-modalOverlay,
.App--isNavDrawerOpen .App-modalOverlay {
  background: #000;
  bottom: 0;
  display: block;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  z-index: 100;
}

.App--isNavTransitioning .App-modalOverlay {
  opacity: 0;
  transition: opacity 0.3s var(--material-easing);
}

.App--isNavDrawerOpen .App-modalOverlay {
  opacity: 0.333;
}

.header-wrapper {
  position: fixed;
  z-index: 10;
  width: 100%;
}

/*https://volodymyrzh.medium.com/building-a-responsive-navigation-bar-with-css-593ffdb26887*/
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: white;
}

.nav-links {
  list-style: none;
  margin: 0 0 0 0;
}

.nav-links li {
  display: inline-block;
  padding: 0 20px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  font-size: 18px;
}

.nav-links a:focus,
.nav-links a:hover {
  background-color: #555; /* Adds a hover and focus effect for better visual feedback */
  color: #fff;
}

.hamburger {
  display: none;
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media screen and (max-width: 768px) {
  /*.hamburger {
    display: flex;
    cursor: pointer;
  }
  .hamburger #closeHam {
    display: none;
  }
  .navigation-items {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    top: 58px;
    background-color: rgb(73, 51, 153);
    width: 100%;
    height: calc(100vh - 58px);
    padding-top: 60px;
    gap: 10vh;
  }*/
  .nav-links {
    position: absolute;
    right: 0;
    height: 92vh;
    top: 69px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    z-index: 2;
  }
  .nav-links li {
    opacity: 0;
  }
  .hamburger {
    display: block;
    cursor: pointer;
  }
  .hamburger div {
    width: 25px;
    height: 3px;
    background-color: black;
    margin: 5px;
    transition: all 0.3s ease;
  }
  .nav-active {
    transform: translateX(0);
  }
  @keyframes navLinkFade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .nav-links li {
    animation: navLinkFade 0.5s ease forwards 0.5s;
  }
  .menu-backdrop {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1; /* Ensure it's below the nav-links but above other content */
  }
  .fixed-position {
    overflow: hidden;
    height: 100%;
  }
  .display {
    display: block;
  }
}
/**
 * .App-nav
 * ------------------------------------------------------------------------ \\
 */
.App-nav {
  background: hsl(0, 0%, 23%);
  contain: strict;
  color: hsl(0, 0%, 80%);
  width: 16em;
}

@media (max-width: 767px) {
  .App-nav {
    box-shadow: none;
    bottom: 0;
    display: none;
    left: -16em;
    position: absolute;
    top: 0;
    transform: translate3d(0%, 0, 0);
    z-index: 101;
  }
  .App--isNavDrawerOpen .App-nav {
    display: block;
    box-shadow: 0 0 1em hsla(0, 0%, 0%, 0.5);
    transform: translate3d(100%, 0, 0);
  }
  .App--isNavTransitioning .App-nav {
    display: block;
    transition: box-shadow 0.3s var(--material-easing), transform 0.3s var(--material-easing);
  }
}
@media (min-width: 768px) {
  .App-nav {
    background: hsl(0, 0%, 23%) linear-gradient(to left, hsla(0, 0%, 0%, 0.07), transparent 0.5em);
    width: 16em;
    flex: 0 0 auto;
    overflow: hidden;
    position: static;
    will-change: width;
  }
  .App--isNavTransitioning .App-nav {
    transition: width 0.3s var(--material-easing);
  }
  .App--isNavSidebarCollapsed .App-nav {
    flex-shrink: 1;
    width: 0;
  }
  .App--isNavSidebarCollapsed:not(.App--isNavTransitioning) .App-nav {
    display: none;
  }
}
/**
 * .App-navHeader
 * ------------------------------------------------------------------------ \\
 */
.App-navHeader {
  align-self: stretch;
  align-items: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.075);
  color: hsla(0, 0%, 100%, 0.85);
  contain: strict;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--gutter);
  height: 5em;
}

/**
 * .App-navHeaderTitle
 * ------------------------------------------------------------------------ \\
 */
.App-navHeaderTitle {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/**
 * .App-navShow
 * ------------------------------------------------------------------------ \\
 */
.App-navShow {
  color: hsl(0, 0%, 60%);
  display: flex;
  width: 2.6em;
}

@media (min-width: 768px) {
  .App-navShow {
    align-items: center;
    display: none;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
  }
  .App--isNavSidebarCollapsed .App-navShow {
    display: flex;
    opacity: 1;
  }
  .App--isNavTransitioning .App-navShow {
    display: flex;
    transition: opacity 0.3s var(--material-easing);
  }
}
/**
 * .App-navHide
 * ------------------------------------------------------------------------ \\
 */
.App-navHide {
  display: flex;
}

/**
 * .App-sidebar
 * ------------------------------------------------------------------------ \\
 */
.App-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .App-sidebar {
    background: hsl(0, 0%, 100%);
    border-left: 1px solid hsla(0, 0%, 0%, 0.075);
    contain: layout style;
    display: block;
    flex: 0 1 auto;
    padding: 0;
    position: relative;
    transform: translate3d(0, 0, 0);
    width: 24em;
    will-change: width;
  }
  .App--isSidebarTransitioning .App-sidebar {
    transition: width 0.3s var(--material-easing);
  }
  .App--isSidebarHidden .App-sidebar {
    width: 0 !important;
  }
  .App--isSidebarHidden:not(.App--isSidebarTransitioning) .App-sidebar {
    display: none;
  }
}
/**
 * .App-sidebarGutter
 * ------------------------------------------------------------------------ \\
 */
.App-sidebarGutter {
  contain: strict;
  cursor: ew-resize;
  display: block;
  height: 100%;
  opacity: 1;
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
}

/**
 * .App-sidebarGutter::before
 * ------------------------------------------------------------------------ \\
 */
.App-sidebarGutter::before {
  display: none;
}

@media (min-width: 768px) {
  .App-sidebarGutter::before {
    background-image: linear-gradient(90deg, #888, #888 1px, transparent 2px, transparent 5px);
    background-size: 4px;
    content: "";
    display: block;
    height: 30px;
    margin-left: 10px;
    opacity: 1;
    position: fixed;
    position: sticky; /* Prefer sticky but fall back to fixed */
    pointer-events: none;
    top: 50vh;
    width: 10px;
  }
  .App--isSidebarTransitioning .App-sidebarGutter::before {
    transition: opacity 0.3s var(--material-easing);
  }
  .App--isSidebarHidden .App-sidebarGutter::before {
    opacity: 0;
  }
}
/**
 * .App-sidebarHeader
 * ------------------------------------------------------------------------ \\
 */
.App-sidebarHeader {
  align-items: center;
  display: flex;
  contain: strict;
  height: 6em;
  justify-content: space-between;
  min-width: 16em;
  padding: 0 var(--gutter);
}

/**
 * .App-sidebarHeaderTitle
 * ------------------------------------------------------------------------ \\
 */
.App-sidebarHeaderTitle {
  font-size: 1.333em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * .App-sidebarHide
 * ------------------------------------------------------------------------ \\
 */
.App-sidebarHide {
  color: hsl(0, 0%, 70%);
  display: inline-flex;
}

/**
 * .App-sidebarShow
 * ------------------------------------------------------------------------ \\
 */
.App-sidebarShow {
  display: none;
}

@media (min-width: 768px) {
  .App-sidebarShow {
    align-items: center;
    color: hsl(0, 0%, 60%);
    height: 100%;
    position: absolute;
    right: var(--gutter);
    opacity: 0;
    top: 0;
  }
  .App--isSidebarTransitioning .App-sidebarShow {
    display: flex;
    transition: opacity 0.3s var(--material-easing);
  }
  .App--isSidebarHidden .App-sidebarShow {
    display: flex;
    opacity: 1;
  }
}
/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
.Image {
  border: 1px solid hsl(0, 0%, 90%);
  padding: 0.25em;
}

.Image::after {
  background: hsl(0, 0%, 90%);
  content: "";
  display: block;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
}

/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
/* This will get overridden by the visible section or the <noscript> */
.Section {
  display: none;
}

.Section--isSelected {
  display: block;
}

/*
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
.Gallery {
  background: #fff;
  border: 1px solid hsla(0, 0%, 0%, 0.075);
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
  margin: 0;
  max-width: 100%;
  padding: 1em;
  /* -------------- */
  /* Breakpoint: MD */
  /* -------------- */
  /* -------------- */
  /* Breakpoint: XL */
  /* -------------- */
}
.Gallery > li {
  list-style: none;
  margin: 0;
}
@supports (container-type: inline-size) {
  @container Gallery (min-width: 576px) {
    .Gallery {
      grid-template-columns: 1fr 1fr;
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Gallery-MD) .Gallery {
    grid-template-columns: 1fr 1fr;
  }
}
@supports (container-type: inline-size) {
  @container Gallery (min-width: 960px) {
    .Gallery {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}
@supports not (container-type: inline-size) {
  :where(.Gallery-XL) .Gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}