.post-grid__link {
  display: block;
}
@media (hover: hover) {
  .post-grid__link:focus .post-grid__image::before, .post-grid__link:hover .post-grid__image::before {
    opacity: 1;
  }
  .post-grid__link:focus .main-button__text, .post-grid__link:hover .main-button__text {
    color: #fff;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
}
.post-grid__image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 44rem;
  background-color: var(--color-gray-50);
  aspect-ratio: 1/1;
}
@media (max-width: 1024px) {
  .post-grid__image {
    padding: 28rem;
  }
}
@media (max-width: 640px) {
  .post-grid__image {
    padding: 20rem;
  }
}
.post-grid__image:has(img[src=""]), .post-grid__image:not(:has(img)) {
  background: url("/uploads/media/2026/06/logo.svg") no-repeat var(--color-gray-50) center center/60% auto;
}
.post-grid__image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 1px solid var(--color-primary);
  transition: opacity 0.3s;
}
.post-grid__image-thumb {
  max-width: 100%;
  max-height: 100%;
}
.post-grid .main-button {
  flex-shrink: 0;
  margin-top: 20rem;
}
.post-grid .main-button__text {
  border: 1px solid var(--color-gray-300);
  background-color: #fff;
  transition-property: color, border-color, background-color;
  transition-duration: 0.3s;
}
.post-grid .main-button__text::before, .post-grid .main-button__text::after {
  display: none;
}