.filter-container {
  width: min(95vw, 90rem);
  margin: min(2rem, 2vw) auto;

  display: flex;
  justify-content: space-between;
  gap: min(3rem, 2vw);
}

.filter__search {
  width: 100%;

  border: 1px solid gray;

  padding-inline: min(1rem, 2vw);
  border-radius: min(0.75rem, 1.5vw);
}

.filter__search:focus {
  outline: 2px solid var(--accent-clr);
}

.filter__buttons {
  display: flex;
  align-items: center;
  gap: clamp(1px, 0.2vw, 2px);
}

.filter__buttons > button {
  width: min(12rem, 16vw);

  padding: min(1rem, 2vw);

  font-size: min(1.25rem, 3.75vw);
  font-family: Roboto, sans-serif;

  text-transform: uppercase;
  font-weight: 700;
  color: var(--whitesmoke);
  background-color: var(--accent-clr);
  border: none;

  transition: background-color 0.3s ease-in-out;
}

.filter__buttons > button[data-filter="false"] {
  background-color: var(--accent-clr);
}

.filter__buttons > button[data-filter="true"] {
  background-color: var(--secondary-clr);
}

.filter__info-btn {
  border-radius: min(0.75rem, 1.5vw) 0 0 min(0.75rem, 1.5vw);
}

.filter__news-btn {
  border-radius: 0 min(0.75rem, 1.5vw) min(0.75rem, 1.5vw) 0;
}

.posts {
  margin: min(2rem, 4vw);

  display: grid;
  grid-template-columns: min(95vw, 90rem);
  justify-content: center;
  gap: min(1.5rem, 3vw);
}

.post {
  border: solid 1px lightgrey;
  border-radius: min(1rem, 3vw);

  box-shadow: min(0.5rem, 1vw) min(0.375rem, 0.75vw) min(0.75rem, 1.5vw) gray;

  overflow: hidden;

  background-color: white;

  transition: opacity 0.2s ease-in-out;
}

.post__image {
  max-height: 15rem;
  width: 15rem;
  height: 100%;
  object-fit: cover;

  margin-right: 1rem;

  /* wrap text around image */
  float: left;

  filter: brightness(50%);

  /* animations for changing brightness for image */
  -webkit-transition: filter 0.3s ease-in-out;
  -moz-transition: filter 0.3s ease-in-out;
  -ms-transition: filter 0.3s ease-in-out;
  -o-transition: filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out;
}

.post__image:hover,
.post__image:focus {
  filter: brightness(100%);
}

.post__content-wrapper {
  margin: 2rem 1rem 0.375rem 1rem;
}

.post__row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.post__title {
  letter-spacing: 0.75px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.white-space {
  /* show whole title when post expanded */
  white-space: normal;
}

.post__tag {
  white-space: nowrap;
  font-family: "Simply Rounded Regular", sans-serif;
}

.post__tag > a {
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Simply Rounded Regular", sans-serif;
}

.post__text {
  min-height: 7rem;
  max-height: 7rem;

  margin: 1rem 0;

  overflow: hidden;

  text-align: justify;
  white-space: pre-wrap;

  /* animations for expanding the text */
  -webkit-transition: max-height 0.7s ease-in-out;
  -moz-transition: max-height 0.7s ease-in-out;
  -ms-transition: max-height 0.7s ease-in-out;
  -o-transition: max-height 0.7s ease-in-out;
  transition: max-height 0.7s ease-in-out;
}

.overflow {
  /* required for wrapping the text around image */
  overflow: visible;
}

.post__date {
  color: var(--accent-clr);
}

.post__button {
  max-height: 1.5em;
  /* aspect-ratio: 1; */
  cursor: pointer;
  color: var(--accent-clr);

  /* animations for rotation of button */
  -webkit-transition: transform 0.5s ease-in-out;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

@media only screen and (max-width: 550px) {
  .post__content-wrapper {
    margin: min(2rem, 3vw) min(1rem, 3vw) min(0.375rem, 1.25vw) min(1rem, 3vw);
  }

  .post__image {
    width: 100%;
    max-height: 25vw;
    margin-right: 0;
    float: none;
  }

  .post__text {
    min-height: 0;
    max-height: 20vw;
  }
}