/* =========================================================
   Где меня найти — 375
   ========================================================= */

.contacts-container {
    box-sizing: border-box;

    width: 375px;

    padding: 30px 20px 24px;
}


/* =========================================================
   Заголовок
   ========================================================= */

.contacts-head {
    margin-bottom: 28px;
}


.contacts-heading {
    margin-bottom: 17px;
    padding-bottom: 9px;

    font-size: 30px;
}


.contacts-heading::after {
    width: 34px;
    height: 1px;
}


.contacts-subtitle {
    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   Общие блоки
   ========================================================= */

.contacts-block {
    padding: 0;

    border-radius: 6px;

    background: var(--cream-100);
}


.contacts-block-main {
    margin-bottom: 18px;

    background: transparent;
}


/* =========================================================
   Заголовки блоков
   ========================================================= */

.contacts-block-title {
    gap: 12px;

    margin-bottom: 15px;
    padding: 0 10px;

    font-size: 10px;
    letter-spacing: 1.4px;
}


.contacts-block-line {
    background: var(--sand-300);
}


/* =========================================================
   Верхний блок — список
   ========================================================= */

.contacts-block-main .contacts-platforms-five {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--cream-300);
    border-radius: 6px;

    background: var(--cream-20);
}


.contacts-block-main .contacts-platform {
    display: grid;
    grid-template-columns: 48px 1fr 35px;
    align-items: center;
    column-gap: 12px;

    box-sizing: border-box;

    height: 60px;
    padding: 7px 18px 7px 14px;

    border: 0;
    border-bottom: 1px solid var(--cream-300);
}


.contacts-block-main .contacts-platform:last-child {
    border-bottom: 0;
}


.contacts-block-main .contacts-platform img {
    width: 40px;
    height: 40px;

    margin: 0;
}


.contacts-block-main .contacts-platform-name {
    min-height: 0;

    font-size: 13px;
    text-align: left;
}


.contacts-block-main .contacts-platform-arrow {
    margin: 0;
    width: 25px;
    height: 7px;
    justify-self: end;
}


/* =========================================================
   Нижний ряд
   ========================================================= */

.contacts-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* =========================================================
   Нижние блоки
   ========================================================= */

.contacts-bottom .contacts-block {
    box-sizing: border-box;

    padding: 15px 13px 12px;
}


.contacts-bottom .contacts-block-title {
    margin-bottom: 13px;
    padding: 0;

    font-size: 8px;
    letter-spacing: 1px;

    white-space: nowrap;
}


.contacts-bottom .contacts-block-line {
    min-width: 15px;
}


/* Сетка превращается в вертикальный список */

.contacts-bottom .contacts-platforms {
    display: flex;
    flex-direction: column;
}


.contacts-bottom .contacts-platform {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 25px;
    align-items: center;
    column-gap: 8px;

    box-sizing: border-box;

    min-height: 64px;

    padding: 8px 0;

    border: 0;
    border-bottom: 1px solid var(--cream-300);
}


.contacts-bottom .contacts-platform:last-child {
    border-bottom: 0;
}


.contacts-bottom .contacts-platform img {
    width: 40px;
    height: 40px;

    margin: 0;
}


.contacts-bottom .contacts-platform-name {
    min-height: 0;

    font-size: 11px;
    line-height: 1.15;

    text-align: left;
}


/* =========================================================
   Стрелки
   ========================================================= */

.contacts-bottom .contacts-platform-arrow {
    width: 25px;
    height: 7px;

    margin: 0;

    justify-self: end;
}