/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
/* Document
       ========================================================================== */
/**
     * 1. Correct the line height in all browsers.
     * 2. Prevent adjustments of font size after orientation changes in
     *    IE on Windows Phone and in iOS.
     */
     html {
        line-height: 1.15;
        /* 1 */
    
            -ms-text-size-adjust: 100%;
        /* 2 */
        -webkit-text-size-adjust: 100%;
        /* 2 */
    }
    
    /* Sections
           ========================================================================== */
    /**
         * Remove the margin in all browsers (opinionated).
         */
    body {
        margin: 0;
    }
    
    /**
         * Add the correct display in IE 9-.
         */
    article,
    aside,
    footer,
    header,
    nav,
    section {
        display: block;
    }
    
    /**
         * Correct the font size and margin on `h1` elements within `section` and
         * `article` contexts in Chrome, Firefox, and Safari.
         */
    h1 {
        margin: 0.67em 0;
    
        font-size: 2em;
    }
    
    /* Grouping content
           ========================================================================== */
    /**
         * Add the correct display in IE 9-.
         */
    figcaption,
    figure {
        display: block;
    }
    
    /**
         * Add the correct margin in IE 8.
         */
    figure {
        margin: 1em 40px;
    }
    
    /**
         * 1. Add the correct box sizing in Firefox.
         * 2. Show the overflow in Edge and IE.
         */
    hr {
        /* 1 */
        overflow: visible;
    
        -webkit-box-sizing: content-box;
                box-sizing: content-box;
        /* 1 */
        height: 0;
        /* 2 */
    }
    
    /**
         * Add the correct display in IE.
         */
    main {
        display: block;
    }
    
    /**
         * 1. Correct the inheritance and scaling of font size in all browsers.
         * 2. Correct the odd `em` font sizing in all browsers.
         */
    pre {
        font-family: monospace, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */
    }
    
    /* Links
           ========================================================================== */
    /**
         * 1. Remove the gray background on active links in IE 10.
         * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
         */
    a {
        background-color: transparent;
        /* 1 */
    
        -webkit-text-decoration-skip: objects;
        /* 2 */
    }
    
    /* Text-level semantics
           ========================================================================== */
    /**
         * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
         * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
         */
    abbr[title] {
        /* 1 */
                text-decoration: underline;
                text-decoration: underline dotted;
    
        border-bottom: none;
        /* 2 */
    
        -webkit-text-decoration: underline dotted;
        /* 2 */
    }
    
    /**
         * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
         */
    b,
    strong {
        font-weight: inherit;
    }
    
    /**
         * Add the correct font weight in Chrome, Edge, and Safari.
         */
    b,
    strong {
        font-weight: bolder;
    }
    
    /**
         * 1. Correct the inheritance and scaling of font size in all browsers.
         * 2. Correct the odd `em` font sizing in all browsers.
         */
    code,
    kbd,
    samp {
        font-family: monospace, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */
    }
    
    /**
         * Add the correct font style in Android 4.3-.
         */
    dfn {
        font-style: italic;
    }
    
    /**
         * Add the correct background and color in IE 9-.
         */
    mark {
        color: #000000;
        background-color: #ffff00;
    }
    
    /**
         * Add the correct font size in all browsers.
         */
    small {
        font-size: 80%;
    }
    
    /**
         * Prevent `sub` and `sup` elements from affecting the line height in
         * all browsers.
         */
    sub,
    sup {
        position: relative;
    
        vertical-align: baseline;
    
        font-size: 75%;
        line-height: 0;
    }
    
    sub {
        bottom: -0.25em;
    }
    
    sup {
        top: -0.5em;
    }
    
    /* Embedded content
           ========================================================================== */
    /**
         * Add the correct display in IE 9-.
         */
    audio,
    video {
        display: inline-block;
    }
    
    /**
         * Add the correct display in iOS 4-7.
         */
    audio:not([controls]) {
        display: none;
    
        height: 0;
    }
    
    /**
         * Remove the border on images inside links in IE 10-.
         */
    img {
        border-style: none;
    }
    
    /**
         * Hide the overflow in IE.
         */
    svg:not(:root) {
        overflow: hidden;
    }
    
    /* Forms
           ========================================================================== */
    /**
         * 1. Change the font styles in all browsers (opinionated).
         * 2. Remove the margin in Firefox and Safari.
         */
    button,
    input,
    optgroup,
    select,
    textarea {
        /* 1 */
        margin: 0;
    
        font-family: sans-serif;
        /* 1 */
        font-size: 100%;
        /* 1 */
        line-height: 1.15;
        /* 2 */
    }
    
    /**
         * Show the overflow in IE.
         */
    button {
        overflow: visible;
    }
    
    /**
         * Remove the inheritance of text transform in Edge, Firefox, and IE.
         * 1. Remove the inheritance of text transform in Firefox.
         */
    button,
    select {
        /* 1 */
        text-transform: none;
    }
    
    /**
         * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
         *    controls in Android 4.
         * 2. Correct the inability to style clickable types in iOS and Safari.
         */
    button,
    html [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
        /* 2 */
    }
    
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        /**
           * Remove the inner border and padding in Firefox.
           */
        /**
           * Restore the focus styles unset by the previous rule.
           */
    }
    
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        padding: 0;
    
        border-style: none;
    }
    
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }
    
    /**
         * Show the overflow in Edge.
         */
    input {
        overflow: visible;
    }
    
    /**
         * 1. Add the correct box sizing in IE 10-.
         * 2. Remove the padding in IE 10-.
         */
    [type="checkbox"],
    [type="radio"] {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        /* 1 */
        padding: 0;
        /* 2 */
    }
    
    /**
         * Correct the cursor style of increment and decrement buttons in Chrome.
         */
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }
    
    /**
         * 1. Correct the odd appearance in Chrome and Safari.
         * 2. Correct the outline style in Safari.
         */
    [type="search"] {
        /* 1 */
        outline-offset: -2px;
    
        -webkit-appearance: textfield;
        /* 2 */
        /**
           * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
           */
    }
    
    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    
    /**
         * 1. Correct the inability to style clickable types in iOS and Safari.
         * 2. Change font properties to `inherit` in Safari.
         */
    ::-webkit-file-upload-button {
        /* 1 */
        font: inherit;
    
        -webkit-appearance: button;
        /* 2 */
    }
    
    /**
         * Correct the padding in Firefox.
         */
    fieldset {
        padding: 0.35em 0.75em 0.625em;
    }
    
    /**
         * 1. Correct the text wrapping in Edge and IE.
         * 2. Correct the color inheritance from `fieldset` elements in IE.
         * 3. Remove the padding so developers are not caught out when they zero out
         *    `fieldset` elements in all browsers.
         */
    legend {
        /* 1 */
        display: table;
    
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        /* 1 */
        max-width: 100%;
        /* 1 */
        padding: 0;
        /* 2 */
    
        white-space: normal;
        /* 3 */
    
        color: inherit;
        /* 1 */
    }
    
    /**
         * 1. Add the correct display in IE 9-.
         * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
         */
    progress {
        display: inline-block;
        /* 1 */
    
        vertical-align: baseline;
        /* 2 */
    }
    
    /**
         * Remove the default vertical scrollbar in IE.
         */
    textarea {
        overflow: auto;
    }
    
    /* Interactive
           ========================================================================== */
    /*
         * Add the correct display in Edge, IE, and Firefox.
         */
    details {
        display: block;
    }
    
    /*
         * Add the correct display in all browsers.
         */
    summary {
        display: list-item;
    }
    
    /*
         * Add the correct display in IE 9-.
         */
    menu {
        display: block;
    }
    
    /* Scripting
           ========================================================================== */
    /**
         * Add the correct display in IE 9-.
         */
    canvas {
        display: inline-block;
    }
    
    /**
         * Add the correct display in IE.
         */
    template {
        display: none;
    }
    
    /* Hidden
           ========================================================================== */
    /**
         * Add the correct display in IE 10-.
         */
    [hidden] {
        display: none;
    }
    
    * {
        box-sizing: border-box;
    }
    
    html {
        color: #637588;
        font-family: "Roboto", sans-serif;
        font-size: 16px;
        line-height: 1.15;
        letter-spacing: 0.1em;
    }
    
    body {
        overflow-y: scroll;
    }
    
    h1 {
        font-family: "Roboto Slab", serif;
        font-size: 3.75rem;
        font-weight: 300;
        line-height: 1.2em;
    }
    
    h2 {
        font-family: "Roboto Slab", serif;
        color: #2d3651;
        font-size: 2.5rem;
        line-height: 1.2em;
    }

    h3 {
        color: #637588;
    }
    
    p {
        letter-spacing: 1px;
        color: #637588;
    }
    
    a {
        text-decoration: none;
        color: #ffffff;
        transition: color 0.5s;
    }
    .container {
        display: grid;
        max-width: 1340px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .section {
        padding-top: 100px;
        padding-bottom: 80px;
    }
    
    .section h2 {
        margin-top: 0;
    }
    
    .btn,
    .btn-accent {
        display: block;
        min-width: 250px;
        height: 60px;
        padding: 18px 20px;
        margin: 0 10px;
        text-align: center;
        letter-spacing: 0.15em;
        border-width: 2px;
        border-style: solid;
        font-size: 1.125rem;
        transition: background-color 0.5s, border-color 0.5s;
    }
    
    .btn {
        border-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .btn:hover,
    .btn:focus {
        background-color: #d66926;
    }
    
    .btn-accent {
        border-color: #2d3651;
        background-color: rgba(45, 54, 81, 0.8);
    }
    
    .btn-accent:hover {
        background-color: #d66926;
    }
    
    .btn-set {
        grid-column: 1 / span 4;
        display: grid;
        justify-items: center;
        padding: 0 0 20px;
    }
    
    .btn-set .btn-accent {
        min-width: 350px;
    }
    
    .header {
        min-height: 100vh;
        position: relative;
        padding: 100px 0;
        color: #ffffff;
        display: grid;
        background-color: #2d3651;
        background-image: url(../img/img-header.png);
        background-position: 50% 50%;
        background-size: cover;
        align-items: center;
    }
    
    .header-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.8;
        background-color: #2d3651;
    }
    
    .header-menu {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .header-menu .container {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    
    .header-logo a {
        padding: 20px 20px 20px 0;
        letter-spacing: 0.5em;
        display: block;
    }
    .header-logo span {
        border: 2px solid #d53d27;
        padding: 15px 7px 15px 15px;
        display: inline-block;
    }
    
    .header-navbar {
        position: relative;
        display: grid;
        justify-items: end;
        align-items: center;
    }
    
    .header-navbar__hamburger {
        display: none;
        width: 30px;
        height: 22.5px;
        position: relative;
        margin: 20px 0;
        transform: rotate(0deg);
        transition: 0.5s ease-in-out;
        cursor: pointer;
    }
    
    .header-navbar__hamburger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #ffffff;
        border-radius: 3px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: 0.25s ease-in-out;
    }
    
    .header-navbar__hamburger span:nth-child(1) {
        top: 0px;
    }
    
    .header-navbar__hamburger span:nth-child(2),.header-navbar__hamburger span:nth-child(3) {
        top: 9px;
    }
    
    .header-navbar__hamburger span:nth-child(4) {
        top: 18px;
    }
    
    .header-navbar__hamburger.active span:nth-child(1) {
        top: 8px;
        width: 0%;
        left: 50%;
    }
    
    .header-navbar__hamburger.active span:nth-child(2) {
        transform: rotate(45deg);
    }
    
    .header-navbar__hamburger.active span:nth-child(3) {
        transform: rotate(-45deg);
    }
    
    .header-navbar__hamburger.active span:nth-child(4) {
        top: 9px;
        width: 0%;
        left: 50%;
    }
    
    .header-navbar__list {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
        justify-content: end;
        list-style-type: none;
        margin: 0 -20px 0 0;
        padding: 0;
    }
    
    .header-navbar__item a {
        display: block;
        padding: 20px;
    }
    
    .header-navbar__item a:hover,
    .header-navbar__item a:focus {
        color: #d66926;
    }
    
    .header-content {
        z-index: 1;
    }
    
    .header-title {
        text-align: center;
        margin: 0 0 53px;
    }
    
    .header-buttons {
        display: flex;
        justify-content: center;
    }
    
    .skills {
        display: grid;
        grid-gap: 10px;
        padding: 10px;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .skills .btn-set {
        padding: 10px 0 30px;
    }
    
    .skill-item {
        position: relative;
        background-color: #2d3651;
        min-height: calc(33.33vh - 20px * 0.66);
        padding: 20px;
        display: grid;
        align-items: center;
        justify-items: center;
        overflow: hidden;
    }
    
    .skill-item:hover .skill-item__overlay {
        opacity: 0.95;
    }
    
    .skill-item:hover .skill-item__image {
        transform: scale(1.1);
    }
    
    .skill-item:hover .skill-item__title {
        color: #d66926;
    }
    
    /* .skill-item:nth-of-type(1) {
        grid-column: 1 / span 2;
    } */
    
    .skill-item:nth-of-type(5) {
        grid-column: 2 / span 2;
    }
    
    .skill-item:nth-of-type(6) {
        grid-column: 4;
        grid-row: 2 / span 2;
    }
    
    .skill-item__image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-position: 50% 50%;
        background-size: cover;
        transition: transform 0.5s;
    }
    
    .skill-item__overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.8;
        background-color: #2d3651;
        z-index: 1;
        transition: opacity 0.5s;
    }
    
    .skill-item__title {
        z-index: 2;
        color: #ffffff;
        letter-spacing: 0.1em;
        font-weight: 700;
        transition: color 0.5s;
    }
    
    .about {
        background-color: #e5e5e5;
    }
    
    .about .container {
        grid-gap: 100px;
        grid-template-columns: 1fr 271px;
    }
    
    .about-content h2 {
        margin-bottom: 50px;
    }
    
    .about-content p {
        font-size: 1.125rem;
    }

    .about-content p:first-of-type {
        position: relative;
    }

    .about-content p:first-of-type::after {
        position: absolute;
        top: 0;
        width: 2px;
        height: 200px;
        content: "";
        background-color: rgba(99, 117, 136, 0.1);
        right: -50px;
    }

    .about-image {
        display: grid;
        align-content: center;
        justify-items: center;
    }
    
    .about-image img {
        max-width: 100%;
        max-height: 480px;
        margin-top: 20px;
    }

    form {
        display: block;
        margin-top: 0em;
    }
    input {
        overflow: visible;
    }

    .form {
        padding: 30px 0;
        background-color: #2d3651;
    }

    .form input {
        display: block;
        width: 100%;
        height: 60px;
        padding-right: 20px;
        padding-left: 20px;
        transition: background-color 0.5s, border-color 0.5s;
        color: #ffffff;
        letter-spacing: 0.15em;
        border: 2px solid rgba(255, 255, 255, 0);
        border-bottom-color: rgba(255, 255, 255, 0.25);
        background-color: rgba(255, 255, 255, 0.05);
        font-size: 1.125rem;
    }
    .form input:hover {
        border-color: rgba(255, 255, 255, 0.15);
        border-bottom-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.15);
    }

    .form .btn-accent {
        width: 100%;
        margin: 0;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: rgba(255, 255, 255, 0.2);
        background-color: rgba(255, 255, 255, 0.1);
    }

    .form .btn-accent:hover {
        cursor: pointer;
        border-color: #ffffff;
        background-color: #d66926;
    }

    .form input::placeholder {
        color: #637588;
    }
     
    .posts h2 {
        margin-bottom: 30px;
        grid-column: 1 / span 4;
    }        

    .posts .container {
        grid-gap: 20px;
    }
    
    .posts-item {
        background-color: #f2f2f2;
    }

    /* .posts-item:nth-of-type(1) {
        grid-column: 1 / span 2;
    } */

    .posts-item:nth-of-type(6) {
        grid-column: 3 / span 2;
    }
    
    .posts-item:hover {
        background-color: #d8d8d8;
    }
    
    .posts-item:hover .posts-item__image div {
        transform: scale(1.1);
    }
    
    .posts-item:hover h3 {
        color: #2d3651;
    }
    
    .posts-item:hover p {
        color: #2d3651;
    }

    .posts-item a {
        display: grid;
        overflow: hidden;
        height: 100%;
        grid-template-rows: 300px 1fr;
    }


    .form .container {
        grid-gap: 20px;
    }

    .container {
        display: grid;
        max-width: 1340px;
        margin: auto;
        padding: 0 20px;
    }

    .posts .container {
        grid-gap: 20px;
    }

    .posts-item__image {
        position: relative;
        overflow: hidden;
    }

    .posts-item__image div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: transform 0.5s;
        background-color: #2d3651;
        background-position: 50% 50%;
        background-size: cover;
    }

    .posts-item__caption {
        display: grid;
        padding: 20px;
        align-content: center;
    }
    
    .posts-item__caption h3 {
        transition: color 0.5s;
        text-align: center;
    }
    
    .posts-item__caption p {
        transition: color 0.5s;
        text-align: center;
    }

    .footer {
        text-align: center;
        background-color:  #2d3651;
        padding: 50px 20px 70px;
    }

    .footer .fab {
        font-size: 36px;
    }
    
    .footer-social {
        position: relative;
        /* display: grid; */
        margin-bottom: 40px;

    }
    .footer-social::after {
        position: absolute;
        bottom: -20px;
        left: calc(50% - 75px / 2);
        width: 75px;
        height: 2px;
        content: "";
        background-color: rgba(255, 255, 255, 0.1);
    }

    .footer-social a {
        /* display: block; */
        padding: 10px;
        transition: color 0.5s;
    }

    .footer span:nth-of-type(1) {
        font-weight: 100;
    }

    .footer span:nth-of-type(2) {
        color: #e5e5e5;
        font-weight: 700;
    }

    .footer-social a:hover,
    .footer-social a:focus {
        color: #d66926;
    }

    .fab {
        font-family: "Font Awesome 5 Brands";
    }

    @media (min-width: 993px) {
        h1 {
            font-size: 3.75rem;
        }
        h2 {
            font-size: 2.5rem;
        }
        .section {
            padding-top: 100px;
            padding-bottom: 80px;
        }
        .btn-set {
            grid-column: 1 / span 4;
        }
        .header-title {
            margin: 0 0 53px;
        }
        .skills {
            padding: 10px;
    
            grid-gap: 10px;
            grid-template-columns: repeat(4, 1fr);
        }
        .skill-item:nth-of-type(1) {
            grid-column: 1 / span 2;
        }
        .skill-item:nth-of-type(5) {
            grid-column: 2 / span 2;
        }
        .skill-item:nth-of-type(6) {
            grid-column: 4;
            grid-row: 2 / span 2;
        }
        .about .container {
            grid-gap: 100px;
            grid-template-columns: 1fr 271px;
        }
        .about-content h2 {
            margin-bottom: 50px;
        }
        .about-content p {
            font-size: 1.125rem;
        }
        .about-content p:first-of-type::after {
            right: -50px;
        }
        .form .container {
            grid-template-columns: repeat(3, 1fr);
        }
        .posts .container {
            grid-template-columns: repeat(4, 1fr);
        }
        .posts h2 {
            margin-bottom: 30px;
    
            grid-column: 1 / span 4;
        }
        .posts-item:nth-of-type(1) {
            grid-column: 1 / span 2;
        }
        .posts-item:nth-of-type(6) {
            grid-column: 3 / span 2;
        }
    }
        
     @media (max-width: 992px) and (min-width: 769px) {
         h1 {
             font-size: 2.5rem;
         }
         h2 {
            font-size: 2rem;
        }
        .section {
            padding-top: 80px;
            padding-bottom: 60px;
        }
        .btn-set {
            grid-column: 1 / span 3;
        }
        .header-title {
            margin: 0 0 43px;
        }
        .header-buttons .btn {
            min-width: 200px;
            height: 50px;
            padding-top: 14px;
            padding-bottom: 14px;
            letter-spacing: 0.1em;
            font-size: 1rem;
        } 
        .skills {
            padding: 10px;
            grid-gap: 10px;
            grid-template-columns: repeat(3,1fr);
        }

        .skill-item:nth-of-type(1) {
            grid-column: 1 / span 2;
        }
           
        .skill-item:nth-of-type(4) {
            grid-column: 2 / span 2;
        }
    
        .skill-item:nth-of-type(5) {
            grid-column: 1 / span 2;
        }
    
        .skill-item:nth-of-type(6) {
            grid-column: 3;
            grid-row: 3 / span 2;
        }

        .skill-item:nth-of-type(7) {
            grid-row: 4 / span 2;
            }
        
        .skill-item:nth-of-type(9) {
            grid-column: 2 / span 2;
            }

        .about .container {
            grid-gap: 40px;
            grid-template-columns: 1fr 271px;
        }
        .about-content h2 {
            margin-bottom: 40px;
        }
        .about-content p:first-of-type::after {
            right: -20px;
        }
        .form .container {
            grid-template-columns: repeat(3, 1fr);
        }
        .posts .container {
            grid-template-columns: repeat(3, 1fr);
        }
        .posts h2 {
            margin-bottom: 20px;
            grid-row: 1;
            grid-column: 1 / span 4;
        }
        .posts-item:nth-of-type(1) {
            grid-column: 1 / span 2;
        }
        .posts-item:nth-of-type(3) {
            grid-row: 3;
        } 
        .posts-item:nth-of-type(4) {
            grid-column: 2 / span 3;
        }
        .posts-item:nth-of-type(5) {
            grid-column: 1 / span 2;
        }
    }
    
    @media (max-width: 768px) {
        h1 {
            font-size: 1.875rem;
        }
        h2 {
            font-size: 1.5rem;
        }
        .section {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .header-title {
            margin: 0 0 43px;
        }
        .header-menu {
            background-color: rgba(68, 89, 110, 0.25);
        }
        .header-navbar__list {
            display: none;
            position: absolute;
            background-color: rgba(68, 89, 110, 0.9);
            top: 100%;
            right: 20px;
            padding: o;
            text-align: right;
            width: auto;
        }
    
        .header-navbar__list.active {
            display: block;
        }
    
        .header-navbar__hamburger {
            display: block;
        }

        .skill-item_title {
            font-size: 1.125rem;
        }
    }  

    @media (max-width: 768px) and (min-width: 577px) {  
        /* .btn-set {
            grid-column: 1 / span 2;
        } */
        .skills {
            padding: 10px;
            grid-gap: 10px;
            grid-template-columns: repeat(4,1fr);
        }  
        .skill-item:nth-of-type(1) {
            grid-row: 1;
            grid-column: 1 / span 2;
        }
        .skill-item:nth-of-type(2) {
            grid-row: 1 / span 2;
            grid-column: 3 / span 2;
        }
        .skill-item:nth-of-type(3) {
            grid-column: 1 / span 2;
        }
        .skill-item:nth-of-type(4) {
            grid-row: 3;
            grid-column: 1 / span 4;
        }
        
        .skill-item:nth-of-type(5) {
            grid-column: 1 / span 2;
            grid-row: 4 / span 2;
        }

        .skill-item:nth-of-type(6) {
            grid-column: 3 / span 2;
            grid-row: 4;
        }
        
        .skill-item:nth-of-type(7) {
            grid-column: 3 / span 2;
            grid-row: 5;
        }
            
        .skill-item:nth-of-type(8) {
            grid-column: 1 / span 2;
            grid-row: 6;
        }
        .skill-item:nth-of-type(9) {
            grid-column: 3 / span 2;
            grid-row: 6;
        }

        .skill-item__title {
            font-size: 1.125rem;
        }

        .about .container {
            grid-gap: 20px;
            grid-template-columns: 1fr 236px;
        }
        .about-content h2 {
            margin-bottom: 30px;
        }
        .about-content p:first-of-type::after {
            right: -10px;
        }
        .form .container {
            grid-template-columns: 1fr 1fr;
        }
        .form-item:nth-of-type(1) {
            grid-column: 1 / span 2;
        }
        .posts .container {
            grid-template-columns: repeat(4, 1fr);
        } 
        .posts h2 {
            margin-bottom: 10px;
            grid-column: 1 / span 2;
        }

        .posts-item:nth-of-type(1) {
            grid-column: 1 / span 2;
        }
        .posts-item:nth-of-type(2) {
            grid-column: 3 / span 2; 
        }
        .posts-item:nth-of-type(3) {
            grid-column: 1 / span 2;
        }
        .posts-item:nth-of-type(4) {
            grid-column: 3 / span 2;
        }
        .posts-item:nth-of-type(5) {
            grid-column: 1 / span 2;
        }
        .posts-item:nth-of-type(6) {
            grid-column: 3 / span 2;
        }
    }
    
    
    @media (max-width: 576px) {
        .btn-set {
            grid-template-columns: 1fr;
            grid-column: 1 / span 7;
        }
        .btn-set .btn-accent {
            margin: 0;
        }
        .header-buttons .btn {
            min-width: 170px;
            height: 40px;
            padding-top: 10px;
            padding-bottom: 10px;
            letter-spacing: 0.05em;
            font-size: 1rem;
        }
        .header-buttons .btn:not(:last-of-type) {
            margin-bottom: 20px;
        }
        .skills {
            padding: 20px;
            grid-gap: 20px;
            grid-template-columns: 1fr;
        }
        .skill-item:nth-of-type(1) {
            grid-row: 1;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(2) {
            grid-row: 2;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(3) {
            grid-row: 3;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(4) {
            grid-row: 4;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(5) {
            grid-row: 5;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(6) {
            grid-row: 6;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(7) {
            grid-row: 7;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(8) {
            grid-row: 8;
            grid-column: 1 / span 7;
        }
        .skill-item:nth-of-type(9) {
            grid-row: 9;
            grid-column: 1 / span 7;
        }
        .skills .btn-set {
            padding: 0;
        }
        .skills .btn-set .btn-accent {
            width: 100%;
        }
        .about .container {
            grid-gap: 20px;
            grid-template-columns: 1fr;
        }
        .about-content h2 {
            margin-bottom: 30px;
            text-align: center;
        }
        .about-content p:first-of-type::after {
            display: none;
        }
        .posts .container {
            grid-template-columns: 1fr;
            grid-gap: 20px;
        }
        .posts h2 {
            grid-column: 1 / span 7;
        }
        .posts-item:nth-of-type(1) {
            grid-column: 1 / span 7;
            grid-row: 2;
        }
        .posts-item:nth-of-type(2) {
            grid-column: 1 / span 7;
        }
        .posts-item:nth-of-type(3) {
            grid-column: 1 / span 7;
        }
        .posts-item:nth-of-type(4) {
            grid-column: 1 / span 7;
        }
        .posts-item:nth-of-type(5) {
            grid-column: 1 / span 7;
        }
        .posts-item:nth-of-type(6) {
            grid-column: 1 / span 7;
        }
        .posts .btn-accent {
            min-width: 100%;
            grid-column: 1 / span 7;
        }
    }
    


                
    /* @media (min-width: 992px) {
        .form .container {
            grid-template-columns: repeat(3, 1fr);
        }
    } */

    /* @media (min-width: 768px) {
        .form .container {
            grid-template-columns: repeat(3, 1fr);
        }
    } */

    @media (min-width: 577px) {
        .btn-set .btn-accent {
            min-width: 350px;
        }
        .skills .btn-set {
            padding: 10px 0 30px;
        }
    }
    
    @media (max-width: 768px) and (min-width: 576px) {
        .header-buttons .btn {
            min-width: 170px;
            height: 40px;
            padding-top: 10px;
            padding-bottom: 10px;
            letter-spacing: 0.05em;
            font-size: 1rem;
        }
    }
    
    @media (min-width: 769px) {
        .header-navbar__list {
            display: grid;
            width: 100%;
            justify-content: end;
            grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
        }
        .header-navbar__hamburger {
            display: none;
        }
        .skill-item__title {
            font-size: 1.25rem;
        }
    }

    @media (min-height: 691px) {
        .skill-item {
            min-height: calc(33.33vh - 20px * 0.66);
        }
    }
    
    @media (max-height: 690px) {
        .skill-item {
            min-height: calc(230px - 20px * 0.66);
        }
    }