.page-title h1 {
    font-size: 2.75rem;
}

.certificates {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    max-width: 60rem;
}
.certificate {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    top: -1rem;
    opacity: 0;
    width: 28rem;
    height: 21rem;
    border-radius: 0.5rem;
    background-color: var(--secondary);
    padding: 1rem;
    box-shadow:
        inset 0 0 0.2rem var(--accent),
        0.05rem 0.05rem var(--accent),
        0.1rem 0.1rem 0.5rem var(--accent);
    transition: box-shadow 0.5s;
    animation: fade-in-down 0.75s ease-out forwards;
    h2 {
        color: var(--tertiary);
        position: absolute;
        font-size: 2.5rem;
        opacity: 0;
        transition: opacity 0.5s;
    }
    img {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        filter: brightness(0.9);
        transition: width 0.5s, height 0.5s, max-width 0.5s, max-height 0.5s, filter 0.5s;
    }
}
.certificate:hover {
    box-shadow:
        inset 0 -0.1rem 0.2rem var(--accent),
        0 0.1rem var(--accent),
        0 0.2rem 0.5rem var(--accent);
    h2 {
        opacity: 1;
    }
    img {
        max-width: 120%;
        max-height: 120%;
        height: 120%;
        filter: brightness(0.5);
    }
}
.certificate:active {
    h2 {
        opacity: 1;
    }
    img {
        max-width: 110%;
        max-height: 110%;
        height: 110%;
        filter: brightness(0.1);
    }
}

@media only screen and (min-width: 992px) {
    .certificate {
        width: 24rem;
        height: 18rem;
    }
}