.program-cards {
margin-top:40px !important;
}
.program-cards__mobile {
display: none;
}
.program-cards__grid {
display: grid;
gap: 45px;
}
.program-cards__card-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.program-cards__grid--count-2,
.program-cards__grid--count-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.program-cards__grid--count-3,
.program-cards__grid--count-6 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.program-cards__card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--theme-palette-color-2);
overflow: hidden;
transition: all 0.3s ease;
padding:30px;
}
.program-cards__card:hover{
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.program-cards__figure {
margin: 0;
flex: 0 0 auto;
}
.program-cards__figure img {
display: block;
width: 100%;
height: 251px;
object-fit: cover;
}
.program-cards__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.program-cards__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.program-cards__tag {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--theme-palette-color-2);
background: var(--theme-palette-color-5 );
border: 1px solid var(--theme-palette-color-7);
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
line-height: 1.2;
}
.program-cards__title {
margin: 25px 0px 7px !important;
font-size: 40px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
align-self: flex-start;
color: var(--theme-palette-color-5);
font-family: var(--font-body) !important;
}
.program-cards__subtitle{
font-size: 18px;
font-weight: 400;
font-style: italic;
color: var(--theme-palette-color-5);
}
.program-cards__title.explore-title{
color: var(--theme-palette-color-5);
width:100% !important;
line-height: 1.4 !important;
}
.program-cards__description {
margin-bottom: 30px;
margin-top:10px;
}
.program-cards__description p {
margin: 0;
font-size: 18px;
font-weight:500 !important;
line-height: 1.65;
color: var(--theme-palette-color-5)
}
.program-cards__actions {
margin-top: auto;
}
.program-cards__button {
display: block;
text-decoration: none;
border-radius: 0px;
padding: 14px 20px !important;
font-size: 16px !important;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
width:100% !important;
text-align: center !important;
}
.program-cards__card--explore {
background: var(--theme-palette-color-1);
padding: 25px !important;
}
.program-cards__explore-link {
display: flex;
flex: 1 1 auto;
text-decoration: none;
color: inherit;
height: 100%;
}
.program-cards__body--explore {
justify-content: center;
width: 100%;
}
.program-cards__explore-inner {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
.program-cards__accordion-heading {
margin: 0 0 12px;
}
.program-cards__accordion-item {
margin-bottom: 12px;
}
.program-cards__accordion-trigger {
appearance: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
border:0px !important;
background: var(--theme-palette-color-8);
color:var(--theme-palette-color-2);
border-radius: 2px;
padding: 14px 16px;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
cursor: pointer;
text-transform:uppercase;
}
.program-cards__accordion-trigger[aria-expanded="true"]
{
background: var(--theme-palette-color-11);
border-color: var(--theme-palette-color-11);
color:var(--theme-palette-color-5);
font-weight: 800;
}
.program-cards__accordion-icon {
position: relative;
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.program-cards__accordion-icon::before,
.program-cards__accordion-icon::after {
content: "";
position: absolute;
background: currentColor;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity .2s ease;
}
.program-cards__accordion-icon::before {
width: 14px;
height: 2px;
}
.program-cards__accordion-icon::after {
width: 2px;
height: 14px;
}
.program-cards__accordion-trigger[aria-expanded="true"] .program-cards__accordion-icon::after {
opacity: 0;
}
.program-cards__accordion-panel {
margin-top: -1px;
} .programs-browser {
margin: 0;
}
.programs-browser__inner {
display: grid;
grid-template-columns: 370px minmax(0, 1fr); align-items: start;
margin-top: 40px !important;
}
.programs-browser__tablist {
display: flex;
flex-direction: column; }
.programs-browser__tab {
appearance: none;
position: relative;
width: 100%;
text-align: left;
border-bottom: 1px solid var(--theme-palette-color-7);
border-left:1px solid var(--theme-palette-color-7);
background: var(--theme-palette-color-8);
color: var(--theme-palette-color-2); padding: 24px 16px;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.programs-browser__tab:first-child{
border-top-left-radius:6px;
border-top: 1px solid var(--theme-palette-color-7);
}
.programs-browser__tab:last-child{
border-bottom-left-radius:6px;
} .programs-browser__tab::after {
content: "";
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid var(--theme-palette-color-1); opacity: 0;
transition: opacity 0.2s ease;
}
.programs-browser__tab:hover::after{
opacity: 1;
} .programs-browser__tab[aria-selected="true"]::after {
opacity: 1;
}
.programs-browser__panels {
padding: 35px;
border: 1px solid var(--theme-palette-color-7);
border-top-right-radius:6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
}
.programs-browser__tab:hover {
background: var(--theme-palette-color-1);
border-color: var(--theme-palette-color-1);
color:var(--theme-palette-color-5);
}
.programs-browser__tab[aria-selected="true"] {
background: var(--theme-palette-color-1);
border-color: var(--theme-palette-color-1);
color:var(--theme-palette-color-5);
}
.programs-browser__panel {
min-width: 0;
}
.programs-browser__accordion-heading {
display: none;
margin: 0 0 12px;
}
.programs-browser__accordion-trigger {
appearance: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
border: 1px solid var(--theme-palette-color-7);
background: var(--theme-palette-color-8);
color: var(--theme-palette-color-2);
border-radius: 6px;
padding: 14px 16px;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
cursor: pointer;
margin-bottom:5px;
}
.programs-browser__accordion-trigger[aria-expanded="true"]
{
background: var(--theme-palette-color-1);
border-color: var(--theme-palette-color-1);
color:var(--theme-palette-color-5);
}
.programs-browser__accordion-icon {
position: relative;
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.programs-browser__accordion-icon::before,
.programs-browser__accordion-icon::after {
content: "";
position: absolute;
background: currentColor;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity .2s ease;
}
.programs-browser__accordion-icon::before {
width: 14px;
height: 2px;
}
.programs-browser__accordion-icon::after {
width: 2px;
height: 14px;
}
.programs-browser__accordion-trigger[aria-expanded="true"] .programs-browser__accordion-icon::after {
opacity: 0;
}
.programs-browser__card { }
.programs-browser__figure {
margin: 0 0 18px;
}
.programs-browser__figure img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.programs-browser__title {
margin-bottom:25px !important;
font-size: 30px;
line-height: 1.2;
font-weight: 700;
color:var(--theme-palette-color-2);
}
.programs-browser__subtitle {
margin-bottom:20px !important;
font-size: 18px;
line-height: 1.4 !important;
font-weight: 600;
color:var(--theme-palette-color-2);
}
.programs-browser__description {
margin-bottom: 25px;
font-size: 16px;
line-height: 1.7;
color: var(--theme-palette-color-3);
}
.programs-browser__description > *:first-child {
margin-top: 0;
}
.programs-browser__description > *:last-child {
margin-bottom: 0;
}
.programs-browser__actions {
margin: 0;
display:inline-block
}
.programs-card-content { }
@media (max-width: 991px) {
.program-cards__grid--count-3,
.program-cards__grid--count-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.program-cards__figure img {
height: 220px;
}
}
@media (max-width: 767px) {
.program-cards__card
{
border-top:0px !important;
}
.program-cards__button
{
width:100%;
text-align: center;
}
.program-cards__desktop {
display: none;
}
.program-cards__mobile {
display: block;
}
.program-cards__figure img {
height: 220px;
}
.program-cards__title {
font-size: 22px !important;
}
.programs-browser__inner {
grid-template-columns: 1fr;
gap: 0;
}
.programs-browser__nav-wrap {
display: none;
}
.programs-browser__panel {
display: block !important;
margin-bottom: 12px;
}
.programs-browser__panel[hidden] {
display: block !important;
}
.programs-browser__accordion-heading {
display: block;
}
.programs-browser__card {
padding: 0px;
}
.programs-browser__panel .programs-browser__card {
display: none;
}
.programs-browser__panel.is-open .programs-browser__card {
display: block;
}
.programs-browser__title {
font-size: 24px !important;
}
.programs-browser__subtitle {
font-size: 18px !important;
}
}
@media (max-width: 460px) {
.program-cards__title {
font-size: 20px !important;
}
}