.subject-list {
    width: 100%;
    float: left;
    padding: 3rem 0
}

.subject-list+.related {
    padding-top: 0
}

.subject-list h2 {
    margin: 0;
    padding-bottom: 0
}

.detailed-view,
.simple-view {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: Inter, sans-serif;
    cursor: pointer;
    background-color: var(--ehu-colors-neutral-light);
    float: left;
    font-size: medium;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
    padding: 1.5rem;
    transition: background-color .3s ease-in-out 0s;
    border: none
}

.detailed-view:hover,
.simple-view:hover {
    background-color: var(--ehu-colors-primary-light);
    color: var(--ehu-colors-neutral-white)
}

.subject-list-wrap.ehu-list__wrap {
    width: 100%;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0
}
.subjects-toggle-wrap{margin:1.5rem 0}
.active {
    background-color: var(--ehu-colors-primary);
    color: var(--ehu-colors-neutral-white)
}

.ehu-list__detailed,
.ehu-list__simple {
    width: 100%;
    float: left
}

.subject-list__simple-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

@media (min-width:391px) and (max-width:767px) {
    .subject-list__simple-wrap {
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width:769px) and (max-width:1142px) {
    .subject-list__simple-wrap {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (min-width:1144px) {
    .subject-list__simple-wrap {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

.subject-list__detailed-wrap,
.subject-list__grid-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem
}

.ehu-list__detailed {
    display: none
}

.detailed-only .ehu-list__detailed,
.grid-only .ehu-list__grid {
    display: block
}

.subject-list__detailed-wrap .single-subject__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
    padding: 1.5rem;
    color: initial
}

@media (min-width:1144px) {
    .subject-list__detailed-wrap .single-subject__panel {
        grid-template-columns: 1fr 1fr
    }
}

.subject-list__grid-wrap {
    display: grid;
    grid-gap: 1.5rem
}

@media (min-width:769px) {
    .subject-list__grid-wrap {
        grid-template-columns: 1fr 1fr
    }
}

@media (min-width:1144px) {
    .subject-list__grid-wrap {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.single-subject__panel__right dl {
    margin: 0;
    display: grid;
    background-color: var(--ehu-colors-neutral-light);
    padding: 1.5rem;
    height: 100%;
    font-size: 1rem
}

@media (min-width:769px) {
    .single-subject__panel__right dl {
        grid-template-columns: auto 1fr
    }
}

@media (min-width:769px) and (max-width:1142px) {
    .single-subject__panel__right dl {
        grid-gap: .75rem 0
    }
}

.subject-list__detailed-wrap dt {
    font-weight: 700
}

@media (max-width:767px) {

    .subject-list__detailed-wrap dl,
    .subject-list__detailed-wrap dt {
        font-size: .875rem
    }
}

.subject-list__detailed-wrap dd {
    -webkit-margin-start: 0;
    margin-inline-start: 0
}

@media (max-width:767px) {
    .subject-list__detailed-wrap dd {
        margin-bottom: .75rem
    }
}

@media (min-width:769px) {
    .subject-list__detailed-wrap dd {
        -webkit-margin-start: 2.5rem;
        margin-inline-start: 2.5rem
    }
}

@media (max-width:767px) {
    .subject-list__detailed-wrap dd:last-of-type {
        margin-bottom: 0
    }
}

.single-subject__panel {
    background-color: var(--ehu-colors-neutral-white);
    color: var(--ehu-colors-text-black);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
    padding: .75rem;
    text-decoration: none;
    transition: all .3s ease-in-out 0s;
    border-left: .3125rem solid var(--ehu-colors-primary)
}

.single-subject__panel:focus,
.single-subject__panel:hover {
    transform: scale(1.05)
}

.ehu-list__simple .single-subject__panel:hover {
    background-color: var(--ehu-colors-primary)
}

.ehu-list__simple .single-subject__panel:hover .single-subject__degree-type,
.ehu-list__simple .single-subject__panel:hover .single-subject__subject-name {
    color: var(--ehu-colors-neutral-white)
}

.single-subject__subject-name {
    font-weight: 700;
    margin: 0;
    padding-bottom: 0;
    color: var(--ehu-colors-neutral-black)
}

.single-subject__degree-type {
    margin: 0;
    padding: 0;
    font-size: .875rem;
    color: var(--ehu-colors-primary)
}

.subject-list__grid-wrap .related__image-wrap img {
    width: 100%;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
    object-fit: cover
}

/*# sourceMappingURL=ehu-subject-list.css.map*/