.apy-services-grid {
--apy-sg-cols: 4;
--apy-sg-cols-tablet: 2;
--apy-sg-cols-mobile: 1;
--apy-sg-gap: 16px;
--apy-sg-aspect: 5 / 4;
--apy-sg-aspect-mobile: 3 / 2;
--apy-sg-radius: 14px;
--apy-sg-title-color: #ffffff;
--apy-sg-title-size: clamp(0.95rem, 1.1vw, 1.125rem);
--apy-sg-title-lh: 1.25;
--apy-sg-title-ls: 0;
--apy-sg-title-weight: 600;
--apy-sg-title-pad: 16px 18px;
--apy-sg-title-align: left;
--apy-sg-title-font: inherit;
--apy-sg-overlay-color: #0b1633;
--apy-sg-overlay-opacity: 1;
--apy-sg-overlay-h: 65%;
--apy-sg-overlay-solid: 30%;
--apy-sg-overlay-h-mobile: 45%;
--apy-sg-overlay-solid-mobile: 15%;
--apy-sg-border-w: 1px;
--apy-sg-border-color: rgba(255, 255, 255, 0.12);
--apy-sg-border-hover: #8f7452;
--apy-sg-transition: 0.3s;
--apy-sg-max-w: none;
width: 100%;
max-width: var(--apy-sg-max-w, none);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.apy-services-grid__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--apy-sg-cols), minmax(0, 1fr));
gap: var(--apy-sg-gap);
}
.apy-services-grid__item {
margin: 0;
padding: 0;
min-width: 0;
}
.apy-services-grid__card {
position: relative;
display: block;
width: 100%;
aspect-ratio: var(--apy-sg-aspect);
border-radius: var(--apy-sg-radius);
overflow: hidden;
box-sizing: border-box;
text-decoration: none;
color: var(--apy-sg-title-color);
background: #0b0f14;
isolation: isolate;
transition: box-shadow var(--apy-sg-transition) ease;
} .apy-services-grid__card::after {
content: "";
position: absolute;
inset: 0;
border: var(--apy-sg-border-w) solid var(--apy-sg-border-color);
border-radius: inherit;
pointer-events: none;
z-index: 3;
transition: border-color var(--apy-sg-transition) ease;
}
.apy-services-grid__card:hover::after,
.apy-services-grid__card:focus-visible::after {
border-color: var(--apy-sg-border-hover);
}
.apy-services-grid__card:hover,
.apy-services-grid__card:focus-visible {
box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.35);
}
.apy-services-grid__card:focus-visible {
outline: 2px solid var(--apy-sg-border-hover);
outline-offset: 2px;
}
.apy-services-grid__media {
margin: 0;
padding: 0;
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
} .apy-services-grid__img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
} .apy-services-grid__overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--apy-sg-overlay-h);
background: linear-gradient(
to top,
var(--apy-sg-overlay-color) 0%,
var(--apy-sg-overlay-color) var(--apy-sg-overlay-solid),
transparent 100%
);
opacity: var(--apy-sg-overlay-opacity);
pointer-events: none;
z-index: 1;
}
.apy-services-grid__title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin: 0;
padding: var(--apy-sg-title-pad);
font-family: var(--apy-sg-title-font, inherit);
font-size: var(--apy-sg-title-size);
font-weight: var(--apy-sg-title-weight);
line-height: var(--apy-sg-title-lh);
letter-spacing: var(--apy-sg-title-ls);
color: var(--apy-sg-title-color);
text-align: var(--apy-sg-title-align);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
word-break: break-word;
}
@media (max-width: 1024px) {
.apy-services-grid__list {
grid-template-columns: repeat(var(--apy-sg-cols-tablet), minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.apy-services-grid__list {
grid-template-columns: repeat(var(--apy-sg-cols-mobile), minmax(0, 1fr));
} .apy-services-grid__card {
aspect-ratio: var(--apy-sg-aspect-mobile, var(--apy-sg-aspect));
}
.apy-services-grid__overlay {
height: var(--apy-sg-overlay-h-mobile, var(--apy-sg-overlay-h));
background: linear-gradient(
to top,
var(--apy-sg-overlay-color) 0%,
var(--apy-sg-overlay-color) var(--apy-sg-overlay-solid-mobile, var(--apy-sg-overlay-solid)),
transparent 100%
);
}
}