/*
 * The nearest event component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

@media screen and (max-width:1199px) {

  .main-about__heading-event-card {
    border-width:3px;
    flex-direction:column;
    margin-bottom:10px;
    width:calc(var(--grid-column-width)*3.25 + var(--grid-gap)*2.25);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-event-card {
    flex-direction:row;
    width:100%;
  }
}

.main-about__heading-event-card-text {
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:119px;
  justify-content:space-between;
}

@media screen and (max-width:1440px) {

  .main-about__heading-event-card-text {
    gap:71px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__heading-event-card-text {
    gap:49px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-event-card-text {
    gap:56px;
  }
}

.main-about__heading-event-card-text-title {
  margin-left:24px;
  margin-top:23px;
}

@media screen and (max-width:1440px) {

  .main-about__heading-event-card-text-title {
    margin-left:16px;
    margin-top:15px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-event-card-text-title {
    margin-left:12px;
    margin-top:12px;
  }
}

.main-about__heading-event-card-image {
  height:100%;
  position:absolute;
  right:0;
  transform-origin:bottom right;
  transition:transform .3s ease-in-out;
  width:calc(var(--grid-column-width)*2.5 + var(--grid-gap)*1.5);
  z-index:1;
}

@media screen and (max-width:1199px) {

  .main-about__heading-event-card-image {
    aspect-ratio:1.4539007092;
    position:static;
    transform-origin:top left;
    width:100%;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-event-card-image {
    height:100%;
    position:absolute;
    right:0;
    transform-origin:bottom right;
    width:calc(var(--grid-column-width)*11 + var(--grid-gap)*10);
    z-index:1;
  }
}

.main-about__heading-event-card-info {
  background-color:#e1251b;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:9px 27px 20px;
  position:relative;
  z-index:2;
}

@media screen and (max-width:1440px) {

  .main-about__heading-event-card-info {
    gap:4px;
    padding:10px 16px;
  }
}

@media screen and (max-width:1199px) {

  .main-about__heading-event-card-info {
    gap:2px;
    padding:11px 16px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-event-card-info {
    padding:8px 12px;
  }
}

.main-about__heading-event-card-info-text {
  align-items:center;
  display:flex;
  gap:4px;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-about__heading-event-card-info-text {
    font-size:12px;
  }
}