/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/postcss-loader/dist/cjs.js!./src/styles/section/areas.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
/*images*/
.areas__section .section__header {
    margin-bottom: 2rem; }
  
  .areas__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 2rem; }
    @media only screen and (max-width: 991px) {
      .areas__list {
        grid-template-columns: repeat(3, 1fr); } }
    @media only screen and (max-width: 767px) {
      .areas__list {
        gap: 16px 20px;
        grid-template-columns: repeat(2, 1fr); } }
  
  .areas__item {
    height: 21.875rem;
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    color: var(--color-white); }
    .areas__item picture {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0; }
      .areas__item picture img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover; }
    .areas__item:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 4, 4, 0)), to(#040404));
      background: linear-gradient(180deg, rgba(4, 4, 4, 0) 0%, #040404 100%);
      z-index: 1;
      opacity: 0;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out; }
    .areas__item > * {
      position: relative;
      z-index: 2; }
    .areas__item:hover:before {
      opacity: 1; }
    .areas__item:hover .areas__price, .areas__item:hover .areas__counter {
      opacity: 1; }
    @media only screen and (max-width: 767px) {
      .areas__item {
        height: auto;
        aspect-ratio: 1/1;
        padding: 4px; }
        .areas__item .areas__price {
          display: none; }
        .areas__item .areas__country {
          position: relative;
          padding: 6px 38px 6px 8px; }
          .areas__item .areas__country img {
            display: block;
            position: absolute;
            z-index: 2;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            right: 8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            -o-object-fit: cover;
            object-fit: cover; }
          .areas__item .areas__country div {
            font-size: 12px; }
          .areas__item .areas__country p {
            font-size: 12px; } }
  
  .areas__counter {
    font-size: 0.875rem;
    opacity: 0;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
    .areas__counter span {
      font-weight: bold; }
  
  .areas__price {
    gap: 1rem;
    margin-bottom: 1rem;
    opacity: 0;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
  
  .areas__country {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 1rem; }
    .areas__country img {
      display: none; }
    .areas__country:before {
      border-radius: 0.5rem;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: #1010106B;
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      z-index: 1; }
    .areas__country p {
      font-size: 0.875rem;
      color: #CCCCCC;
      margin-bottom: 0.25rem;
      position: relative;
      z-index: 2; }
    .areas__country div {
      font-size: 1.25rem;
      line-height: 140%;
      position: relative;
      z-index: 2; }
  
  .filter__inner {
    position: relative; }
  
  .filter__curr {
    display: none; }
    @media only screen and (max-width: 991px) {
      .filter__curr {
        display: block;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
        background-color: #FAFAFA;
        padding: 14px 46px 14px 16px;
        position: relative;
        font-size: 14px;
        max-width: 400px;
        margin-bottom: 16px; }
        .filter__curr > .icon {
          width: 12px;
          height: 12px;
          position: absolute;
          right: 16px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); } }
  
  .filter__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    margin-bottom: 1.5rem; }
    .filter__list li button {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.6875rem 1.5rem;
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 160%;
      color: var(--color-text);
      background-color: var(--color-white);
      border: 1px solid var(--color-gray40);
      border-radius: 0.5rem;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out; }
      .filter__list li button .icon {
        width: 1.25rem;
        height: 1.25rem; }
      .filter__list li button.active {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary); }
    @media only screen and (max-width: 991px) {
      .filter__list {
        display: none;
        position: absolute;
        top: 100%;
        max-width: 400px;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        z-index: 10;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
        background-color: #FAFAFA; }
        .filter__list li {
          width: 100%; }
          .filter__list li button {
            width: 100%;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            border: none;
            background-color: transparent; }
            .filter__list li button .icon {
              display: none; } }
  
  .price__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  
  .price__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 140%;
    color: #FFFFFFA3; }
    .price__label .icon {
      width: 20px;
      height: 20px; }
  
  .price__dots {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 0.625rem;
    margin: 0 0.5rem;
    border-bottom: 1px dashed #FFFFFFA3; }
  
  .price__value {
    font-weight: 700;
    font-size: 1rem;
    line-height: 160%; }
  
  
  /*# sourceMappingURL=section-areas.css.map*/