.map-container {
  display: flex;
  flex-direction: row;
  justify-content: center;

  #map-germany {
    fill: var(--course-color-dark);

    .map__state {
      cursor: pointer;

      &:hover {
        path {
          fill: var(--course-color-medium);
        }
      }
    }
  }
}

#offers-popup {
  #offers-popup-container {
    #offers-popup-title {
      color: var(--course-color-dark);
    }

    #offers-popup-description {
      color: var(--course-color-dark);
    }

    #offers-popup-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 80px;
      margin-bottom: 60px;

      .offers-popup-elem {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 40px;
        padding: 40px 30px;
        align-self: stretch;

        border-radius: 50px;
        border: 3px solid var(--course-color-light);
        box-shadow: $box-shadow-standard;
        background-color: white;

        @media (min-width: $breakpoint_lg) {
          flex-direction: row;
        }

        .offers-popup-elem__info {
          display: flex;
          flex-direction: column;
          gap: 16px;

          .offers-badges {
            display: flex;
            gap: 10px;

            .badge {
              color: var(--course-color-dark);
              background: var(--course-color-light);
            }
          }

          h3 {
            color: var(--course-color-dark);
          }

          .offers-description {
            display: flex;
            flex-direction: column;
            color: $black;
          }

        }

        .offers-popup-elem__action {
          flex-shrink: 0;

          .offers-icons {
            display: flex;
            flex-direction: row;
            gap: 10px;

            span {
              color: $white;
            }
          }
        }
      }

      .offers-popup-list-empty {
        color: $black;
      }
    }
  }
}