.event {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 1rem;
}
.event__ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1rem;
}
.event__date {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.event__ttl {
  display: inline-block;
  line-height: normal;
  color: var(--green);
}

.event__img {
  height: 50vh;
  /*height: 100%;*/
  /*aspect-ratio: 1.4;*/
  object-fit: cover;
  border-radius: 1rem;
  overflow: hidden;

  /* background-color: var(--pink-20); */
  /* position: relative;
    background-position: center center;
    background-size: cover;
    text-align: center; */
}
/* .event__img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pink-20);
    transition: 0.3s;
} */

.event-li {
  /* position: relative; */
  width: 45%;
  min-width: 300px;
  /* max-height: 100vh; */
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  border-radius: 1rem;
  /* overflow: hidden;
    background-position: center center;
    background-size: cover;*/
  text-align: center;
  color: var(--green);
  border: 2px solid var(--pink);
  background-color: var(--pink-20);

  /* transition: 0.3s; */
}

/* .event-li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pink-20);
    transition: 0.3s;
} */

.event__container {
  padding: 2rem;
  /*background: var(--pink-20);*/
  /* transform: translateY(206px); */
  transition: 0.3s;
}

.event__ttle {
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--green);
  font-weight: bold;
}

.event__ttle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.125rem;
  width: 3rem;
  margin: auto;
  background: var(--green-dark);
}

.event-date__end {
  font-size: 0.8rem;
}

.event-date__ul {
  display: flex;
  flex-direction: row;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0;
}

.event-date__li {
  flex: 1 0;
  padding: 1rem;
  background: var(--white);
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event-date__li::after {
  position: absolute;
  top: 0;
  padding-top: 0.5rem;
}
.event-date__li--start::after {
  content: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_365_64)"><path d="M30 2.99651L21.993 2.99654V1.00354C21.993 0.45104 21.5455 0.00354004 20.993 0.00354004C20.4405 0.00354004 19.993 0.45104 19.993 1.00354V2.99604H11.993V1.00354C11.993 0.45104 11.5455 0.00354004 10.993 0.00354004C10.4405 0.00354004 9.993 0.45104 9.993 1.00354V2.99604H2C0.8955 2.99604 0 3.89154 0 4.99604V29.996C0 31.1005 0.8955 31.996 2 31.996H30C31.1045 31.996 32 31.1005 32 29.996V4.99604C32 3.89201 31.1045 2.99651 30 2.99651ZM30 29.996H2V4.99604H9.993V6.00354C9.993 6.55601 10.4405 7.00354 10.993 7.00354C11.5455 7.00354 11.993 6.55601 11.993 6.00354V4.99654H19.993V6.00404C19.993 6.55654 20.4405 7.00404 20.993 7.00404C21.5455 7.00404 21.993 6.55654 21.993 6.00404V4.99654H30V29.996ZM23 15.9965H25C25.552 15.9965 26 15.5485 26 14.9965V12.9965C26 12.4445 25.552 11.9965 25 11.9965H23C22.448 11.9965 22 12.4445 22 12.9965V14.9965C22 15.5485 22.448 15.9965 23 15.9965ZM23 23.996H25C25.552 23.996 26 23.5485 26 22.996V20.996C26 20.444 25.552 19.996 25 19.996H23C22.448 19.996 22 20.444 22 20.996V22.996C22 23.549 22.448 23.996 23 23.996ZM17 19.996H15C14.448 19.996 14 20.444 14 20.996V22.996C14 23.5485 14.448 23.996 15 23.996H17C17.552 23.996 18 23.5485 18 22.996V20.996C18 20.4445 17.552 19.996 17 19.996ZM17 11.9965H15C14.448 11.9965 14 12.4445 14 12.9965V14.9965C14 15.5485 14.448 15.9965 15 15.9965H17C17.552 15.9965 18 15.5485 18 14.9965V12.9965C18 12.444 17.552 11.9965 17 11.9965ZM9 11.9965H7C6.448 11.9965 6 12.4445 6 12.9965V14.9965C6 15.5485 6.448 15.9965 7 15.9965H9C9.552 15.9965 10 15.5485 10 14.9965V12.9965C10 12.444 9.552 11.9965 9 11.9965ZM9 19.996H7C6.448 19.996 6 20.444 6 20.996V22.996C6 23.5485 6.448 23.996 7 23.996H9C9.552 23.996 10 23.5485 10 22.996V20.996C10 20.4445 9.552 19.996 9 19.996Z" fill="black"/></g><defs><clipPath id="clip0_365_64"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>');
}
.event-date__li--adress::after {
  content: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_367_64)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 15C14.343 15 13 13.657 13 12C13 10.343 14.343 9 16 9C17.657 9 19 10.343 19 12C19 13.657 17.657 15 16 15ZM16 7C13.239 7 11 9.238 11 12C11 14.762 13.239 17 16 17C18.761 17 21 14.762 21 12C21 9.238 18.761 7 16 7ZM16 29C14.337 29.009 6 16.181 6 12C6 6.478 10.477 2 16 2C21.523 2 26 6.478 26 12C26 16.125 17.637 29.009 16 29ZM16 0C9.373 0 4 5.373 4 12C4 17.018 14.005 32.011 16 32C17.964 32.011 28 16.95 28 12C28 5.373 22.627 0 16 0Z" fill="black"/></g><defs><clipPath id="clip0_367_64"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>');
}
.event-date__start {
  margin-top: 2rem;
  color: var(--red);
}

.event-adress {
  margin-top: 2rem;
  color: var(--green);
}

.event-date__description {
  margin: 1rem 0;
  font-size: 0.8rem;
  color: var(--green-dark);
}

.more-information {
  opacity: 0;
  transition: 0.3s;
}

.event-li:hover::before {
  background: var(--pink-20);
}

.event-li:hover .book-container .content {
  opacity: 1;
  transform: translateY(0px);
}

.event-li:hover .event__container {
  transform: translateY(0px);
}

.event-li:hover .event__container .more-information {
  opacity: 1;
}

@media (max-width: 768px) {
  /* .event-li::before {
        background: rgba(10, 72, 112, 0.6);
    } */

  .event-li .book-container .content {
    opacity: 1;
    transform: translateY(0px);
  }

  .event-li .event__container {
    transform: translateY(0px);
  }

  .event-li .event__container .more-information {
    opacity: 1;
  }
}

.event-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.event-tab {
  font-size: 1rem;
  display: block;
  padding: 0.5rem;
  box-shadow: 0px 5px 5px var(--green-10);
}
.event-tab.active {
  background: var(--green);
  color: var(--white);
}

.event-year {
  display: none;
}

.event-year.active {
  display: block;
}
.event__year {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--green-dark);
  text-decoration: underline;
}

.event__month {
  font-size: 1.5rem;
  margin-top: 2rem;
  font-weight: bold;
  text-decoration: underline;
}