@charset "utf-8";

/* Targets the global page sidebar element; intentionally broad */
aside {
  border-radius: 4px;
  flex-direction: column;
  height: 100%;
  width: calc(25% - 1rem);

  & .ad {
    align-items: center;
    background: var(--color-9);
    border-radius: 4px;
    box-shadow: var(--float-close);
    color: #f2f2f2;
    flex-direction: column;
    min-height: 200px;
    padding: 2rem;
    width: 100%;

    &:not(:last-of-type) {
      margin-bottom: 1rem;
    }

    &:nth-of-type(2) {
      background-color: var(--color-6);
    }

    &:nth-of-type(3) {
      background-color: var(--color-7);
    }

    & img {
      margin: 2rem 0;
      object-fit: contain;
      width: 100%;
    }

    & [src*="foia"],
    & [src*="icon"] {
      padding: 0 3rem;
    }

    & .ad-info {
      align-items: center;
      border: 1px solid var(--compare);
      border-radius: var(--circle);
      cursor: pointer;
      font-size: 14px;
      padding: 1rem;

      &::after {
        content: ">>";
        margin-left: 1rem;
      }
    }
  }
}

.ad-profile {
  background: var(--compare-less);
  border-radius: .25rem;
  height: 70vh;
  width: 100%;

  & img {
    border-radius: .5rem;
    -webkit-filter: drop-shadow(-18px 18px 16px #3333335c);
    filter: drop-shadow(-18px 18px 16px #3333335c);
    height: 50%;
    max-width: 150%;
    object-fit: cover;
    -webkit-transform: translateX(-50%) translateY(6rem);
    transform: translateX(-50%) translateY(6rem);
  }
}

.ad .date {
  align-items: center;
  background: var(--contrast);
  border-radius: .25rem;
  flex-direction: column;
  justify-content: center;
  letter-spacing: .02rem;
  margin: 1rem 0 2rem;
  padding: 1rem;
  text-transform: uppercase;
  width: 100%;

  & strong {
    font-size: 4rem;
    letter-spacing: unset;
  }
}

.ad-info:hover {
  background: var(--contrast);
}

.ad .title {
  font-size: 2rem;
  font-weight: 200;
  margin-top: 1rem;
}

@media screen and (max-width: 480px) {
  aside .ad {
    align-items: center;
    min-height: 7rem;
  }

  aside .ad-profile img {
    max-width: 100%;
    -webkit-transform: none;
    transform: none;
  }

  .ad-profile {
    align-items: center;
    height: unset;
    justify-content: center;
  }

  aside .ad [src*="icon"] {
    display: none;
  }
}