/* montserrat-100 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/montserrat-v24-latin-100.ttf');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-100.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-100.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-100.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-100.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-100.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-200 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/montserrat-v24-latin-200.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-200.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-200.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-200.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-200.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-200.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-300 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat-v24-latin-300.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-300.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-300.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-300.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-300.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-300.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v24-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-regular.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-var(--fw-500) - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v24-latin-500.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-500.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-500.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-500.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-500.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v24-latin-600.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-600.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-600.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-600.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-600.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-600.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v24-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-800 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/montserrat-v24-latin-800.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-800.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-800.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-800.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-800.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-800.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-900 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/montserrat-v24-latin-900.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-900.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-900.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-900.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-900.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-900.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-100italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/montserrat-v24-latin-100italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-100italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-100italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-100italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-100italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-100italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-200italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/montserrat-v24-latin-200italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-200italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-200italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-200italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-200italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-200italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-300italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/montserrat-v24-latin-300italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-300italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-300italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-300italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-300italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-300italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/montserrat-v24-latin-italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-500italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/montserrat-v24-latin-500italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-500italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-500italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-500italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-500italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-500italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-600italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/montserrat-v24-latin-600italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-600italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-600italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-600italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-600italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-600italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-700italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/montserrat-v24-latin-700italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-700italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-700italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-700italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-700italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-700italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-800italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/montserrat-v24-latin-800italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-800italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-800italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-800italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-800italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-800italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-900italic - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/montserrat-v24-latin-900italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/montserrat-v24-latin-900italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/montserrat-v24-latin-900italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/montserrat-v24-latin-900italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/montserrat-v24-latin-900italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/montserrat-v24-latin-900italic.svg#Montserrat') format('svg');
    /* Legacy iOS */
}



/*----Utilities----*/
:root {
    /**
   * colors
   */

    --gray--50: #999;
    --primary-color: #425664;
    --secondary-color: #fff;
    --footer-color: #425664;
    --theme-color: #c6ad8f;
    --white-20: #f2f2f2;
    --white-90: #f9f9f9;
    --white-0: #f0f0f0;

    .dark-theme {
        --primary-color: #fff;
        --secondary-color: #000;
        --footer-color: #000;
    }

    /**
     * typography
     */

    --f-montserrat: 'Montserrat',
    sans-serif;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;


    /**
     * spacing
     */

    --p-1: 1.875rem;
    --p-2: 1.5rem;
    --p-3: 1.375rem;
    --p-4: 1.125rem;
    --p-5: 0.895rem;
    --p-6: 0.813rem;
    --p-7: 0.75rem;


    --m-1: 1.875rem;
    --m-2: 1.5rem;
    --m-3: 1.375rem;
    --m-4: 1.125rem;
    --m-5: 0.875rem;
    --m-6: 0.813rem;
    --m-7: 0.75rem;









    --spanish-gray: hsl(0, 0%, 60%);
    --sonic-silver: hsl(0, 0%, 47%);
    --eerie-black: hsl(0, 0%, 13%);
    --salmon-pink: hsl(353, 100%, 78%);
    --sandy-brown: hsl(29, 90%, 65%);
    --bittersweet: hsl(0, 100%, 70%);
    --ocean-green: hsl(152, 51%, 52%);
    --davys-gray: hsl(0, 0%, 33%);
    --cultured: hsl(0, 0%, 93%);
    --white: hsl(0, 100%, 100%);
    --onyx: hsl(0, 0%, 27%);

    /**
   * typography
   */

    --fs-1: 1.563rem;
    --fs-2: 1.375rem;
    --fs-3: 1.25rem;
    --fs-4: 1.125rem;
    --fs-5: 1rem;
    --fs-6: 0.938rem;
    --fs-7: 0.875rem;
    --fs-8: 0.813rem;
    --fs-9: 0.75rem;
    --fs-10: 0.688rem;
    --fs-11: 0.625rem;

    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;

    /**
   * border-radius
   */

    --border-radius-md: 10px;
    --border-radius-sm: 5px;

    /**
   * transition 
   */

    --transition-timing: 0.2s ease;



}


* {

    font-family: 'Montserrat';
    margin: 0;
    padding: 0;
    list-style: none;

}


.row {
    display: grid;
    justify-content: space-between;
    margin-top: 4%;
    grid-template-columns: 2fr 1fr;
    grid-gap: var(--p-5);
}

#text {
    font-weight: 700;
    font-size: 50px;
}

.footer__col {
    line-height: var(--p-2);
    font-size: 14px;
}

.footer__col button {
    margin: var(--p-5) 0rem;
}

.footer__col li,
.footer__col p {
    padding: var(--p-5) 0rem;
}

.footer__col li a {
    text-decoration: none;
    color: #001730;
}

.origin__what {
    font-weight: 700;
}

.origin p {
    padding-top: var(--p-3);
    line-height: 1.8;
}

.origin a {
    color: #001730;
}




.fa {
    color: #fff;
}

.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.container {
    width: 80%;
    margin: auto;
    padding: 0 var(--p-5);
    overflow: hidden;
}

header {
    text-align: center;
    margin: var(--p-3);
    color: #001730;
}

.button {
    appearance: none;
    background-color: #001730;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 50px;
    border-color: #001730;
    display: flex;
    font-size: var(--p-4);
    font-family: inherit;
    height: 2.5em;
    line-height: 1.5;
    padding-bottom: calc(0.5em - 1px);
    padding-left: calc(0.75em - 1px);
    padding-right: calc(0.75em - 1px);
    padding-top: calc(0.5em - 1px);
    color: var(--white-20);
    cursor: pointer;
    font-weight: var(--fw-400);
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.button .fa {
    padding-left: var(--p-7);
}

.fa-spinner {
    color: #fff;
}

.fa-asterisk {
    color: #001730;
}

hr {
    border: none;
    background: var(--theme-color);
    height: .5px;
    margin: 10px;
}

.copyright {
    font-size: 14px;
    padding: var(--p-1);
    color: #001730;
    text-align: center;
    font-weight: var(--fw-500);
}

.converter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    background-color: #001730;
    align-items: center;
    color: var(--white-0);
    border-radius: 10px;
    margin-bottom: var(--p-3);
}

.converter__title {
    margin-bottom: var(--p-1);
}

.converter__form {
    background-color: #fff;
    color: #001730;
    margin: .5rem;
    padding: var(--p-1);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.converter__form h5 {
    padding-bottom: var(--p-3);
}

.coverter__result {
    padding: var(--p-1);
    text-align: center;
}

.has-addons {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--p-4);
}


#inputUnit,
#outputUnit {
    background-color: #fff;
    border-radius: .375em;
    color: #363636;
    padding: 1.2rem;
    outline: none;
}

#inputValue,
#outputValue {
    border: 1px solid #001730;
    border-radius: 5px;
    border-right: none;
    padding: 1rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
    width: 100%;
}

#inputValue:focus {
    border-color: rgb(0, 23, 48);
    box-shadow: 0 0 0 0.125em rgba(0, 23, 48, .25);
}

#inputUnit {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid #001730;
    cursor: pointer;
}

#outputUnit {
    width: 100%;
}

.message {
    background-color: #feecf0;
    border-radius: .375em;
    font-size: 1rem;
    border-color: #f14668;
    border-radius: .375em;
    border-style: solid;
    border-width: 0 0 0 4px;
    color: #cc0f35;
    padding: 1.25em 1.5em;
    font-weight: bold;
    position: fixed;
    top: 40px;
    left: 20px;
    right: 20px;
    z-index: 5;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: 5;
    width: 300px;


}


.message2 {
    background-color: #effaf5;
    border-radius: .375em;
    font-size: 1rem;
    border-color: #48c78e;
    border-radius: .375em;
    border-style: solid;
    border-width: 0 0 0 4px;
    color: #257953;
    padding: 1.25em 1.5em;
    font-weight: bold;


    position: fixed;
    top: 40px;
    left: 20px;
    right: 20px;
    z-index: 5;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: 5;
    width: 300px;

}




.message.is-success .message-body {
    border-color: #48c78e;
    color: #257953;
}

.message .is-success {
    background-color: #effaf5;
}




.info {
    color: #001730;
    margin: var(--p-3) 0rem;
}

.usage {
    color: #001730;
}

.usage ul li {
    padding: var(--p-6) 0rem;
}

.formulas li {
    padding: var(--p-7) 0rem;
}




@media screen and (max-width:576px) {

#text {
    font-weight: 700;
    font-size: 20px;
}

    .converter__title {
        font-size: var(--p-5);
    }

    .d-flex {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        align-content: center;
    }


    .d-flex .button {
        margin: var(--p-7) 0rem;
    }

    #outputUnit {
        width: 100%;
    }



    .converter__form {
        margin: 0rem;
        padding: var(--p-7);

    }

    .converter {

        grid-template-columns: 1fr;


    }

    .coverter__result {
        height: 30vh;
    }
        .row {
        grid-template-columns: 1fr;

    }

}

@media screen and (max-width: 768px) {

#text {
    font-weight: 700;
    font-size: 20px;
}
    .d-flex {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        align-content: center;
    }


    .d-flex .button {
        margin: var(--p-7) 0rem;
    }

    .converter__form {
        border-radius: 5px;
    }

    .converter {
        grid-template-columns: 1fr;
    }

    .coverter__result {
        height: 30vh;
    }

        .row {
        grid-template-columns: 1fr;

    }

}


@media screen and (min-width: 769px) and (max-width:1024px) {
    #text {
    font-weight: 700;
    font-size: 20px;
}

    .d-flex {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        align-content: center;
    }


    .d-flex .button {
        margin: var(--p-7) 0rem;
    }

    .converter__form {
        border-radius: 5px;
    }

    .converter {
        grid-template-columns: 1fr;
    }

    .coverter__result {
        height: 30vh;
    }

        .row {
        grid-template-columns: 1fr;

    }
}

@media screen and (min-width:1200px) {}