/* ==========================================================
   ALILARIO.COM
   About
========================================================== */


/* ==========================================================
   CONTENT
========================================================== */

.about-content{

    display:grid;

    grid-template-columns:320px minmax(0,720px);

    gap:62px;

    align-items:start;

    padding:70px;

}


/* ==========================================================
   IMAGE
========================================================== */

.about-image{

    position:relative;

    top:5px;

}


.about-image img{

    display:block;

    width:100%;

    border-radius:2px;

    transition:.35s ease;

}


.about-image img:hover{

    transform:scale(1.015);

}


/* ==========================================================
   INFORMATION
========================================================== */

.about-info{

    display:flex;

    flex-direction:column;

    gap:72px;

}


/* ==========================================================
   BLOCK
========================================================== */

.about-block{

    max-width:700px;

}


/* ==========================================================
   TEXT
========================================================== */

.about-block p{

    margin:0;

    font-size:16px;

    line-height:1.85;

    color:#666666;

    font-weight:300;

}


.about-block strong{

    font-weight:400;

}


/* ==========================================================
   LABELS
========================================================== */

.about-label{

    display:block;

    margin-bottom:14px;

    font-size:11px;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#777;

}


/* ==========================================================
   LINKS
========================================================== */

.about-block a{

    color:inherit;

    text-decoration:none;

    transition:.25s ease;

}


.about-block a:hover{

    opacity:.55;

}


/* ==========================================================
   RESPONSIVE
   TABLET + MOBILE ONLY
========================================================== */


/* ==========================================================
   TABLET
   601px — 1024px
========================================================== */

@media (min-width:601px) and (max-width:1024px){

    .about-content{

        grid-template-columns:1fr;

        gap:56px;

        padding:110px 50px 50px;

    }


    .about-image{

        position:static;

        max-width:420px;

    }

}


/* ==========================================================
   MOBILE
   600px AND BELOW
========================================================== */

@media (max-width:600px){

    .about-content{

        grid-template-columns:1fr;

        gap:48px;

        padding:90px 32px 32px;

    }


    .about-image{

        position:static;

        max-width:100%;

    }


    .about-info{

        gap:48px;

    }


    .about-block p{

        font-size:16px;

    }

}


/* ==========================================================
   VERY SMALL PHONES
   380px AND BELOW
========================================================== */

@media (max-width:380px){

    .about-content{

        padding:24px;

    }

}