@use '../../../abstracts/functions' as fn;
@use '../../../abstracts/flex' as fx;
@use '../../../base/globals' as gb;

.rent {
  background: var(--bg);
  border-radius: fn.rem(23px);
  position: relative;
  z-index: 2;

  &__filters {
    &-title {
      p {
        font-weight: 500;
        font-size: fn.rem(14px);
        line-height: 0.9;
        color: rgba(gb.$color, 0.5);
      }
    }
  }

  &__filter {}

  &__sort {}

  .section__header {
    grid-template-columns: fn.rem(427px) 1fr fn.rem(200px);
    grid-template-areas:
      "subtitle title ."
      "description filters sort";

    .section__subtitle {
      grid-area: subtitle;
    }

    .section__title {
      grid-area: title;
    }

    .section__description {
      grid-area: description;
    }

    .rent__filters {
      grid-area: filters;
      margin-top: auto;
    }

    .rent__sort {
      grid-area: sort;
      margin-top: auto;
      margin-left: auto;
    }
  }
}