.obras-content {
  padding: 4rem 0;

  .obra-card {
    display: block;
    position: relative;
    background-color: var(--color-white);
    box-shadow: 0 6px 40px rgba(0,0,0,.08);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-white);
    transition: translate 0.3s ease;
    
    .card-image {
      position: relative;
      aspect-ratio: 1/1;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
    }
    
    .card-content {
      padding: 1.5rem 1rem;
      background-color: var(--color-white);

      .card-title {
        font-size: 1.5rem;
        color: var(--color-secondary);
        margin: initial;
        text-align: center;
        transition: color 0.3s ease;
      }
    }

    .card-link {
      display: block;
      position: absolute;
      inset: 0;
      border-radius: 10px;

      &:focus {
        outline: none;
      }
      &:focus-visible {
        box-shadow: inset 0 0 0 3px var(--color-primary);
      }
    }

    &:hover,
    &:focus-visible {
      translate: 0 -5px;

      .card-image {
        img {
          transform: scale(1.05);
        }
      }

      .card-content {
        .card-title {
          color: var(--color-primary);
        }
      }
    }
  }

}