/* Conteúdo Receitas e Dietas */
:root {
  --page-m-width: 1200px;

  /* fonts */
  --fs-40: 40px;
  --fs-32: 32px;
  --fs-24: 24px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;

  /* Spacing */
  --size-42: 42px;
  --size-24: 24px;
  --size-16: 16px;
  --size-12: 12px;
  --size-8: 8px;

  /* border */
  --br-6: 6px;
  --b-default: 1px solid var(--color-licorice);
  --b-shadow-default: 0 0 10px rgba(0, 0, 0.1, 0.2);

  /* Colors */
  --color-licorice: #2a1a1f;
  --color-feldgrau: #3b5249;
  --color-yellow-green: #a1c643;
  --color-white: #fffdfd;
  --color-coral: #fa824c;
}

/* geral */
.btn{
  padding: var(--size-8) var(--size-16);
  border-radius: var(--br-6);
  background-color: var(--color-white);
  border: var(--b-default);

  display: flex;
  cursor: pointer;
}

/* page */
.content,
.filters,
.filters > div,
.infos,
.info,
.pagination {
  display: flex;
}

.content {
  min-height: calc(100dvh - 500px);
  max-width: var(--page-m-width);
  margin: 0 auto;
  width: 100%;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: var(--size-42);
  color: var(--color-licorice);
}

.page-title {
  margin-top: var(--size-42);
  font-weight: 600;
  
  font-size: var(--fs-32);
}

/* filters */
.filters{
  gap: var(--size-24);
  flex-direction: column;
}

.filters > div{
  width: 100%;
}

.filters > div:first-child{
  gap: var(--size-24);

  flex-wrap: wrap;
}

.filters > div:first-child button{
  border-radius: 50px; /* valor grande arbitrário*/
}

/* .filters .btn{
  width: fit-content;
} */

.search > input {
  width: 100%;
  border: var(--b-default);
  padding: var(--size-8) var(--size-16);
  border-radius: var(--br-6) 0 0 var(--br-6);
}

.search > .btn {
  border-radius: 0 var(--br-6) var(--br-6) 0;
  border-left: 0;
}

.btn.search > img, .btn.left > img, .btn.rigth > img{
  width: 20px;
}

/* infos */
.infos{
  gap: var(--size-24);
  flex-direction: column;
}

.info {
  border: var(--b-default);
  border-radius: var(--br-6);

  flex-direction: column;
}

.info .img {
  width: 100%;
  background-size: cover;
  background-position: center;

  height: 239px;
  border-radius: var(--br-6) var(--br-6) 0 0;
}

/* .info:nth-child(1) .img {
  background-image: url('https://www.hojetemfrango.com.br/wp-content/uploads/2019/03/shutterstock_553403317.jpg');
}

.info:nth-child(2) .img{
  background-image: url('https://essareceitafunciona.com.br/storage/2023/04/Como-fazer-feijao-preto-Essa-Receita-Funciona-8.jpg');
}

.info:nth-child(3) .img{
  background-image: url('https://vitat.com.br/receitas/images/recipeshandler.jpg?id=29390&tipo=r&default=s');
} */

.info .text, .info .text div{
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
}

.info .text{
  padding: var(--size-42);
}

.text h3{
  font-size: var(--fs-16);
}

.text div{
  justify-content: space-between;
  height: 100%;

}

.text div p:last-child{
  align-self: end;
  color: #fa824c;
}

.pagination{
  margin: var(--size-24) 0;
  justify-content: end;
  gap: var(--size-24);
  align-items: center;
}

@media screen and (min-width: 768px) {
  .info {
    flex-direction: row;
    height: 239px;
  }

  .info .img{
    width: 350px;
    height: 100%;
    border-radius: var(--br-6) 0 0 var(--br-6);
  }

  .info .text{
    flex:1;
  }
}

@media screen and (min-width: 1024px) {
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.pagination-wrapper .pagination-button {
  display: flex;
  padding: 0.5rem 0.75rem;
  background-color: #0000001e;
  border-radius: 0.5rem;
  cursor: pointer;
}

.pagination-wrapper .pagination-button:hover {
  background-color: #e2ebcbe0;
}