.contact-content { display: grid; grid: "left" 300px "right" auto / auto; height: 100vh; }

@media (min-width: 900px) { .contact-content { grid: "left right" auto / 1fr 1fr; } }

.contact-content .image-panel { grid-area: left; background-image: url(/assets/img/contact.jpg); background-size: cover; background-position: center; position: relative; height: 300px; }

@media (min-width: 900px) { .contact-content .image-panel { height: 100%; } }

.contact-content .info-panel { display: grid; grid-gap: 20px; padding: 20px; height: fit-content; grid: repeat(4, auto)/100%; }

@media (min-width: 600px) { .contact-content .info-panel { grid: auto auto / 1fr 1fr; } }

@media (min-width: 900px) { .contact-content .info-panel { padding: 150px 40px 40px; } }

.contact-content .info-panel .box { background-color: white; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.16); border: 2px solid rgba(14, 18, 47, 0.02); border-radius: 6px; padding: 20px 20px 20px 26px; transition: box-shadow 0.36s ease; position: relative; }

.contact-content .info-panel .box::before { width: 6px; height: calc(100% + 4px); display: block; content: ''; left: -2px; top: -2px; background-color: #fbb040; position: absolute; border-radius: 6px 0 0 6px; }

.contact-content .info-panel .box:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 6px 6px rgba(0, 0, 0, 0.16); }

.contact-content .info-panel .box h2 { text-align: center; }

@media (min-width: 600px) { .contact-content .info-panel .box h2 { text-align: left; } }

.contact-content .info-panel .box p { text-align: center; color: #ab8383; }

.contact-content .info-panel .box p a { color: #ab8383; cursor: pointer; }

@media (min-width: 600px) { .contact-content .info-panel .box p { text-align: left; } }

.contact-content .info-panel .box img { display: block; margin: auto; }

@media (min-width: 600px) { .contact-content .info-panel .box img { margin: 0; } }

/*# sourceMappingURL=contact.css.map */