.p-contact-hero {
    padding-top: 50px;
}

.p-contact-hero-content {
    text-align: center;
}

.p-contact-hero-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
}

.p-contact-hero-links a {
    text-align: center;
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.p-contact-link-content span {
    display: block;
    text-align: center;
}

.p-contact-link-content .p-contact-link-text {
    margin: 10px 0px 15px 0px;
    width: 60%;
    margin-left: 20%;
}

.p-contact-link-green {
    color: var(--green);
}

@media only screen and (min-width:992px) {
    .p-contact-hero {
        padding-top: 150px;
    }

    .p-contact-hero-links {
        display: grid;
        grid-template: auto / repeat(3, calc((100% - (2 * 25px)) / 3));
        gap: 25px;
        margin-top: 100px;
    }

    .p-contact-link-content .p-contact-link-text {
        margin: 15px 0px 25px 0px;
        width: 100%;
    }
}

@media only screen and (min-width:1200px) {
    .p-contact-hero-links {
        grid-template: auto / repeat(3, calc((100% - (2 * 50px)) / 3));
        gap: 50px;
    }
}

@media only screen and (min-width:1400px) {
    .p-contact-hero-links {
        grid-template: auto / repeat(3, calc((100% - (2 * 100px)) / 3));
        gap: 100px;
    }
}

@media only screen and (min-width:1600px) {
    .p-contact-hero-links {
        grid-template: auto / repeat(3, calc((100% - (2 * 150px)) / 3));
        gap: 150px;
    }
}

@media only screen and (min-width:1800px) {
    .p-contact-hero-links {
        grid-template: auto / repeat(3, calc((100% - (2 * 200px)) / 3));
        gap: 200px;
        width: 90%;
        margin-left: 5%;
    }
}

@media only screen and (hover:hover) and (min-width:992px) {
    .p-contact-hero-links a:hover .contact-link svg path {
        fill: var(--green);
    }
}