#popular-phrases {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; }
  #popular-phrases .preview:hover {
    transform: scale(1.02);
    border-color: blue;
    color: blue !important; }
    #popular-phrases .preview:hover .preview-boinfo, #popular-phrases .preview:hover figcaption, #popular-phrases .preview:hover .preview-toptext {
      color: blue !important; }

.preview {
  border: 1px solid black;
  border-radius: 5px;
  padding: 15px;
  margin: 15px;
  width: 525px;
  min-width: min(525px, 85vw);
  max-width: min(525px, 85vw);
  aspect-ratio: 3.5 / 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  .preview .italicized {
    font-style: italic; }
  .preview > div {
    flex-basis: 50%; }
  .preview figcaption {
    margin-top: -15px; }
  .preview img {
    margin-top: 30px;
    max-height: 200px;
    border: none;
    box-shadow: none; }
  .preview img:hover {
    transform: none;
    box-shadow: none; }
  .preview .preview-boinfo {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #999; }
  .preview .preview-toptext {
    position: absolute;
    top: 15px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: #999;
    text-transform: uppercase; }

#popular-phrases > div {
  cursor: pointer; }

@media (max-width: 1024px) {
  .preview img {
    max-height: 85px !important; }

  .preview-text {
    line-height: 1;
    font-size: 1em; }

  .preview-boinfo {
    font-size: 0.8em;
    bottom: 5px !important; }

  .preview-toptext {
    font-size: 0.8em; } }

/*# sourceMappingURL=style.css.map */