#events {
  background-color: white;
  border-radius: 70px 70px 0 0;
  padding: 2rem 0 8rem;
  width: 100%;
  margin: 0; }
  #events h1 {
    text-align: center;
    font-weight: normal;
    margin-bottom: 3rem; }

.carousel {
  width: 100%;
  /*
  min-width: 900px;
  max-width: 1236px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  */
  position: relative; }

.activator {
  display: none; }

.controls {
  user-select: none;
  display: none;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  bottom: 0;
  align-items: flex-end;
  justify-content: center; }

.controls:first-of-type {
  /*justify-content: flex-end;*/ }

.controls:last-of-type {
  /*justify-content: flex-start;*/ }

.control {
  user-select: none;
  cursor: pointer;
  background-color: black;
  color: #fff;
  border-radius: 10%;
  box-shadow: 0 2px 10px 0 rgba(33, 34, 36, 0.3);
  font-size: 80px;
  transition: 0.3s all;
  z-index: 1;
  text-align: center;
  line-height: 25px;
  margin-inline: 2rem;
  font-weight: 100;
  width: 48px;
  height: 48px; }

.control:hover {
  transform: scale(1.05); }

/*.activator[style*=--index]:checked ~ .screen .track {
  transform: translateX((var(--index) - 1) * 1%);
}
.activator[style*=--index]:checked {
    --target-control: --index;

     ~ .controls[style*=--target-control] {
        display: flex;
    }

    height:calc(var(--index) * 1rem);
}*/
#carousel-slide-activator-1:checked ~ .screen .track {
  transform: translateX(0%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-1:checked ~ .screen .track > .item#carousel-slide-item-1 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-1:checked ~ #carousel-controls-activator-1 {
  display: flex; }

#carousel-slide-activator-2:checked ~ .screen .track {
  transform: translateX(-85%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-2:checked ~ .screen .track > .item#carousel-slide-item-2 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-2:checked ~ #carousel-controls-activator-2 {
  display: flex; }

#carousel-slide-activator-3:checked ~ .screen .track {
  transform: translateX(-170%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-3:checked ~ .screen .track > .item#carousel-slide-item-3 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-3:checked ~ #carousel-controls-activator-3 {
  display: flex; }

#carousel-slide-activator-4:checked ~ .screen .track {
  transform: translateX(-255%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-4:checked ~ .screen .track > .item#carousel-slide-item-4 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-4:checked ~ #carousel-controls-activator-4 {
  display: flex; }

#carousel-slide-activator-5:checked ~ .screen .track {
  transform: translateX(-340%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-5:checked ~ .screen .track > .item#carousel-slide-item-5 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-5:checked ~ #carousel-controls-activator-5 {
  display: flex; }

#carousel-slide-activator-6:checked ~ .screen .track {
  transform: translateX(-425%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-6:checked ~ .screen .track > .item#carousel-slide-item-6 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-6:checked ~ #carousel-controls-activator-6 {
  display: flex; }

#carousel-slide-activator-7:checked ~ .screen .track {
  transform: translateX(-510%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-7:checked ~ .screen .track > .item#carousel-slide-item-7 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-7:checked ~ #carousel-controls-activator-7 {
  display: flex; }

#carousel-slide-activator-8:checked ~ .screen .track {
  transform: translateX(-595%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-8:checked ~ .screen .track > .item#carousel-slide-item-8 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-8:checked ~ #carousel-controls-activator-8 {
  display: flex; }

#carousel-slide-activator-9:checked ~ .screen .track {
  transform: translateX(-680%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-9:checked ~ .screen .track > .item#carousel-slide-item-9 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-9:checked ~ #carousel-controls-activator-9 {
  display: flex; }

#carousel-slide-activator-10:checked ~ .screen .track {
  transform: translateX(-765%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-10:checked ~ .screen .track > .item#carousel-slide-item-10 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-10:checked ~ #carousel-controls-activator-10 {
  display: flex; }

#carousel-slide-activator-11:checked ~ .screen .track {
  transform: translateX(-850%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-11:checked ~ .screen .track > .item#carousel-slide-item-11 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-11:checked ~ #carousel-controls-activator-11 {
  display: flex; }

#carousel-slide-activator-12:checked ~ .screen .track {
  transform: translateX(-935%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-12:checked ~ .screen .track > .item#carousel-slide-item-12 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-12:checked ~ #carousel-controls-activator-12 {
  display: flex; }

#carousel-slide-activator-13:checked ~ .screen .track {
  transform: translateX(-1020%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-13:checked ~ .screen .track > .item#carousel-slide-item-13 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-13:checked ~ #carousel-controls-activator-13 {
  display: flex; }

#carousel-slide-activator-14:checked ~ .screen .track {
  transform: translateX(-1105%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-14:checked ~ .screen .track > .item#carousel-slide-item-14 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-14:checked ~ #carousel-controls-activator-14 {
  display: flex; }

#carousel-slide-activator-15:checked ~ .screen .track {
  transform: translateX(-1190%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-15:checked ~ .screen .track > .item#carousel-slide-item-15 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-15:checked ~ #carousel-controls-activator-15 {
  display: flex; }

#carousel-slide-activator-16:checked ~ .screen .track {
  transform: translateX(-1275%);
  /*opacity:$i;*/ }
  #carousel-slide-activator-16:checked ~ .screen .track > .item#carousel-slide-item-16 {
    transform: scaleY(1);
    opacity: 1; }

#carousel-slide-activator-16:checked ~ #carousel-controls-activator-16 {
  display: flex; }

.screen {
  overflow: hidden;
  margin-bottom: 5rem;
  max-width: 100vw; }

.track {
  font-size: 0;
  transition: all 0.3s ease 0s;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; }

.item {
  /* width:1320px; better don't use it */
  display: inline-flex;
  vertical-align: top;
  white-space: normal;
  width: 94%;
  height: 480px;
  margin-inline: -4.5%;
  transition: 0.4s;
  opacity: 0.7;
  transform: scale(0.8); }

.carousel .item:first-child {
  margin-left: 3%; }

.demo-container {
  display: flex;
  top: 0;
  align-items: center;
  bottom: 0;
  left: 0;
  right: 0; }

.demo-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 20px;
  /*height: 250px;*/
  width: 100%;
  padding: 32px;
  background-color: black; }
  .demo-content > div {
    display: flex; }
  .demo-content img {
    border-radius: 25px;
    max-height: 400px;
    height: -webkit-fill-available;
    object-fit: contain;
    max-width: 400px;
    margin-right: 16px;
    margin-block: auto;
    width: 400px; }
  .demo-content h2 {
    margin-bottom: 1rem; }
  .demo-content .button {
    padding: 20px 2.2rem; }
  .demo-content .button.wide {
    display: none; }

.demo-content .item-text-content {
  display: grid; }

@media screen and (max-width: 1280px) {
  .demo-content {
    flex-direction: column; }
    .demo-content .button {
      display: none; }
    .demo-content .button.wide {
      display: block;
      min-width: 100%; } }

@media screen and (max-width: 1024px) {
  #events {
    border-radius: 20px 20px 0 0; }
  .carousel {
    padding-left: 0;
    padding-right: 0; }
  .activator:nth-of-type(n):checked ~ .controls:nth-of-type(n) {
    display: none; }
  .activator:nth-of-type(n):checked ~ .screen .track {
    transform: none; }
  .screen {
    margin-left: 0;
    margin-right: 0; }
  .track {
    /*overflow-x: auto;
        width: auto;
        padding-left: 48px;
        padding-right: 48px;*/ }
  .item {
    transform: unset;
    margin-inline: 0.5%;
    height: 380px; }
  .demo-content {
    flex-direction: column; }
    .demo-content img {
      border-radius: 25px;
      max-height: 244px;
      height: -webkit-fill-available;
      object-fit: cover;
      max-width: 244px;
      margin-right: 16px;
      margin-block: auto;
      width: -webkit-fill-available; }
    .demo-content h2 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden; }
    .demo-content p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      overflow: hidden; }
  #carousel-slide-activator-1:checked ~ .screen .track {
    transform: translateX(0%); }
  #carousel-slide-activator-2:checked ~ .screen .track {
    transform: translateX(-95%); }
  #carousel-slide-activator-3:checked ~ .screen .track {
    transform: translateX(-190%); }
  #carousel-slide-activator-4:checked ~ .screen .track {
    transform: translateX(-285%); }
  #carousel-slide-activator-5:checked ~ .screen .track {
    transform: translateX(-380%); }
  #carousel-slide-activator-6:checked ~ .screen .track {
    transform: translateX(-475%); }
  #carousel-slide-activator-7:checked ~ .screen .track {
    transform: translateX(-570%); }
  #carousel-slide-activator-8:checked ~ .screen .track {
    transform: translateX(-665%); }
  #carousel-slide-activator-9:checked ~ .screen .track {
    transform: translateX(-760%); }
  #carousel-slide-activator-10:checked ~ .screen .track {
    transform: translateX(-855%); }
  #carousel-slide-activator-11:checked ~ .screen .track {
    transform: translateX(-950%); }
  #carousel-slide-activator-12:checked ~ .screen .track {
    transform: translateX(-1045%); }
  #carousel-slide-activator-13:checked ~ .screen .track {
    transform: translateX(-1140%); }
  #carousel-slide-activator-14:checked ~ .screen .track {
    transform: translateX(-1235%); }
  #carousel-slide-activator-15:checked ~ .screen .track {
    transform: translateX(-1330%); }
  #carousel-slide-activator-16:checked ~ .screen .track {
    transform: translateX(-1425%); } }

@media screen and (max-width: 768px) {
  .item {
    min-height: 100%;
    height: 620px; }
  .demo-content > div {
    flex-direction: column;
    max-width: 100%;
    width: -webkit-fill-available; }
  .demo-content h2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow-wrap: anywhere; }
  .demo-content img {
    max-height: 240px;
    max-width: 100%;
    width: auto;
    margin: auto;
    margin-bottom: 1rem; }
  .demo-content p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7; } }

@media screen and (max-width: 560px) {
  #events {
    /*border-radius:0;*/ }
  .demo-content {
    padding: 20px 16px; } }

@media screen and (max-width: 425px) {
  .item {
    height: 600px; }
  .demo-content p {
    -webkit-line-clamp: 8; } }

/*# sourceMappingURL=events.css.map */