.school-card {
  position: relative;
  overflow: hidden;
  height: 200px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 20px; }
  .school-card .hover {
    position: absolute;
    bottom: -50%;
    left: 0;
    width: 100%;
    padding: 15px;
    transition: all 0.3s;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
    display: flex;
    align-items: center; }
    .school-card .hover .btn {
      border-radius: 0;
      background-color: var(--primary-color);
      margin-right: 10px; }
      .school-card .hover .btn.btn-pdf {
        background-color: white;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center; }
        .school-card .hover .btn.btn-pdf img {
          width: auto;
          height: 15px; }
  .school-card:hover .hover {
    bottom: 0; }

@media screen and (max-width: 768px) {
  .school-card .hover {
    bottom: 0; } }