/* pr-boxes = row
  .clickable-box = column
*/

:root {
	--pr_teal: #00a4a6;
	--pr-purple: #522584;
}

.pr-boxes .clickable-box {
    vertical-align: top;
    width: 250px;
    height: 250px;
    text-align: center;
    border-radius: 20px !important;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 20px !important;

	border-style: solid;
	border-width: 8px;
	border-top-color: var(--pr_teal);
	border-left-color: var(--pr_teal);
	border-bottom-color: var(--pr_purple);
	border-right-color: var(--pr_purple);
	border-radius: 12px;
	padding: 5px;
}


.pr-boxes .clickable-box h2,
.pr-boxes .clickable-box h3 {
	color: #000;
    font-family: "Poppins", sans-serif !important;
    margin-top: clamp(8px, 1.0vw, 17px);
    line-height: 1.2;
}

.pr-boxes .clickable-box h2 {
    font-size: 115%;
    font-weight: 500 !important;
    padding-bottom: 12px;
}

.pr-boxes .clickable-box h3 {
    font-weight: 300 !important;
    font-size: 87%;
}

.pr-boxes .clickable-box {
    position: relative;
    cursor: pointer;
}

.pr-boxes .clickable-box h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pr-boxes .clickable-box:hover {
    /* optional hover styling */
	background-color: #eee;
}

.pr-boxes .clickable-box:hover h2,
.pr-boxes .clickable-box:hover h2 a,
.pr-boxes .clickable-box:hover h3,  
.pr-boxes .clickable-box:hover h3 a {
	color: #000 !important;
}