/* SuperNew */

@media (max-width: 900px) {
    body {
        display: block;
        width: 100%;
    }

    #stv {
        width: 100%;
        min-width: 0;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .container_header {
        width: calc(100% - 32px);
        margin: 20px auto 0;
        flex-wrap: wrap;
        gap: 16px 24px;
    }

    .container_header_name {
        flex: 1 0 11rem;
        font-size: 17px;
        line-height: 1.3;
    }

    .container_header_etc {
        min-width: 0;
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .container_header_link {
        font-size: 16px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .container_mainblock,
    .container_mainblock_photos {
        width: min(680px, calc(100% - 32px));
        margin-top: 56px;
        gap: 24px;
    }

    .text_first_words {
        font-size: clamp(32px, 5.5vw, 44px);
        line-height: 1.15;
        margin-bottom: 20px;
        overflow-wrap: anywhere;
    }

    .text_main,
    .text_main_poem {
        font-size: 17px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .text_accent,
    .text_additional {
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .text_headline {
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .container_photo_main {
        width: 100%;
        height: auto;
    }

    .container_twophoto_main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .container_twophoto_main .photo {
        min-width: 0;
    }

    .local_time {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .about-skills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .about-skill-column {
        min-width: 0;
    }

    .txt {
        width: min(24ch, calc(100% - 32px));
        padding: 40px 0;
    }

    .year_group {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .text_for_photo_block {
        display: block;
        font-size: 15px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .container_mainblock_photos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        align-items: start;
    }

    .photo_trip_info {
        grid-column: 1 / -1;
        margin-bottom: 24px;
        gap: 8px;
    }

    .photo_trip_info .text_first_words {
        margin-bottom: 0;
    }

    .container_mainblock_photos > img {
        min-width: 0;
        width: 100%;
        height: auto;
        align-self: stretch;
        object-fit: cover;
    }

    .page-sidebar {
        display: none;
    }

    .page-sidebar-layout,
    .photo-sidebar-layout {
        display: block;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin-top: 56px;
    }

    .photo-trip-content {
        width: min(680px, calc(100% - 32px));
        min-width: 0;
        margin-inline: auto;
    }

    .photo-trip-content .container_mainblock_photos {
        width: 100%;
        margin-top: 0;
    }

    .conteiner-for-back-to-in-photoblog {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .container_poem {
        width: min(40rem, calc(100% - 32px));
        min-width: 0;
        max-width: none;
        margin-top: 56px;
        gap: 24px;
    }

    .text_first_words_poem {
        font-size: clamp(28px, 5vw, 35px);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .button_random_poem {
        align-self: flex-start;
        max-width: 100%;
        min-height: 40px;
    }

    body[data-page="experiences"] #stv {
        min-height: 100vh;
        min-height: 100svh;
    }

    body[data-page="experiences"] .container_header {
        flex-shrink: 0;
    }

    body[data-page="experiences"] .container_portfolio {
        display: flex;
        flex: 1 0 auto;
        width: calc(100% - 32px);
        min-height: 0;
        margin-top: 40px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    body[data-page="experiences"] .container_portfolio_info {
        flex: 1;
        min-width: 0;
        min-height: 0;
    }

    .container_portfolio_block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        line-height: 1.5;
    }

    .container_portfolio_project a {
        max-width: 100%;
        padding-block: 4px;
        overflow-wrap: anywhere;
    }

    .container_portfolio_email {
        max-width: 100%;
        padding-top: 48px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .container_portfolio_photo {
        display: none;
    }

    .current-project {
        width: calc(100% - 32px);
    }

    .current-project-info {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 32px;
    }

    .current-project-title {
        font-size: 30px;
        line-height: 1.15;
        margin-bottom: 12px;
        overflow-wrap: anywhere;
    }

    .current-project-subtitle {
        line-height: 1.5;
    }

    .current-project-meta {
        gap: 4px;
    }

    .current-project-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .container_ilikeit {
        width: calc(100% - 32px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer {
        height: 100vh;
        height: 100svh;
        min-height: 0;
        background-color: #ececec;
        background-size: cover;
        background-position: center bottom;
    }

    .site-footer-inner {
        width: calc(100% - 32px);
        grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
        gap: clamp(8px, 2.5vw, 16px);
        padding: 32px 0 64px;
    }

    .site-footer-inner > * {
        min-width: 0;
    }

    .site-footer-quote {
        grid-column: auto;
        font-size: clamp(28px, 6.5vw, 56px);
        overflow-wrap: anywhere;
    }

    .site-footer-label {
        font-size: clamp(10px, 2.7vw, 12px);
        margin-bottom: 16px;
    }

    .site-footer-links {
        gap: clamp(8px, 2vw, 12px);
    }

    .site-footer-links a {
        max-width: 100%;
        font-size: clamp(12px, 3.2vw, 16px);
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .container_header_name {
        flex-basis: 100%;
    }

    .container_header_etc {
        width: 100%;
        gap: 12px;
    }

    .container_mainblock,
    .container_poem,
    .page-sidebar-layout,
    .photo-sidebar-layout {
        margin-top: 40px;
    }

    .about-skills {
        gap: 16px;
    }

}

@media (max-width: 900px) {
    .page-not-found {
        width: min(640px, calc(100% - 32px));
        margin: 56px auto;
    }
}

@media (max-width: 600px) {
    .page-not-found {
        margin-block: 40px;
    }
}