Bloque - Beneficios Home
Implementación Bloque - Beneficios Home
Nombre: Bloque - Beneficios Home
Estructura: Iconos con texto
Apariencia:

CSS:
//Escritorio
.services-list {
padding-bottom: 1rem;
margin-bottom: 3rem;
margin-top: 40px;
border-bottom: 1px solid $primaryColorDark;
.condiciones{
width: 100%;
text-align: center;
font-size: 14px;
font-style: italic;
}
&.no-first {
ul {
li {
&:first-of-type {
h5 {
padding-left: 0.5rem;
font-size: 1.2rem;
}
}
}
}
}
&.no-border {
border-bottom: none;
}
ul {
display: flex;
justify-content: column;
flex-wrap: wrap;
li {
padding: 0.5rem;
align-items: center;
display: flex;
justify-content: left;
h5 {
font-size: 1.2rem;
color: $primary-color;
padding-left: 0.5rem;
}
h6 {
font-size: 0.8rem;
color: $primary-color;
padding-left: 0.5rem;
}
span {
display: inline-block;
color: $primary-color;
width: auto;
float: left;
height: 40px;
font-size: 2rem;
padding: 0 0.5rem;
padding-right: 1rem;
}
&:first-of-type {
h5 {
padding-left: 0;
font-size: 1rem;
}
}
}
}
@media (max-width: 768px) {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 2rem;
ul {
flex-direction: column;
li {
width: 60%;
margin: 0 auto;
&:first-child {
text-align: center;
}
&.no-text {
text-align: left;
}
}
}
}
}
.mobile .services-list {
display: block;
ul {
width: 100%;
display: unset;
li.no-text {
float: left;
width: calc(33% - 15px) !important;
flex-wrap: wrap;
text-align: center;
span {
font-size: 25px;
height: auto;
width: 100%;
}
h5{
font-size: 13px;
margin: 10px 0px;
}
}
}
}
padding-bottom: 1rem;
margin-bottom: 3rem;
margin-top: 40px;
border-bottom: 1px solid $primaryColorDark;
.condiciones{
width: 100%;
text-align: center;
font-size: 14px;
font-style: italic;
}
&.no-first {
ul {
li {
&:first-of-type {
h5 {
padding-left: 0.5rem;
font-size: 1.2rem;
}
}
}
}
}
&.no-border {
border-bottom: none;
}
ul {
display: flex;
justify-content: column;
flex-wrap: wrap;
li {
padding: 0.5rem;
align-items: center;
display: flex;
justify-content: left;
h5 {
font-size: 1.2rem;
color: $primary-color;
padding-left: 0.5rem;
}
h6 {
font-size: 0.8rem;
color: $primary-color;
padding-left: 0.5rem;
}
span {
display: inline-block;
color: $primary-color;
width: auto;
float: left;
height: 40px;
font-size: 2rem;
padding: 0 0.5rem;
padding-right: 1rem;
}
&:first-of-type {
h5 {
padding-left: 0;
font-size: 1rem;
}
}
}
}
@media (max-width: 768px) {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 2rem;
ul {
flex-direction: column;
li {
width: 60%;
margin: 0 auto;
&:first-child {
text-align: center;
}
&.no-text {
text-align: left;
}
}
}
}
}
.mobile .services-list {
display: block;
ul {
width: 100%;
display: unset;
li.no-text {
float: left;
width: calc(33% - 15px) !important;
flex-wrap: wrap;
text-align: center;
span {
font-size: 25px;
height: auto;
width: 100%;
}
h5{
font-size: 13px;
margin: 10px 0px;
}
}
}
}