@charset "utf-8";

/*==================================================
FOOTER
==================================================*/

/*==================================================
BENEFÍCIOS
==================================================*/
#benefits{display: grid; grid-template-columns: 1fr; gap: 22px; padding-block: 42px 24px; padding-inline: max(6vw, 30px);}
.benefit{display: grid; grid-auto-flow: column; gap: 22px;}
.benefit h2{margin: auto; font-size: 14px; text-transform: uppercase;}
.benefit p{font-size: 12px;}
#outer-rights{background: var(--soft-white); text-align: center;}
#footer{display: grid; grid-template-columns: 1fr; gap: 12px; padding-block: 22px;}
#footer-message{}
#footer-message p{}
.excellence{font-family: "Kalam"; font-size: 22px; font-weight: 700;}
#footer-heart{position: relative; inset-block-start: -44px; inset-inline-start: 288px;}
#footer-social{display: grid; grid-auto-flow: column; align-items: center; justify-content:center; gap: 22px; padding-block-end: 1rem;}
#footer-social a{display: inline-flex; align-items: center; justify-content: center; transition: transform var(--transition);}
#footer-social a:hover{transform: translateY(-3px);}

#copyright{padding: 1rem; color: var(--ink-muted); font-size: 12px;}

/*==================================================
768px
==================================================*/

@media only screen and (min-width:768px){
#benefits{grid-template-columns: repeat(2, 1fr);}
#footer{grid-template-columns: 32px repeat(2, 1fr); align-items: center;}
}

/*==================================================
1024px
==================================================*/

@media only screen and (min-width:1024px){
#footer{grid-template-columns: 230px repeat(2, 1fr); gap: 22px;}
}

/*==================================================
1180px
==================================================*/

@media only screen and (min-width:1180px){
#benefits{grid-template-columns: repeat(4, 1fr); padding-block: 26px 10px; padding-inline: max(1vw, 12px);}
#footer{grid-template-columns: repeat(3, 1fr);}
}

/*==================================================
1280px
==================================================*/
@media only screen and (min-width:1280px){
#benefits{padding-block: 36px 18px;}
}