.host-card {
  background: #fff;
  padding: 16px 16px 32px 16px;
  gap: 17.71px;
  display: flex;
  flex-direction: column;
  border-radius: 19.326px;
  box-shadow: 0px 4px 22.7px 0px rgba(145, 145, 145, 0.25);
  max-width: 302.829px;
  min-width: 302.829px;
  min-height: 469.297px;
  position: relative;
  margin-inline: auto;

  .tag {
    all: unset;
    position: absolute;
    right: -18.407px;
    top: -15.013px;
    z-index: 2;
  }
  .host-img-wrapper {
    width: 100%;
    height: 265.64px;
    border-radius: 14.494px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .details {
    h2 {
      margin-top: 0px;
      margin-bottom: 14.17px;
      color: var(--black, #212121) !important;
      font-family: Raleway;
      font-size: 17.709px !important;
      font-style: normal;
      font-weight: 700 !important;
      line-height: 27.449px !important;
    }
  }
  .details ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    li {
      color: #818181;

      font-family: Raleway;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 150% */

      display: flex;
      column-gap: 17px;
      align-items: center;

      .label {
        all: unset;
        flex-basis: 42%;

        color: #818181;
        font-family: Raleway;
        font-size: 14.167px;
        font-style: normal;
        font-weight: 400;
        line-height: 21.251px; /* 150% */
      }

      .value {
        flex-basis: 70%;

        color: #000;
        font-family: Raleway;
        font-size: 14.167px;
        font-style: normal;
        font-weight: 700;
        line-height: 17.709px; /* 125% */
      }
    }
  }
}

.guest-card {
  background: #fff;
  padding: 14.167px 14.167px 28.335px 14.167px;
  gap: 17.71px;
  display: flex;
  flex-direction: column;
  border-radius: 19.326px;
  box-shadow: 0px 4px 22.7px 0px rgba(145, 145, 145, 0.25);
  /* max-width: 302.829px; */
  min-height: 469.297px;
  width: 100%;
  /* min-width: 302.829px; */
  position: relative;
  margin-inline: auto;
  margin: 20px;

  .tag {
    all: unset;
    position: absolute;
    right: -20px;
    top: -13.418px;
    z-index: 2;
    width: 190px;
  }
  .host-img-wrapper {
    width: 100%;
    height: 265.64px;
    border-radius: 14.494px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .details {
    h2 {
      margin-top: 0px;
      margin-bottom: 14.17px;
      color: var(--black, #212121) !important;
      font-family: Raleway;
      font-size: 17.709px !important;
      font-style: normal;
      font-weight: 700 !important;
      line-height: 27.449px !important;
    }
  }
  .details ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14.71px;
    li {
      color: #818181;

      font-family: Raleway;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 150% */

      display: flex;
      column-gap: 17px;
      align-items: center;

      .label {
        all: unset;
        flex-basis: 42%;

        color: #818181;
        font-family: Raleway;
        font-size: 14.167px;
        font-style: normal;
        font-weight: 400;
        line-height: 21.251px; /* 150% */
      }

      .value {
        flex-basis: 70%;

        color: #000;
        font-family: Raleway;
        font-size: 14.167px;
        font-style: normal;
        font-weight: 700;
        line-height: 17.709px; /* 125% */
      }
    }
  }
}

@media screen and (max-width: 360px) {
  .host-card {
    min-width: auto;
  }
  .guest-card {
    min-width: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .guest-card {
    max-width: 302.829px;
    min-height: 469.297px;
    width: 100%;
    min-width: 302.829px;
    margin-inline: auto;
  }
}