.guide { background: rgb(230, 230, 230); display: flex; flex-direction: column; gap: 10px; padding: 14px 0 64px; }
.guide__grid { display: grid; gap: 74px; grid-template-columns: repeat(3,1fr); margin: 0 auto; max-width: 792px; width: 90%; }
.guide__item { aspect-ratio: 110 / 73; display: flex; position: relative; }
.guide__item img { height: 100%; object-fit: cover; max-width: 100%; width: 100%; }
.guide__item:nth-child(2)::before { background: url("../img/guide__arrow.png") no-repeat center center; background-size: contain; bottom: 0; content: ""; height: 50px; left: -58px; margin: auto 0; position: absolute; top: 0; width: 42px; }
.guide__item:nth-child(3)::before { background: url("../img/guide__arrow--2.png") no-repeat center center; background-size: contain; bottom: 0; content: ""; height: 54px; left: -65px; margin: auto 0; position: absolute; top: 0; width: 57px; }
.guide__title { letter-spacing: 1.424px; margin: 0 auto; max-width: 684px; text-transform: uppercase; width: 90%; }
@media screen and (max-width: 767px) {
  .guide__grid { grid-template-columns: minmax(0,220px); justify-content: center; }
  .guide__item:nth-child(2)::before { bottom: auto; left: 0; margin: 0 auto; right: 0; top: -62px; transform: rotate(90deg); }
  .guide__item:nth-child(3)::before { bottom: auto; left: 0; margin: 0 auto; right: 0; top: -64px; transform: rotate(90deg); }
  .guide__title { text-align: center; }
}

.tiles { /* background: rgb(251, 250, 250); */ padding: 10px 0; }
.tiles__container { display: grid; gap: 16px; grid-auto-flow: dense; grid-auto-rows: minmax(170px,1fr); grid-template-columns: repeat(3,1fr); margin: 0 auto; /* max-width: 684px; */ max-width: 100%; width: 100%; }
.tiles__cta {
	/* color: white;
    border: 2px solid white; */
    padding: 2px 10px;
    font-weight: bold;
    font-size: 13px;

    background-color: var(--primary-green);
    border: 1px solid var(--primary-green);
    /* color: var(--primary-black); */
    color: white;
}
.tiles__cta:hover { background: white; color: black; }
.tiles__heading { font-size: 1.1rem; margin: 0; text-align: center; color: white; }
.tiles__heading--black { color: black; }
.tiles__icon { width: 46px; }
.tiles__special.tiles__item {
	/* border: 1px solid #666; */
    background-color: #e8f9fd;
}
.tiles__item { align-items: center; background: #fafafa; color: black; display: flex; flex-direction: column; gap: 10px; justify-content: end; padding: 12px; text-decoration: none; }
.tiles__item--lg { grid-row: span 2; }
.tiles__link { align-items: center; color: black; display: flex; flex-direction: column; gap: 10px; margin: auto 0; text-decoration: none; }
@media (max-width: 576px) {
  .tiles__container { grid-template-columns: repeat(2,1fr); }
  .tiles__item:last-child:nth-child(odd) { display: none; }
}
@media (max-width: 399px) {
  .tiles__container { grid-template-columns: none; }
  .tiles__item:nth-child(n + 6) { display: none; }
}

.tiles__item {
    overflow: hidden;
}
.tiles__item:not(.tiles__special) {
    position: relative;
    overflow: hidden;
}

.tiles__item:not(.tiles__special)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    transition: transform 0.4s ease-in-out;
    transform-origin: center;
    z-index: 0;
}

.tiles__item:not(.tiles__special) * {
    position: relative;
    z-index: 1;
}

.tiles__item:not(.tiles__special):hover::before {
    transform: scale(1.1);
}

.tiles__special .tiles__link:hover .tiles__heading {
	text-decoration: underline;
}

.tiles__special p {
	font-size: 11.5px;
    text-align: center;
	margin-top: -15px;
}

.tiles__special p a {
	text-decoration: underline;
}

.tiles__special p a:hover {
	text-decoration: none;
	color: black;
}