@import '../../../styles/settings.scss';


.concert {
  position: relative;
  overflow: hidden;
  background: $color-text-light;
  color: $color-text-bright;

  &__image-container {
    width: 100%;
    height: 400px;
    overflow: hidden;

    &__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .5s;
      z-index: 2;
      position: relative;
    }
  
  }

  &__info {
    margin: 2rem;

    &__back {
      position: absolute;
      opacity: 0.4;
      top: 0;
      left: 0;
      -webkit-filter: grayscale(0.5) blur(2px);
    }

    &__performer {
      position: relative;
      z-index: 2;
    }

    &__genre {
      position: relative;
      z-index: 2;
    }

    &__day-n-price {
      position: relative;
      z-index: 2;
      margin: 0.5rem;
      position: absolute;
      bottom: 1rem;
      left: 1.5rem;
    }
  
  }

  &:nth-of-type(2n) .row {

    color: $color-text-bright;
  
    > div:first-child {
      order: 2;
    }
  
    > div:second-child {
      order: 1;
    }
  }

  &:hover .concert__image-container__img {
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {

  .concert__info__performer {
    font-size: 1.8rem;
    margin: 0.5rem;
  }

  .concert__info__genre {
    font-size: 1.5rem;
    opacity: 0.7;
  }
}