.cb-hero-standard {
  display: grid;

  grid-template-columns: 35% 20% 1fr;
  grid-template-rows: 1fr auto;

  &.no-filterbar {
    grid-template-rows: 1fr;
  }

  .wrapper--header {
    grid-column: 1 / 2;
    grid-row: 1;
    z-index: 1;

    display: flex;

    margin-inline-end: 4rem;

    header {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .tagline__wrapper {
        display: flex;
        align-items: center;

        svg {
          margin-inline-end: 0.65rem;
        }

        &.tagline__wrapper--simple {
          .tagline {
            flex-direction: row;

            .line {
              margin-inline-end: 0.4em;
            }

            .text {
              color: var(--color-darkblue--100);
            }
          }
        }

        .tagline {
          flex-direction: row-reverse;

          .line {
            margin-inline-end: 0;
            margin-inline-start: 0.4em;
          }

          .text {
            color: var(--color-blue--100);
          }
        }
      }

      h1 {
        line-height: 1.3125;
      }

      .intro {
        margin-block-start: 0.75rem;
      }
    }
  }

  .wrapper--claim {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    margin-inline-end: 1.75rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .no-filterbar & {
      justify-content: center;
    }

    .claim {
      text-align: center;
      border: solid 1px var(--color-yellow--100);
      background: rgba(245, 245, 245, 0.63);
      backdrop-filter: blur(4px);
      padding: 1.5rem;

      .claim__heading {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.67;
      }

      .claim__text {
        font-size: 0.9375rem;
        line-height: 1.5rem;
      }
    }
  }

  .wrapper--filter-bar {
    grid-column: 1 /3;
    grid-row: 2;
    z-index: 1;

    margin-block-start: 4rem;
    margin-block-end: 2.25rem;

    .filter-bar {
      display: flex;
      justify-content: space-between;
      position: relative;
      background-color: var(--color-white--100);
      padding: 1.9rem 1.9rem 1.9rem 2rem;
      z-index: 1;

      .filters {
        display: flex;
        align-items: center;
        gap: 4rem;
        flex-basis: 100%;
        margin-inline-end: 6rem;

        .filter {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          flex-basis: 50%;

          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
            width: 3rem;
            aspect-ratio: 1 / 1;
            padding: 0.5rem;
            border-radius: 50%;
            background-color: var(--color-grey--100);
          }

          .selection {
            width: 100%;

            .title {
              font-size: 1.25rem;
              font-weight: 700;
              line-height: 1.37;
            }

            .dropdown {
              position: relative;
              width: 100%;

              #datepicker {
                cursor: pointer;
                border: none;
                padding: 0;
                color: var(--color-darkblue--100);

                &:hover {
                  color: var(--color-blue--100);
                }

                &::placeholder {
                  color: currentColor;
                  opacity: 1;
                }
              }

              .dropdown__button {
                position: relative;
                border: none;
                background-color: transparent;
                color: inherit;
                text-align: left;
                padding: 0;

                &:hover {
                  cursor: pointer;
                  color: var(--color-blue--100);
                }
              }

              .dropdown__content {
                display: none;
                position: absolute;
                flex-direction: column;
                box-sizing: content-box;
                width: 100%;
                padding: 1rem;
                background-color: var(--color-white--100);
                border-radius: 20px;
                z-index: 1;

                &.active {
                  display: flex;
                }

                .filter__search {
                  background-color: var(--color-grey--100);
                  border: solid 1px var(--color-black--100);
                  padding: 0.25em 0.5em;
                }

                .selection__item {
                  cursor: pointer;
                  margin-block-end: 0.5em;

                  &:last-child {
                    margin-block-end: 0;
                  }

                  &:hover {
                    color: var(--color-blue--100);
                  }
                }
              }
            }
          }
        }
      }

      .cb-btn--primary {
        height: 100%;
        flex-basis: 28%;
      }
    }
  }

  .wrapper--gallery {
    grid-column: 2 / 4;
    grid-row: 1 / 3;

    display: flex;
    justify-content: flex-end;
    overflow: hidden;

    .image-grid {
      transform: translateX(5%);
    }
  }
}

#ui-datepicker-div.ui-datepicker {
  padding: 16px;
  border-radius: 32px;
  background-color: var(--color-grey--100);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);

  td {
    a {
      border: none;
      background: transparent;
      text-align: center;
      color: var(--color-darkgrey--100);
    }

    &.unavailable {
      pointer-events: none;
    }
    &.available a {
      color: var(--color-darkblue--100);
      font-weight: 700;
    }
  }

  .ui-datepicker-prev {
    cursor: pointer;
    border: 1px solid transparent;

    span {
      background-position: 0;
      background-size: cover;
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="800px" height="800px" viewBox="-5 0 24 24" version="1.1"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"%3E%3Cg id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-421.000000, -1195.000000)" fill="%23000000"%3E%3Cpath d="M423.429,1206.98 L434.686,1196.7 C435.079,1196.31 435.079,1195.67 434.686,1195.28 C434.293,1194.89 433.655,1194.89 433.263,1195.28 L421.282,1206.22 C421.073,1206.43 420.983,1206.71 420.998,1206.98 C420.983,1207.26 421.073,1207.54 421.282,1207.75 L433.263,1218.69 C433.655,1219.08 434.293,1219.08 434.686,1218.69 C435.079,1218.29 435.079,1217.66 434.686,1217.27 L423.429,1206.98" id="chevron-left" sketch:type="MSShapeGroup"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }
  }

  .ui-datepicker-next {
    cursor: pointer;
    border: 1px solid transparent;

    span {
      background-position: 0;
      background-size: cover;
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="800px" height="800px" viewBox="-5 0 24 24" version="1.1"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"%3E%3Cg id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-473.000000, -1195.000000)" fill="%23000000"%3E%3Cpath d="M486.717,1206.22 L474.71,1195.28 C474.316,1194.89 473.678,1194.89 473.283,1195.28 C472.89,1195.67 472.89,1196.31 473.283,1196.7 L484.566,1206.98 L473.283,1217.27 C472.89,1217.66 472.89,1218.29 473.283,1218.69 C473.678,1219.08 474.316,1219.08 474.71,1218.69 L486.717,1207.75 C486.927,1207.54 487.017,1207.26 487.003,1206.98 C487.017,1206.71 486.927,1206.43 486.717,1206.22" id="chevron-right" sketch:type="MSShapeGroup"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }
  }
}

/* TABLET */
@media only screen and (max-width: 1024px) {
  .cb-hero-standard.cb-hero-standard.cb-fullbleed--right {
    margin-inline-start: 1rem;
  }
  .cb-hero-standard {
    padding-block-end: 7px;

    .image-grid {
      grid-template-columns: repeat(6, 4.4rem);
      grid-template-rows: repeat(8, 2.8rem);
    }

    .wrapper--filter-bar {
      .filter-bar {
        flex-direction: column;

        .filters {
          margin-inline-end: 0;

          .filter {
            gap: 1rem;
          }
        }

        .cb-btn--primary {
          margin-block-start: 3rem;
        }
      }
    }
  }
}

/* MOBILE */
@media only screen and (max-width: 767px) {
  .cb-hero-standard.cb-hero-standard.cb-fullbleed--right {
    margin-inline-start: 0;
  }

  .cb-hero-standard {
    display: flex;
    flex-direction: column;

    .wrapper--header {
      order: 1;
      margin-inline: var(--width-gutter);
    }

    .wrapper--claim {
      order: 3;
      margin-inline: 3.75rem;
      margin-block-start: -1rem;
    }

    .wrapper--filter-bar {
      order: 4;
      margin-inline: 2.5rem;
      margin-block-start: 1.75rem;
      margin-block-end: 0;

      .filter-bar {
        display: flex;
        flex-direction: column;
        align-items: center;

        .filters {
          flex-direction: column;
          gap: 3rem;
        }
      }
    }

    .wrapper--gallery {
      order: 2;

      .image-grid__img--0 {
        grid-column: 4 / 7;
      }
      .image-grid__img--1 {
        grid-column: 4 / 7;
      }
      .image-grid__img--2 {
        grid-column: 1 / 4;
      }
    }
  }
}

/* Grid Sizing Adjustments for very large screens */
@media only screen and (min-width: 2000px) {
  .cb-hero-standard.cb-fullbleed--right {
    grid-column: 3 / 5 !important; /* halfbleed right */
  }
}