.his-semesters-quick-links {
display: grid;
gap: 20px;
}

.his-semester-card {
display: block;
background: var(--e-global-color-c43df5b);
border-radius: 13px;
padding: 30px;
text-decoration: none;
color: inherit;
}

.his-semester-card__top {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
column-gap: 20px;
row-gap: 10px;
margin-bottom: 25px;
}

.his-semester-card__date {
width: 51px;
height: 51px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.9rem;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}

.his-semester-card__month-year,
.his-semester-card__types {
font-size: 1.1rem;
line-height: 1.3em;
font-weight: 500;
color: #A8A8A8;
text-transform: uppercase;
}

.his-semester-card__types {
font-weight: 400;
justify-self: end;
text-align: right;
}

.his-semester-card__types a {
color: inherit;
text-decoration: none !important;
}

.his-semester-card__types a:hover {
color: var(--e-global-color-primary);
}

.his-semester-card__types span {
margin: 0 10px;
}

.his-semester-card__title {
margin: 0 0 10px;
font-size: 1.6rem;
line-height: 1.3em;
font-weight: 700;
color: var(--e-global-color-text);
}

.his-semester-card__status {
font-size: 1rem;
line-height: 1.3em;
font-weight: 400;
color: #A8A8A8;
}

.his-semester-card__bottom {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
column-gap: 20px;
margin-top: 20px;
align-items: center;
}

.his-semester-card__progress {
width: 100%;
height: 3px;
background: rgba(0,0,0,.06);
border-radius: 999px;
overflow: hidden;
}

.his-semester-card__progress-bar {
display: block;
height: 100%;
border-radius: 999px;
}

.his-semester-card__start-date {
font-size: 1rem;
line-height: 1.3em;
font-weight: 700;
color: #A8A8A8;
}

.his-semester-card:nth-child(3n + 1) .his-semester-card__date,
.his-semester-card:nth-child(3n + 1) .his-semester-card__progress-bar {
background-color: var(--e-global-color-327d926);
}

.his-semester-card:nth-child(3n + 2) .his-semester-card__date,
.his-semester-card:nth-child(3n + 2) .his-semester-card__progress-bar {
background-color: var(--e-global-color-a63d1e2);
}

.his-semester-card:nth-child(3n) .his-semester-card__date,
.his-semester-card:nth-child(3n) .his-semester-card__progress-bar {
background-color: var(--e-global-color-primary);
}

@media (max-width: 1100px) {
.his-semester-card__top {
grid-template-columns: auto 1fr;
}

.his-semester-card__types {
grid-column: 1 / -1;
justify-self: start;
text-align: left;
white-space: normal;
}
}

@media (min-width: 1101px) {
.his-semester-card__types {
max-width: 400px;
}

.his-semester-card__types a {
display: block;
}

.his-semester-card__types span {
display: none;
}
}	

@media (max-width: 767px) {
.his-semester-card {
padding: 20px;
}

.his-semester-card__bottom {
grid-template-columns: 1fr;
row-gap: 10px;
}

.his-semester-card__start-date {
justify-self: end;
}
}