.body-wrapper {
  max-width: calc(100vw - 120px);
  margin: 120px auto 112px;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}

.main-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 18px;
  flex: 1;
  width: 100%;
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  min-width: 250px;
  background-color: #fff9f27d;
  border-bottom-right-radius: 18px;
  box-shadow: 4px 4px 7px 1px #3333333b;
  color: #595959;
  letter-spacing: 0.3px;
  position: relative;
}

.card-title {
  font-size: 24px;
  line-height: 1.4;
  display: block;
  margin-bottom: 12px;
}

.card-wrapper::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 2px;
  bottom: 2px;
  width: 4px;
  background-color: #ff7a3da8;
  transition: 0.5s ease;
}

.card-wrapper:hover::before {
  background-color: var(--ast-global-color-0);
}

.card-header {
  margin-bottom: 12px;
}

.card-content {
  flex: 1;
  padding: 0px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text {
  height: 120px;
  max-height: 120px;
  overflow: hidden;
  margin: 0px;
  color: #414141;
}

.text:hover {
  color: #414141;
}

.read-more {
  width: 100%;
  height: 36px;
  background-color: var(--ast-global-color-0);
  margin-bottom: 18px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: 0.3s ease;
  color: #fff !important;
}

.read-more:hover {
  background-color: var(--ast-global-color-1);
}

/* Form */
.filter-wrapper {
  min-width: 200px;
  margin-bottom: 24px;
  flex: 1;
  max-width: 300px;
}

input[type="checkbox"] {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  display: none;
  max-width: 0px;
  max-height: 0px;
}

.checkbox-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.checkbox-item::before {
  content: "";
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #414141;
  border-radius: 4px;
  background-position: center !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
  transition: 0.3s ease;
  transform: translateY(-1px);
}


select {
  width: 100%;
  border: 1px solid #999;
  padding: 12px 8px;
  outline: none;
}

.pagination {
  gap: 12px;
  flex: 1;
  min-width: 100%;
  display: flex;
  justify-content: center;
}

.form-label {
  display: block;
  font-size: 18px;
  margin-bottom: 14px;
}

.no-results-container {
  flex: 1;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-results-container p {
  font-size: 24px;
  font-weight: bold;
}

.search-input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #848484 !important;
  font-size: 14px;
  width: 100%;
}

.search-input:focus {
  background-color: #efefefb9 !important;
}

.checkboxes-wrapper {
  margin-bottom: 24px;
  padding-right: 12px;
  max-height: 350px;
  overflow-y: auto;
}

@media screen and (max-width: 1076px) {
  .body-wrapper {
    max-width: 100%;
    padding: 12px;
    flex-direction: column;
    gap: 48px;
    margin: 60px auto;
  }

  .main-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    justify-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
  }

  .filter-wrapper {
    max-width: 100%;
  }

  .checkboxes-wrapper {
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-right: 0;
    max-height: 350px;
    overflow-y: auto;
  }
}

@media screen and (max-width: 768px) {
  .main-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}