:root {
  /* Media gallery - Navigation -Button */
  --media-gallery--navigation--button--background_colour: #1D42A6;
  --media-gallery--navigation--button--text_colour: #ffffff;
  --media-gallery--navigation--button--padding: 31px;
  --media-gallery--navigation--button--font_size: 1.375rem;
  --media-gallery--navigation--button--gap: 11px;
  --media-gallery--navigation--button--border_radius: 6px;
  --media-gallery--navigation--button--border_colour: #1D42A6;
  --media-gallery--navigation--button--border_style: solid;
  --media-gallery--navigation--button--border_width: 2px;
  /* Media gallery - Navigation - Button - Active */
  --media-gallery--navigation--button--active--background_colour: transparent;
  --media-gallery--navigation--button--active--text_colour: #1D42A6;
  --media-gallery--navigation--button--active--border_radius: 6px;
  --media-gallery--navigation--button--active--border_colour: #1D42A6;
  --media-gallery--navigation--button--active--border_style: solid;
  --media-gallery--navigation--button--active--border_width: 2px;
  /* Media gallery - Content - Slide */
  --media-gallery--content--slide--border_radius: 6px;
  /* Media gallery - Lightbox */
  --media-gallery--lightbox--background_colour: rgba(33 29 28 / 70%);
  /* Media gallery - Lightbox - Button */
  --media-gallery--lightbox--button--background_colour: #49B6FF;
  --media-gallery--lightbox--button--text_colour: #002147;
  --media-gallery--lightbox--button--border_colour: #49B6FF;
  --media-gallery--lightbox--button--border_radius: 6px;
  --media-gallery--lightbox--button--border_style: solid;
  --media-gallery--lightbox--button--border_width: 2px;
  /* Media gallery - Lightbox - Button - Active */
  --media-gallery--lightbox--button--active--background_colour: #002147;
  --media-gallery--lightbox--button--active--text_colour: #B9D6F2;
  --media-gallery--lightbox--button--active--border_colour: #49B6FF;
  /* Media gallery - Lightbox - Caption */
  --media-gallery--lightbox--caption--background_colour: #ffffff;
  --media-gallery--lightbox--caption--border_radius: 11px;
  /* Media gallery - Lightbox - Caption - Prefix */
  --media-gallery--lightbox--caption--prefix--text_colour: #1D42A6;
  --media-gallery--lightbox--caption--prefix--font_size: 1.25rem;
  --media-gallery--lightbox--caption--prefix--line_height: 120%;
  /* Media gallery - Lightbox - Caption - Text */
  --media-gallery--lightbox--caption--text--text_colour: #61615F;
  --media-gallery--lightbox--caption--text--font_family: 'Roboto';
  --media-gallery--lightbox--caption--text--font_size: 1.375rem;
  --media-gallery--lightbox--caption--text--font_weight: 500;
  --media-gallery--lightbox--caption--text--font_style: normal;
  --media-gallery--lightbox--caption--text--line_height: 120%;
  /* Media gallery - Lightbox - Caption - Text - Link */
  --media-gallery--lightbox--caption--text--link--text_colour: #49B6FF;
}
/* Main styling */
.oxfcms-media-gallery {
  container-name: media-gallery;
  container-type: inline-size;
  padding-bottom: 60px;
  .oxfcms-media-gallery-heading-wrapper {
    .oxfcms-heading {
      margin-bottom: clamp(35px, 2.5%, 40px);
      padding-right: 200px;
      h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0;
      }
    }
    /* Hide heading if class set */
    &.hide-default-text {
      .oxfcms-heading {
        visibility: hidden;
      }
    }
  }
  .oxfcms-media-gallery-content {
    --swiper-navigation-size: 22px;
    .gallery-container {
      display: block;
      clear: both;
      position: relative;
      .swiper-container {
        .swiper-slide {
          margin-bottom: 10px;
          img {
            border-radius: var(--media-gallery--content--slide--border_radius);
            width: 100%;
            cursor: pointer;
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: cover;
          }
        }
      }
      .swiper-nav-wrapper {
        .swiper-nav {
          display: flex;
          position: absolute;
          top: clamp(-100px, -20%, -110px);
          right: 30px;
          min-height: 66px;
          min-width: 150px;
          z-index: 9;
          > *[role='button'] {
            background-color: var(--media-gallery--navigation--button--background_colour);
            color: var(--media-gallery--navigation--button--text_colour);
            padding: var(--media-gallery--navigation--button--padding);
            font-size: var(--media-gallery--navigation--button--font_size);
            border-radius: var(--media-gallery--navigation--button--border_radius);
            border-color: var(--media-gallery--navigation--button--border_colour);
            border-style: var(--media-gallery--navigation--button--border_style);
            border-width: var(--media-gallery--navigation--button--border_width);
            position: static;
            margin: 0;
            &::after {
              font-family: "Font Awesome 6 Free";
              font-weight: 600;
            }
            &:focus,
            &:hover {
              background-color: var(--media-gallery--navigation--button--active--background_colour);
              color: var(--media-gallery--navigation--button--active--text_colour);
              border-color: var(--media-gallery--navigation--button--active--border_colour);
              border-style: var(--media-gallery--navigation--button--active--border_style);
              border-width: var(--media-gallery--navigation--button--active--border_width);
            }
          }
          .swiper-button-prev {
            margin-right: var(--media-gallery--navigation--button--gap);
            &::after {
              font-size: var(--media-gallery--navigation--button--font_size);
              content: '\f060';
            }
          }
          .swiper-button-next {
            &::after {
              font-size: var(--media-gallery--navigation--button--font_size);
              content: '\f061';
            }
          }
        }
      }
    }
  }
}
/* Lightbox overlay */
#lightboxOverlay {
  background-color: var(--media-gallery--lightbox--background_colour);
  opacity: 100%;
  filter: blur(7.5px);
}
/* Lightbox */
.lightbox {
  height: 100%;
  width: 100%;
  background-color: transparent;
  .lb-outerContainer {
    border-top-left-radius: var(--media-gallery--lightbox--caption--border_radius);
    border-top-right-radius: var(--media-gallery--lightbox--caption--border_radius);
    z-index: 1;
    .lb-image {
      border: 0;
      border-top-left-radius: var(--media-gallery--lightbox--caption--border_radius);
      border-top-right-radius: var(--media-gallery--lightbox--caption--border_radius);
      max-height: none;
      max-width: none;
    }
    .lb-nav {
      *[role="button"] {
        opacity: 100%;
        background-image: none;
      }
      .lb-prev {
        &::after {
          left: 50px;
        }
      }
      .lb-next {
        &::after {
          right: 50px;
        }
      }
    }
  }
  .lb-dataContainer {
    padding-top: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 2;
    position: relative;
    .lb-data {
      padding: 0;
      .lb-details {
        width: 100%;
        .lb-caption {
          background-color: var(--media-gallery--lightbox--caption--background_colour);
          border-bottom-left-radius: var(--media-gallery--lightbox--caption--border_radius);
          border-bottom-right-radius: var(--media-gallery--lightbox--caption--border_radius);
          display: flex;
          margin: 0;
          i {
            color: var(--media-gallery--lightbox--caption--prefix--text_colour);
            font-size: var(--media-gallery--lightbox--caption--prefix--font_size);
            line-height: var(--media-gallery--lightbox--caption--prefix--line_height);
          }
          p {
            color: var(--media-gallery--lightbox--caption--text--text_colour);
            font-family: var(--media-gallery--lightbox--caption--text--font_family);
            font-size: var(--media-gallery--lightbox--caption--text--font_size);
            font-weight: var(--media-gallery--lightbox--caption--text--font_weight);
            font-style: var(--media-gallery--lightbox--caption--text--font_style);
            line-height: var(--media-gallery--lightbox--caption--text--line_height);
          }
          a {
            color: var(--media-gallery--lightbox--caption--text--link--text_colour);
          }
        }
      }
      .lb-close {
        background-image: none;
        &::after {
          top: 50px;
          right: 50px;
        }
      }
    }
  }
  /* Button styling */
  .lb-close,
  .lb-prev,
  .lb-next {
    opacity: 100%;
    &::after {
      background-color: var(--media-gallery--lightbox--button--background_colour);
      color: var(--media-gallery--lightbox--button--text_colour);
      border-radius: var(--media-gallery--lightbox--button--border_radius);
      border-color: var(--media-gallery--lightbox--button--border_colour);
      border-width: var(--media-gallery--lightbox--button--border_width);
      border-style: var(--media-gallery--lightbox--button--border_style);
      padding: 26px 17px;
      font-family: "Font Awesome 6 Free";
      font-weight: 600;
      height: 0;
      position: fixed;
      top: 50%;
      bottom: unset;
    }
    &:hover,
    &:focus {
      &::after {
        background-color: var(--media-gallery--lightbox--button--active--background_colour);
        color: var(--media-gallery--lightbox--button--active--text_colour);
        border-color: var(--media-gallery--lightbox--button--active--border_colour);
      }
    }
  }
  .lb-close::after {
    content: '\f00d';
  }
  .lb-prev::after {
    content: '\f060';
  }
  .lb-next::after {
    content: '\f061';
  }
}
/* Breakpoint - Small Desktop */

@media (width < 1280px) {
  .oxfcms-media-gallery {
    --media-gallery--navigation--button--font_size: 1rem;
    --media-gallery--navigation--button--padding: 30px;
    .oxfcms-media-gallery-content {
      .gallery-container {
        .swiper-nav-wrapper {
          .swiper-nav {
            min-width: 137px;
          }
        }
      }
    }
  }
  .lightbox {
    .lb-outerContainer {
      .lb-nav {
        .lb-prev {
          &::after {
            left: 20px;
          }
        }
        .lb-next {
          &::after {
            right: 20px;
          }
        }
      }
    }
    .lb-dataContainer {
      .lb-data {
        .lb-close {
          &::after {
            top: 20px;
            right: 20px;
          }
        }
      }
    }
    .lb-nav a.lb-prev::after,
    .lb-nav a.lb-next::after,
    .lb-data .lb-close::after {
      bottom: 20px;
      padding: 27px 18px;
    }
  }
}
/* Breakpoint - Tablet */

@media (width < 768px) {
  .oxfcms-media-gallery {
    --media-gallery--navigation--button--font_size: 1rem;
    --media-gallery--navigation--button--padding: 25px;
    .oxfcms-media-gallery-heading-wrapper {
      .oxfcms-heading {
        padding-right: 0;
      }
    }
    .oxfcms-media-gallery-content {
      .gallery-container {
        .swiper-nav-wrapper {
          position: unset;
          .swiper-nav {
            top: 0;
            right: 0;
            position: relative;
            min-width: 310px;
            > *[role='button'] {
              margin: auto;
              &.swiper-button-prev {
                align-self: flex-start;
                margin-left: 0;
              }
              &.swiper-button-next {
                align-self: flex-end;
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
  .lightbox {
    .lb-nav a.lb-prev::after,
    .lb-nav a.lb-next::after,
    .lb-data .lb-close::after {
      padding: 25px 16px;
    }
  }
}