#contact {

    .inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 30px;
        margin-top: 50px;

        @media screen and (max-width: 980px) {
            grid-template-columns: 1fr;
        }

        .left {
            padding: 30px;
            box-shadow: var(--shadow-1);
            border-radius: 10px;
            background-color: #212428;
            height: 100%;

            .image {
                overflow: hidden;
                border-radius: 10px;
                margin-bottom: 28px;

                img {
                    display: block;
                    transition: all 0.25s;
                }               
            }

            .name {
                font-size: 29px;
                font-weight: 700;
                color: var(--color-light);
                _color: var(--color-primary);
                margin-bottom: 9px;
            }

            .text {
                color: var(--color-body);

                span {
                    color: var(--color-heading);
					
					&.highlight {
						font-size: 14px;
						color: var(--color-primary);
					}
					
					&.lined {
						color: var(--color-primary);
						display: grid;
                        grid-template-columns: auto 1fr;
                        gap: 20px;
                        align-items: center;
						
						&:after {
							content: "";
							position: relative;
							display: block;
							height: 1px;
							border-bottom: 1px dotted rgba(255,255,255, 0.1);
						}
					}
                }
            }

            &:hover {
                img {
                    transform: scale(1.1);
                }      
            }           

			.rating {
				display: flex;
				gap: 10px;
				
				span {
					background-image: linear-gradient(to bottom, #fff, var(--color-primary) 60%);
                    background-clip: text;
                    color: transparent;
                    transition: var(--transition);
					font-size: 40px;
					
					&:hover {
						transform: scale(1.1);
					}
				}
			}

            .socials {
                display: flex;
                gap: 30px;
                margin-top: 45px;

                a {
                    width: 61px;
                    height: 61px;
                    line-height: 62px;
                    box-shadow: var(--shadow-1);
                    border-radius: 6px;
                    transition: var(--transition);
                    display: inline-block;
                    text-align: center;
                    font-size: 20px;
                    color: var(--color-lightn);

                    &:hover {
                        transform: translateY(-5px);
                        color: var(--color-primary);
                    }
                }
            }
        }

        .right {
            box-shadow: var(--shadow-1);
            padding: 30px;
            border-radius: 10px;
            height: 100%;
        }

    }
}