173 lines
3.2 KiB
CSS
173 lines
3.2 KiB
CSS
.g-learn-callout {
|
|
padding-top: 88px;
|
|
padding-bottom: 88px;
|
|
background-image: url(/img/nomad-panel-learn.svg);
|
|
background-size: contain;
|
|
background-position: bottom right;
|
|
background-repeat: no-repeat;
|
|
|
|
@media (max-width: 768px) {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
& .learn-container {
|
|
@media (max-width: 1200px) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
& .mobile-button {
|
|
@media (min-width: 1201px) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .column-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 36px;
|
|
|
|
@media (max-width: 1200px) {
|
|
margin: 0 -16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
& .column-content {
|
|
& h2 {
|
|
@media (max-width: 1200px) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .desktop-button {
|
|
@media (max-width: 1200px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin: 0 16px;
|
|
width: 33.333%;
|
|
overflow: auto;
|
|
|
|
@media (max-width: 1200px) {
|
|
text-align: center;
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0;
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
|
|
& > a {
|
|
margin: 0 16px;
|
|
width: 33.333%;
|
|
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
|
|
display: flex;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
width: calc(50% - 32px);
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
width: 100%;
|
|
|
|
&:last-child {
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
|
|
& .course {
|
|
border: 1px solid var(--gray-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
& > div {
|
|
min-height: 200px;
|
|
padding: 25px;
|
|
}
|
|
|
|
& .image {
|
|
background: var(--gray-7);
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
& img {
|
|
max-width: 80px;
|
|
max-height: 80px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
& h4 {
|
|
color: var(--gray-2);
|
|
}
|
|
|
|
& .time {
|
|
color: var(--gray-4);
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
& .content {
|
|
text-align: center;
|
|
background: #fff;
|
|
@media (max-width: 768px) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
& h4 {
|
|
margin: 24px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.brand-consul {
|
|
& .content label {
|
|
color: var(--consul);
|
|
}
|
|
}
|
|
|
|
/* Brand -- Nomad */
|
|
&.brand-nomad {
|
|
& .content label {
|
|
color: var(--nomad);
|
|
}
|
|
}
|
|
|
|
/* Brand -- Packer */
|
|
&.brand-packer {
|
|
& .content label {
|
|
color: var(--packer);
|
|
}
|
|
}
|
|
|
|
/* Brand -- Terraform */
|
|
&.brand-terraform {
|
|
& .content label {
|
|
color: var(--terraform);
|
|
}
|
|
}
|
|
}
|
|
}
|