الگو:Home/3.css

/* .content-improvement-box */ .content-improvement-box { display: flex;

   flex-flow: wrap column;
   margin: 0 -0.5rem;

}

/* .content-improvement-problems */ .content-improvement-problems, .content-improvement-invitation {

   margin: 0 0.5rem;

}

.content-improvement-problems { order: 2; display: flex;

   flex-wrap: wrap;
   margin: -0.5rem 0;
   padding-top: 1rem;

}

.content-improvement-item {

   flex: 1 2 auto;
   padding: 0.5rem;

width: 100%; }

body.skin-vector-2022 .content-improvement-item:last-child {

   display: none;

}

/** .content-improvement-item color modifier **/ .content-improvement-item.-color-red > a {

   border-bottom: 5px solid #dd3333;

}

.content-improvement-item.-color-red > a:hover, .content-improvement-item.-color-red > a:focus {

   background-color: #dd3333;

}

.content-improvement-item.-color-blue > a {

   border-bottom: 5px solid #36c;

}

.content-improvement-item.-color-blue > a:hover, .content-improvement-item.-color-blue > a:focus {

   background-color: #36c;

}

.content-improvement-item.-color-green > a {

   border-bottom: 5px solid #00af89;

}

.content-improvement-item.-color-green > a:hover, .content-improvement-item.-color-green > a:focus {

   background-color: #00af89;

}

.content-improvement-item.-color-Brown > a {

   border-bottom: 5px solid #8b5a2b;

}

.content-improvement-item.-color-Brown > a:hover, .content-improvement-item.-color-Brown > a:focus {

   background-color: #8b5a2b;

}

.content-improvement-item.-color-golden > a {

   border-bottom: 5px solid #af8800;

}

.content-improvement-item.-color-golden > a:hover, .content-improvement-item.-color-golden > a:focus {

   background-color: #af8800;

}

.content-improvement-item.-color-lavender > a {

   border-bottom: 5px solid #680a0a;

}

.content-improvement-item.-color-lavender > a:hover, .content-improvement-item.-color-lavender > a:focus {

   background-color: #680a0a;

}

/** .content-improvement-item > a **/ .content-improvement-item > a {

   box-sizing: border-box;
   position: relative;
   z-index: 0;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   overflow: hidden;
   padding: 0.5rem 1rem 1rem;
   width: 100%;
   height: 100%;
   color: inherit;
   background: #f7f7f7;
   text-decoration: none;
   transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;

}

.content-improvement-item > a:hover, .content-improvement-item > a:focus {

   color: #fff;
   box-shadow: 0 2px 5px #ccc;

}

.content-improvement-item > a:active {

   opacity: 0.7;
   box-shadow: 0 4px 7px #ccc;

}

.content-improvement-item > a::before {

   content: "";
   position: absolute;
   z-index: -1;
   top: 50%;
   right: 0.75rem;
   transform: translateY(-50%);
   width: 100%;
   height: 90%;
   background-size: contain;
   background-position: right;
   background-repeat: no-repeat;
   opacity: 0.02;
   transition: opacity .1s ease-in-out;

}

.content-improvement-item > a:hover::before, .content-improvement-item > a:focus::before {

   opacity: 0.08;

}

.content-improvement-item > a > span {

   display: block;
   width: 100%;

}

.content-improvement-item > a > span:nth-child(2) { white-space: nowrap;

   overflow: hidden;
   text-overflow: ellipsis;

}

.content-improvement-item__number {

   font-weight: bold;
   font-size: 1.8em;
   padding-right: 0.25em;

}

/* .content-improvement-invitation */ .content-improvement-invitation { order: 1;

   padding: 1rem;
   background: #f7f7f7;

}

.content-improvement-invitation__icon {

   margin: 0 0 0.5em 0.75em;
   float: right;
   width: 5rem;
   height: 5rem;
   background-size: 5rem;
   background-position: center;
   background-repeat: no-repeat;

}

body.skin-vector-2022 .content-improvement-invitation__icon {

   width: 4.35rem;
   height: 4.35rem;
   background-size: 4.35rem;

}

.content-improvement-invitation__title {

   font-weight: bold;
   font-size: 1.1em;

}

.content-improvement-invitation__content p:last-child { margin-bottom: 0; }

.content-improvement-invitation__button { padding: 0.75rem 0 0.45rem; }

/* responsive */ @media (min-width: 768px) { /* .content-improvement-problems */ .content-improvement-item { width: 40%; } }

@media (min-width: 992px) { /* .content-improvement-box */ .content-improvement-box { flex-direction: row; }

/* .content-improvement-problems */ .content-improvement-problems { flex: 2; order: 1;

   	padding-top: 0;

}

body.skin-vector-2022 .content-improvement-problems { flex: 5; }

/* .content-improvement-invitation */ .content-improvement-invitation { flex: 1; order: 2; }

body.skin-vector-2022 .content-improvement-invitation { flex: 3; } }

@media (min-width: 1200px) { /* .content-improvement-problems */ body:not(.skin-vector-2022) .content-improvement-item { width: 30%; } }

html.skin-theme-clientpref-night .content-improvement-item > a { background: inherit; }