*,

:before,

::after {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



img {

    max-width: 100%;

}



:is(h1, h2, h3, h4, h5, h6) {

    font-family: "Yeseva One", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



.site-root {

    background-color: #403125;

    height: 100vh;

    height: 100dvh;

    display: grid;

    grid-template-columns: 25% 1fr 25%;

    color: #fff;

    overflow: hidden;

}



.site-root [class^="event-image"] img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.event {

    padding: 1rem;

    text-align: center;

    border: 0.35rem solid #403125;

    overflow-y: auto;

    align-content: center;
  
    background: url(../images/game-dinner-bg.jpg);

}



.event .event-header .logo img {

    max-width: 250px;

    aspect-ratio: 1;

    object-fit: contain;

    display: block;

    margin: 1rem auto 1.5rem;

}



.event .title {

    margin-bottom: 1.5rem;

}



.event .title>* {

    font-size: clamp(1.75rem, 3vw + 1rem, 3rem);

    text-wrap: balance;

    color: #403125;

    margin: 0;

}



.event .sub-title {

    margin-bottom: 1rem;

}



.event .sub-title>* {

    margin: 0;

}



.event .sub-title~.sub-title {

    margin-top: 1.5rem;

}



.event .sub-title>*:not(:last-child) {

    margin-bottom: 0.25em;

}



.event .sub-title>*:not(p) {

    font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem);

    text-wrap: balance;

    text-transform: uppercase;

    color: #000;

}



.event .sub-title p {

    font-size: clamp(1rem, 1.25vw + 0.25rem, 1.25rem);

    text-wrap: pretty;

    color: #000;

}



.event {

    position: relative;

    isolation: isolate;

}



.event .event-body {

    max-width: 80ch;

    margin-inline: auto;

}



.event .vectors img {

    position: absolute;

    z-index: -2;

    max-width: min(120px, 6vw);

}



.event .vectors img:nth-child(1) {

    inset: 0 0 auto auto;

}



.event .vectors img:nth-child(2) {

    inset: 0 auto auto 0;

}



.event .vectors img:nth-child(3) {

    inset: auto 0 0 auto;

}



.event .vectors img:nth-child(4) {

    inset: auto auto 0 0;

}



.event address {

    font-style: normal;

    max-width: 35ch;

    margin-inline: auto;

    color: #000;

}



.event .addmission .price {

    background-color: #000;

    color: #fac25b;

    padding: 0.15em 0.5em;

    border-radius: 0.25rem;

    display: inline-block;

}



.ticket {

    background-color: #000;

    max-width: max-content;

    margin-inline: auto;

    padding: 0.5em 2em;

    color: #fac25b;

    font-weight: 600;

    text-transform: uppercase;

    font-size: clamp(1.15rem, 1.75vw + 0.35rem, 1.5rem);

    clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 0 100%, 1rem 50%);

}



.event .event-footer p {

    max-width: 50ch;

    margin-inline: auto;

    color: #000;

}



.event .note>* {

    color: #403125;

    font-size: clamp(1.15rem, 1.75vw + 0.35rem, 1.5rem);

    text-transform: uppercase;

}



.action a {

    background-color: #000;

    color: #fac25b;

    display: inline-block;

    display: inline-flex;

    gap: 0.75rem;

    text-decoration: none;

    border-radius: 0.25rem;

    font-size: clamp(1.25rem, 1.25vw, 1.25rem);

    padding: 0.5em 1.5em;

    align-items: center;

    transition: all 200ms;

    position: relative;

    overflow: hidden;

    isolation: isolate;

}



.action a svg {

    width: 1em;

    height: 1em;

    fill: currentColor;

}



.action a:hover {

    background-color: #403125!important;

}



.action a::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 200%;

    background-image: linear-gradient(to right, transparent, #fff, transparent);

    z-index: -1;

    opacity: 0.75;

    animation: 2s skeleton ease infinite;

}



@keyframes skeleton {

    from {

        transform: translateX(-150%);

    }



    to {

        transform: translateX(150%);

    }

}











@media (max-width: 1089.98px) {

    .site-root {

        height: auto;

        overflow: unset;

        grid-template-columns: 1fr;

    }



    .event {

        overflow: unset;

        padding-block: 3rem;

        position: relative;

        isolation: isolate;

    }



    /*.event::before {

        content: "";

        position: absolute;

        inset: 0;

        background: fixed url("../images//event-bg-sm.jpg") center / cover;

        z-index: -2;

        opacity: 0.15;

    }*/



    .event .vectors img {

        max-width: min(120px, 10vw);

    }



    .site-root [class^="event-image"] {

        display: none;

    }

}

/* new css */


/* Absolutely positioned container */
.sponsor-list {
  position: relative;
  top: 20px;        /* adjust as needed */
  right: 20px;      /* adjust as needed */
  width: 400px;     /* controls total width for layout */
  z-index: 10;
}

/* Flex layout inside the box */
.sponsor-list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;              /* allow wrapping */
  justify-content: center;      /* center items in each row */
  gap: 10px;
  padding: 0;
  margin: 0;
}

/* 3 per row (roughly) */
.sponsor-list li {
  flex: 0 1 calc(33.333% - 10px); /* 3 columns */
  display: flex;
  justify-content: center;
}

.sponsor-list img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.sponsor-list img:hover {
  transform: scale(1.05);
}
.event .sponsor-list {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto auto 40px;
	right: auto;
}
.event .sponsor-list ul li {
    width: 150px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
}