.contact {
    position: relative;
    width: 100%;
    margin-top: 12.5rem;
    overflow: hidden;
}

.contact__panel {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 34.375rem;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "title info"
        "text info"
        "form info";
    column-gap: 2.5rem;
    width: 100%;
    margin: 0 auto;
    min-height: 34.375rem;
    padding: 3.125rem;
    background: var(--dark);
    background-position: 130% 50%;
    background-size: 80%;
    border-radius: 0.25rem;
}

.contact__panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: -7.5%;
    width: 100%;
    height: 100%;
    background: url("../../effects/contact.webp") right center / 80% no-repeat, var(--dark);
    opacity: 0.35;
    z-index: -1;
}

.contact__title {
    grid-area: title;
    z-index: 2;
    font-size: 3rem;
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--white);
}

.contact__text {
    grid-area: text;
    width: 45%;
    z-index: 2;
    margin-top: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--white);
}

.contact__form {
    grid-area: form;
    align-self: end;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.contact__input {
    width: 21.875rem;
    height: 3.75rem;
    padding: 0 1.25rem;
    border: 1px solid var(--white);
    border-radius: 0.25rem;
    background: var(--white);
    color: var(--black);
    font-size: 1.25rem;
    font-family: inherit;
}

.contact__input:focus {
    outline: none;
}

.contact__check {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 300;
    color: var(--white);
    cursor: pointer;
    margin-top: 1.25rem ;
}

.contact__check input {
    position: absolute;
    opacity: 0;
}

.contact__check-indicator {
    flex: 0 0 auto;
    position: relative;
    width: 1.875rem;
    height: 1.875rem;
    border: 2px solid var(--white);
}

.contact__check input:checked + .contact__check-indicator::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0.25rem;
    height: 0.5rem;
    border: solid var(--white);
    border-width: 0 0.125rem 0.125rem 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.contact__submit {
    width: 15rem;
    height: 3.75rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--orange);
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.contact__submit:hover {
    background: var(--white);
    color: var(--orange);
}

.contact__info {
    position: relative;

    grid-area: info;
    align-self: start;
    margin-top: 3.75rem;
    width: 37.5rem;
    z-index: 2;
    padding: 3.125rem;
}

.contact__info::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background: var(--orange);
    opacity: 0.4;
    z-index: -1;
}

.contact__info-link {
    display: block;
    font-size: 1.5rem;
    line-height: 1.75;
    color: var(--white);
    transition: color 0.2s ease-in-out;
}

.contact__info-link:hover {
    color: var(--orange);
}

.contact__image {
    position: absolute;
    top: -35.625rem;
    left: 19.875rem;
    width: 58.375rem;
    height: 92.375rem;
    z-index: 0;
    opacity: 0.25;
}

@media(max-width: 1024px) {
    .contact__text { width: 30rem;}
    .contact__info { width: 30rem; margin-top: 0; }
    .contact__panel { grid-template-columns: 1fr 25rem; }
    .contact__form { margin-top: 2.5rem; }
    .contact__submit { width: 25rem; }
    .contact__input { width: 25rem; }
}

@media(max-width:768px){
    .contact__text { width: 100%; }
    .contact__panel { grid-template-columns: 1fr; grid-template-areas: "title"
                                                                    "text"
                                                                    "info"
                                                                    "form"; }
    .contact__info { margin-top: 2rem; width: 100%;  }
    .contact__input { width: 100%; }
    .contact__check { margin-top: 1rem; }
    .contact__submit { width: 100%; order: 1; margin-top: 1.25rem; }
}