main {
   background-color: #000;
}


.hero-text {
   align-self: center;
   max-width: 550px;
}

.wraper {
   margin: auto;
   /* padding: 32px; */
   padding-inline: 0;
   /* padding-block: 32px; */
   border-radius: 6px;
   background-image:#000000;
}
.wraper-melodie {
   margin: auto;
   /* padding: 32px; */
}
.bounds {
   max-width: 1200px;
}

.utils {
   margin: auto;
}

.u-button-style.u-border-white.soldout {
   color: #ffffff !important;
   pointer-events: none;
}


.utils > div {
   display: flex;
   justify-content: space-between;
   /* position: absolute;
   bottom: 0;
   left: 0;
   right: 0; */
}
.utils select,
.utils h2 {
   margin: 0;
}
.utils select.u-button-style.u-border-white {
   background: #fff  !important;
   color: #000 !important;
   margin-top: auto;
   margin-bottom: auto;
}

.utils form {
   padding-right: 16px;
   display: flex; 
}


table {
   width: 100%;
   /* padding: 32px; */
   padding-inline: 0;
   padding-block: 32px;
   /* border-collapse: collapse; */
   border-spacing: 0;
   font-size: 14px;
}

table td {
   padding: 4px;
}

td .place {
   max-width: 200px;
}

td .title h3 {
   font-size: 1.3rem;
}

td .u-btn {
   padding: 10px 16px;
}

.event {
   display: grid;
   grid-template-columns: repeat(3, 1fr) min-content 1fr;
   /* justify-content: space-between; */
   /* grid-template-columns: minmax(min-content, 140px) repeat(2, 1fr) min-content min-content; */
   grid-template-columns: minmax(min-content, 140px) 240px minmax(max-content,249px) 1fr min-content;
   /* grid-template-columns: 1fr ; */
   align-items: center; 
   padding: 8px 16px;
   border-top: solid 1px #ffffff; 
   column-gap: 8px;
}

.event.ger {
   grid-template-columns: minmax(min-content, 140px) repeat(2, 1fr)  min-content;

}

.ger p a {
   text-transform: uppercase;
}

.ger .golden-button {
   background: #890d0e !important;
   color: black !important;
   border-color: #890d0e !important;
}

.event:last-child {
   border-bottom: solid 1px #ffffff;
}
table .event p {
   margin: 0;
   font-size: 18px;
}

table td>div {
   display: flex;
   align-items: center;
}

.place,
.tickets {
   line-height: 1.6em;
}

.more-info {
   justify-self: end;
}

.more-info .u-button-link {
   white-space: nowrap;
}
.more-info .u-button-link .icon-box {
   margin-right: 0;
}
.add-to-basket-button, .soldout {
   width: 204px;
   margin: 0;
}
.u-btn .icon-box {
   display: inline-flex;
   justify-content: center;
   align-items: center;
}

.event .u-btn {
   height: 54px;
}

.u-button-link {
   padding: 10px 16px;
   position: relative;
}

.u-button-link .icon-box {
   margin-right: 16px;
   line-height: 30px;
}
.u-button-link .icon-svg {
   position: absolute;
   right: 0;
}


.icon-box,
.icon-box + * {
   display: inline-block;
   vertical-align: middle;
}

.icon-svg {
   margin-right: 8px;
}

.icon-svg svg {
   display: inline-block;
   width: 28px;
   height: 28px;
   fill: currentColor;
   vertical-align: sub !important;
}


@media screen and (max-width: 575px) {
   .u-section-7 .u-container-layout-3 {
      padding: 0 16px;
   }

   .bounds.utils > div {
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
   }

   section.u-section-5 {
      padding: 32px 4px;
   }
   .wraper.bounds {
      padding: 8px;
   }

   table {
      padding: 4px;
   }

   table .event {
      padding: 8px 4px;
      grid-template:  1fr/ min-content min-content ;
      gap: 16px;
      justify-content: space-between;
   }

   table .event.ger {
      grid-template:  1fr/ min-content min-content ;
   }


   table .event .u-btn,
   table .event .u-button-link {
      margin: auto;
   }
   table .event .u-button-link {
      padding: 0;
      margin: 0;
   }
   table .event .icon-box .icon-svg {
      display: none;
      margin: 0;
   }

   .more-info {
      text-align: left;
      justify-self: unset;
   }

   table .event td:not(:last-child) {
      grid-column: 1;
   }
   table .event td:last-child {
      grid-row: -3/span 4;
      grid-column: 2;
   }

   table .event .add-to-basket-button,
   table .event .soldout {
      width: 40px;
      padding: 8px;
      margin: 0;
   }
   table .event td:last-child .icon-box .icon-svg {
      display: unset;
      margin: 0;
   }
   /* table .event td:last-child .icon-box  span {
      display: none;
   } */
}




@media screen and (min-width: 576px) and (max-width: 767px) {
   .bounds.utils  {
      padding: 0 32px;
   }

   .u-section-7 .u-container-layout-3 {
      padding: 0 16px;
   }

   .bounds.utils > div {
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
   }

   section.u-section-5 {
      padding: 32px 4px;
   }
   .wraper.bounds {
      padding: 8px;
   }

   table {
      padding: 4px;
   }



   table .event td:last-child {
      grid-column: span 2;
      justify-self: end;
   }
   table .event td:last-child  div {
      margin-left: auto;
   }


   table .event .u-btn,
   table .event .u-button-link {
      margin: auto;
   }

   table .event .u-button-link {
      padding: 0;
      margin: 0;
   }

   table .event .icon-box .icon-svg {
      display: none;
      margin: 0;
   }

   table .event {
      padding: 8px 4px;
      grid-template:  1fr/ 1fr 1fr min-content ;
      gap: 16px;
      justify-content: space-between;
   }

   table .event.ger {
      grid-template:  1fr/ 1fr 1fr min-content ;
   }

   table .event .u-btn,
   table .event .u-button-link {
      margin: auto;
   }
   table .event .u-button-link {
      padding: 0;
      margin: 0;
   }
   table .event .icon-box .icon-svg {
      display: none;
      margin: 0;
   }

   .more-info {
      text-align: left;
      justify-self: unset;
   }
   table .event td:not(:last-child) {
      grid-column: 1;
   }
   table .event td:nth-child(even) {
      grid-column: 2;
   }
   table .event td:last-child {
      grid-row: -3/span 4;
      grid-column: 3;
   }

   table .event .add-to-basket-button,
   table .event .soldout {
      width: 40px;
      padding: 8px;
      margin: 0;
   }
   table .event td:last-child .icon-box .icon-svg {
      display: unset;
      margin: 0;
   }

}
@media screen and (min-width: 768px) and (max-width: 1199px ) {
   .u-section-7 .u-container-layout-3 {
      padding: 0 16px;
   }

   .bounds.utils > div {
      padding: 0 16px;
   }

   section.u-section-5 {
      padding: 32px 4px;
   }

   .wraper.bounds {
      padding: 8px;
   }

   table {
      padding: 4px;
   }

   table td .title h3 {
      font-size: 1.2rem;
   }

   table .event {
      grid-template-columns: 110px 150px 190px minmax(max-content,1fr) min-content;
      justify-content: space-between;
      gap: 8px;
   }

   table .event.ger {
      grid-template-columns: 110px 15% 180px  min-content;

   }

   table .event td:last-child  div {
      margin-left: auto;
   }


   table .event .u-btn,
   table .event .u-button-link {
      margin: auto;
   }

   table .event .icon-box .icon-svg {
      display: none;
      margin: 0;
   }
}

@media screen and (max-width: 1010px) and (min-width: 768px) {

   table .event {
      grid-template-columns: 110px 150px 190px minmax(max-content,1fr);
      grid-template-rows: auto auto;
      gap: 8px 16px;
   }

   table .event td:last-child {
      grid-column: 1 / -1; /* Rozciągnij na całą szerokość */
      grid-row: 2; /* Umieść w drugim wierszu */
      justify-self: center; /* Wycentruj w poziomie */
      margin-top: 12px; /* Dodaj odstęp od górnego wiersza */
      width: 100%; /* Pełna szerokość */
   }
   table .event td:last-child div {
      display: flex;
      justify-content: center;
   }

   table .event td:last-child .add-to-basket-button,
   table .event td:last-child .soldout {
      width: 100%; 
      max-width: 100%; 
      margin: auto;
   }

   table .event td:last-child .add-to-basket-button br,
   table .event td:last-child .soldout br {  
      display: none;
   }

   table .event .icon-box .icon-svg {
      display: inline-block;
      margin-right: 8px;
   }

}


.events-title ~ .events-title{
   padding-top: 32px;
   background: #000000 !important;
}


.u-section-7 .u-text-2 {
   text-align: justify;
}

.city-link:hover{
   color: #830508 !important;
}

   @media screen and (max-width: 400px) {
   table .event td:last-child {
      grid-row: 5/span 4;
      grid-column: 1;
   }
}


#facts h1 {
   text-align: center;
   display: block;
   width: 100%;
   font-size: 2rem;
   margin: 10px 0;
}

#facts p {
   margin-top: 10px;
}
#facts * {
   color: white !important;
}