body {
   font-family: "Oswald", sans-serif;
   font-optical-sizing: auto;
   font-size: var(--lui-text-lg);
   font-weight: 400;
   font-style: normal;
   color: rgb(35, 31, 32);
}

lui-navbar {
   border-bottom: none;

   &[data-mode="ss"] {

      &>nav>.nav-inner,
      &>div>nav>.nav-inner {
         background-color: rgb(155, 211, 202);
         border-top: none;
      }
   }
}

nav {
   & a {
      &:hover {
         background: rgb(155, 211, 202);
         color: rgb(43, 49, 136);
      }
   }
}

h1,
h2,
h3,
h4,
h5,
h6 {
   /*font-weight: var(--lui-font-semibold);
    line-height: 1.25;
    color: var(--lui-color-text);
    margin-bottom: var(--lui-unit-2);*/
   color: rgb(35, 31, 32);
   text-transform: uppercase;
}

p {
   color: rgb(35, 31, 32);
}

ul:not([role="list"]),
ol:not([role="list"]) {
   padding-left: calc(var(--lui-unit) * 7);
}

li {
   line-height: 1.5;

   &::marker {
      color: rgb(35, 31, 32);
   }
}

.text-uppercase {
   text-transform: uppercase;
}

.hero {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 75vh;

}

.hero__media {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   min-width: 100%;
   min-height: 100%;
   object-fit: cover;
   transform: translate(-50%, -50%);
   z-index: 0;
}

.hero__overlay {
   position: absolute;
   inset: 0;
   background: rgba(35, 31, 32, 0.25);
   z-index: 1;
}

.hero__event-date {
   position: absolute;
   padding: clamp(0.5rem, 0.33rem + 0.67vw, 1rem) clamp(1.5rem, 1rem + 2vw, 3rem) clamp(0.75rem, 0.58rem + 0.67vw, 1.25rem);
   background: rgb(251, 202, 184);
   z-index: 3;
   font-size: clamp(2rem, 1rem + 4vw, 5rem);
   font-weight: 550;
   line-height: 1;
   color: rgb(43, 49, 136);
   border-radius: 9999px;
}

.hero__event-date--1 {
   top: 15%;
   left: 8%;
   transform: rotate(-30deg);
}

.hero__event-date--2 {
   top: 55%;
   right: 10%;
   transform: rotate(20deg);
}

.hero__event-date--3 {
   bottom: 10%;
   left: 38%;
   transform: rotate(10deg);
}

.hero__title {
   position: relative;
   z-index: 4;
   text-align: center;
   margin: 0;
   padding: 1rem;
   font-weight: 500;
   font-size: clamp(4rem, 2rem + 8vw, 10rem);
   text-transform: uppercase;
   letter-spacing: -0.25rem;
   color: rgb(255, 255, 255);
}

@media (prefers-reduced-motion: reduce) {
   .hero__media {
      display: none;
   }
}

.p-123 {
   padding: 1rem;
}

.p-345 {
   padding: 3rem;
}


.about-us {
   background-color: rgb(155, 211, 202);
}

.about-us__media img {
   border-radius: calc(var(--lui-radius) * 2);
   max-height: 600px;
}

.upcoming-events {
   background-color: rgb(255, 255, 255);
}

.upcoming-events__list {
   list-style: none;
   padding-left: 0;
   margin: 0;
}

.upcoming-events__item {
   padding: 1.25rem 0;
   border-bottom: 1px solid rgb(35, 31, 32);
}

.upcoming-events__item:last-child {
   border-bottom: none;
}

.upcoming-events__date {
   font-weight: 500;
   color: rgb(43, 49, 136);
   text-transform: uppercase;
}

.upcoming-events__place {
   font-weight: 400;
}

.upcoming-events__tickets-col {
   text-align: right;
}

.upcoming-events__tickets {
   display: inline-block;
   background: rgb(155, 211, 202);
   color: rgb(35, 31, 32);
   font-weight: 500;
   font-size: var(--lui-text-sm);
   padding: 0.5rem 1.25rem;
   border-radius: 9999px;
   text-decoration: none;
}

.upcoming-events__tickets:hover {
   color: rgb(43, 49, 136);
}



.past-events {
   background-color: rgb(43, 49, 136);
}

.past-events h3 {
   color: rgb(255, 255, 255);
}

.past-events__card {
   background-color: rgb(255, 255, 255);
   border-radius: calc(var(--lui-radius) * 2);
}

.past-events__thumb img {
   border-radius: calc(var(--lui-radius) * 2) calc(var(--lui-radius) * 2) 0 0;
}

.past-events__content {
   padding: 1.75rem;
}

.past-events__date {
   font-weight: 500;
}

.past-events__place {
   margin: 0.25rem 0 0.75rem;
   color: rgb(155, 211, 202);
}

.past-events__text {
   font-size: var(--lui-text-md);
}

.past-events__link {
   display: inline-block;
   background: rgb(155, 211, 202);
   color: rgb(35, 31, 32);
   font-weight: 700;
   font-size: var(--lui-text-sm);
   padding: 0.5rem 1.25rem;
   border-radius: 9999px;
   text-decoration: none;
   margin-top: 0.5rem;
}

.past-events__link:hover {
   color: rgb(43, 49, 136);
}

.entry-header {
   background-color: rgb(43, 49, 136);
   color: rgb(255, 255, 255);
}

.entry-header__back {
   display: inline-block;
   color: rgb(155, 211, 202);
   text-decoration: none;
   margin-bottom: 1rem;
}

.entry-header__date {
   display: block;
   color: rgb(155, 211, 202);
   font-weight: 500;
}

.entry-header__title {
   color: rgb(255, 255, 255);
   margin: 0.25rem 0 0;
}

.entry-content__cover {
   max-height: 480px;
   border-radius: var(--lui-radius-lg);
   margin-bottom: 2rem;
}

.entry-content__lead {
   font-weight: 700;
   font-size: var(--lui-text-lg);
}

.entry-content__body {
   max-width: 70ch;
}

.entry-gallery__title {
   margin-top: 3rem;
}

.entry-gallery__item {
   display: block;
   border-radius: var(--lui-radius);
   overflow: hidden;
}

.workshops-offer {
   background-color: rgb(255, 255, 255);
}

.workshops-offer h3 {
   color: rgb(255, 255, 255);
}

.workshops-offer__cta {
   background-color: rgb(155, 211, 202);
   border-radius: calc(var(--lui-radius) * 2);
}

.workshops-offer__link {
   display: inline-block;
   background: rgb(255, 255, 255);
   color: rgb(155, 211, 202);
   font-weight: 600;
   font-size: var(--lui-text-xl);
   padding: 0.5rem 1.25rem;
   border-radius: 9999px;
   text-decoration: none;
   margin-top: 1.5rem;
}

.workshops-offer__link:hover {
   color: rgb(43, 49, 136);
}

footer {
   color: rgb(255, 255, 255);
   background-color: rgb(43, 49, 136);
}

footer h5 {
   color: rgb(255, 255, 255);
}

footer p {
   color: rgb(155, 211, 202);
}



@media (min-width:576px) {
   .p-123 {
      padding: 2rem;
   }

   .p-345 {
      padding: 4rem;
   }
}

@media (max-width:767.98px) {
   .upcoming-events__tickets-col {
      text-align: left;
   }
}

@media (min-width:768px) {
   .past-events__thumb img {
   border-radius: calc(var(--lui-radius) * 2) 0 0 calc(var(--lui-radius) * 2);
}
}

@media (min-width:992px) {
   .past-events__thumb img {
   border-radius: calc(var(--lui-radius) * 2) calc(var(--lui-radius) * 2) 0 0;
}
}

@media (min-width:1024px) {
   .p-123 {
      padding: 3rem;
   }

   .p-345 {
      padding: 5rem;
   }
}

@media (min-width:1200px) {
   .past-events__thumb img {
   border-radius: calc(var(--lui-radius) * 2) 0 0 calc(var(--lui-radius) * 2);
}
}