@import url("styles.css");

.container .border {
    margin-top: 40px;
}
.contacts {
    margin-top: -9px;;
}

.contacts-hero {
    display: flex;
    gap: 30px;
}
.contacts-hero img{
    max-width: 477px;
    max-height: 374px;
    height: auto;
}
.contacts-hero {
    border-bottom: 7px solid var(--red);
}
.contacts-hero-description {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}
.social-links {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}
.social-links a {
    width: 35px;
    height: 35px;
    background-position: center;
    background-repeat: no-repeat;
}
.vk {
    background-image: url("images/icons/png/social/vk.png");
}
.whatsup {
    background-image: url("images/icons/png/social/wup.png");
}
.telegram {
    background-image: url("images/icons/png/social/tg.png");
}
.contacts-photos {
    margin-top: 50px;
    margin-bottom: 90px;
    display: grid;
    justify-content: center;
    grid-template-areas: 
    "a b c d"
    ". . . e"
    "i h g f"
    "j . . ."
    "k l m n"
    ". . . o"
    "s r q p"
    "t . . ."
    "u v . .";
    gap: 22px;
}
.contacts-photos li {
    position: relative;
}
.contacts-photos img {
    display: block;
}
.contacts-photos li::before {
    content: "";
    position: absolute;    
    width: 23px;
    height: 52px;
    background-repeat: no-repeat;
    background-image: url("images/icons/png/small_right_arrow.png");
    background-position: center;
}
.contacts-photos li:last-child::before{
    background-image: none;
}
#contact-1 {
    grid-area: a;
    
}
#contact-1::before, #contact-2::before, #contact-3::before, #contact-11::before, #contact-12::before, #contact-13::before, #contact-21::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%)
}
#contact-2 {
    grid-area: b;
}
#contact-3 {
    grid-area: c;
}
#contact-4 {
    grid-area: d;
}
#contact-4::before, #contact-5::before, #contact-9::before, #contact-10::before, #contact-14::before, #contact-15::before, #contact-19::before, #contact-20::before  {
    left: 50%;
    top: 100%;
    transform: translateY(-28%) translateX(-25%) rotate(90deg);
}
#contact-5 {
    grid-area: e;
}
#contact-6 {
    grid-area: f;
}
#contact-6::before, #contact-7::before, #contact-8::before, #contact-16::before, #contact-17::before, #contact-18::before {
    top: 50%;
    right: 100%;
    transform: rotate(180deg) translateY(50%);
}
#contact-7 {
    grid-area: g;
}
#contact-8 {
    grid-area: h;
}
#contact-9 {
    grid-area: i;
}
#contact-10 {
    grid-area: j;
}
#contact-11 {
    grid-area: k;
}
#contact-12 {
    grid-area: l;
}
#contact-13 {
    grid-area: m;
}
#contact-14 {
    grid-area: n;
}
#contact-15 {
    grid-area: o;
}
#contact-16 {
    grid-area: p;
}
#contact-17 {
    grid-area: q;
}
#contact-18 {
    grid-area: r;
}
#contact-19 {
    grid-area: s;
}
#contact-20 {
    grid-area: t;
}
#contact-21 {
    grid-area: u;
}
#contact-22 {
    grid-area: v;
}

img {
  width: 100%; /* Гибкость – наше всё */
  height: auto; /* Доверьтесь автоматике */
  object-fit: contain; /* Исключаем искажения пропорций */
}