.block_top_event_default1 {
  font-family: "Nunito", sans-serif;
  .title{
    margin-bottom: 52px;
    p{
      font-style: normal;
      font-weight: 600;
      font-size: 20px;
      line-height: 32px;
      text-align: center;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #666666;
    }
    h1{
      font-style: normal;
      font-weight: bold;
      font-size: 39px;
      line-height: 56px;
      text-align: center;
      letter-spacing: 0.05em;
      text-transform: capitalize;
      color: #555555;

    }
  }
  .link{
    display: flex;
    justify-content: center;
    p{
      margin: 0px 10px;
      background: #E6E6E6;
      border-radius: 10px;
      font-style: normal;
      font-weight: 600;
      font-size: 24px;
      line-height: 24px;
      letter-spacing: 0.02em;
      text-transform: capitalize;
      color: #555555;
      padding: 13px 30px;
      cursor: pointer;
      @media screen and(max-width: 768px){
        font-size: 20px;
        padding: 13px 20px;
      }
      @media screen and(max-width: 576px){
        font-size: 16px;
        padding: 13px 10px;
        text-align: center;
      }

    }
    p.active{
      background: #FFFFFF;
      box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
      color: #FB646F;
    }
  }
  .list-event-newest , .list-event-best, .list-event-top{
    margin-top: 45px;
    .each-event{
      height: 449px;
      position: relative;
      margin-bottom: 30px;
      transition: all 0.3s;
      .image{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
          border-radius: 10px;
          object-position: center;
          object-fit: cover;
        }
      }
      .coating{
        width: 100%;
        height: 100%;
        background: linear-gradient(219.49deg, rgba(17, 19, 19, 0.3) 0%, #0A0A0A 100%);
        border-radius: 10px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .link{
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #FFFFFF;
        opacity: 0;
        z-index: 998;
        top: 0;
        left: 0;
      }
      .date-open{
        position: absolute;
        top: 20px;
        left: 15px;
        display: inline-grid;
        .day{
          font-style: normal;
          font-weight: bold;
          font-size: 48px;
          line-height: 65px;
          color: #F3F3F3;
        }
        .month{
          font-style: normal;
          font-weight: 600;
          font-size: 18px;
          line-height: 25px;
          color: #F3F3F3;
          margin-top: -6px;
        }
      }
      .name-event{
        position: absolute;
        top: 130px;
        left: 15px;
        right: 18px;
        z-index: 999;
        a{
          font-style: normal;
          font-weight: 900;
          font-size: 28px;
          line-height: 38px;
          letter-spacing: 0.02em;
          text-transform: uppercase;
          color: #FFFFFF;
          transition: all 0.3s;
          &:hover{
            color:#FB646F ;
          }
        }
      }
      .hour-location{
        position: absolute;
        bottom: 20px;
        left: 15px;
        right: 52px;
        .hour,.location{
          i{
            color: #F3F3F3;
            font-size: 15px;
          }
          span{
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.02em;
            color: #F3F3F3;
          }
        }
      }
      &:hover{
        .coating{
          background: #625F5F;
          opacity: 0.8;
        }
      }
    }

  }
}