#caixaCards {
  width: 100%;
  padding: 5px 40px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-template-rows: auto;
  justify-items: center;
  gap: 40px;

  .porta-retrato-maior {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9/11;
    padding: 9px;

    color: #fff;
    background-color: #726d59;
    box-shadow:
      10px 10px 50px rgba(0, 0, 0, .5),
      -1px -1px 2px rgba(255, 255, 255, 1);

    cursor: pointer;

    .porta-retrato-medio {
      height: 100%;
      width: 100%;

      border-top: 19px solid rgba(0, 0, 0, .19);
      border-left: 19px solid rgba(0, 0, 0, .15);
      border-right: 19px solid rgba(0, 0, 0, .08);
      border-bottom: 19px solid rgba(0, 0, 0, .05);

      box-shadow:
        -1px -1px 1px rgba(48, 45, 29, 0.6),
        1px 1px 2px #85846bea;

      .porta-retato-menor {
        width: calc(100% - 24px);
        height: calc(100% - 24px);

        margin: 12px;
        padding: 0;
        box-sizing: border-box;

        border-top: 2px solid rgba(0, 0, 0, .3);
        border-left: 2px solid rgba(0, 0, 0, .3);
        border-bottom: 2px solid rgba(0, 0, 0, .1);
        border-right: 2px solid rgba(0, 0, 0, .05);
        background-color: #fff;

        .conteudo {
          width: 100%;
          height: 100%;

          overflow: hidden;
          position: relative;
          background-color: #353535;

          img {
            z-index: 1;

            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(80%) sepia(20%);
            transition: 300ms;
          }

          div {
            z-index: 2;

            height: 90%;
            width: 100%;
            padding-inline: 15px;
            padding-bottom: 25px;

            position: absolute;
            bottom: 0;
            left: 0;

            display: flex;
            align-items: end;
            justify-content: center;

            background: linear-gradient(#00000000, #000000);

            h4 {
              margin: 0;
              text-align: center;
            }
          }

          &:hover {
            img {
              filter: grayscale(0%) sepia(0%);
            }
          }

          &::before {
            z-index: 3;
            content: '';
            position: absolute;
            top: 0;
            left: -90%;

            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.397), transparent);
            transform: skewX(-30deg);
            transition: left 0.5s;
          }

          &:hover::before,
          &:focus::before {
            left: 140%;
            transition: left 0.5s ease-out;
          }
        }
      }
    }
  }
}

@media (max-width: 450px) {
  #caixaCards {
    padding: 5px 10px;
    gap: 25px;

    .porta-retrato-maior {
      width: 280px;
    }
  }
}