/* Original Sportera covers in softly layered learning windows. */
.courses{max-width:1280px;position:relative;isolation:isolate}
.courses:before{content:'';position:absolute;inset:115px 0 185px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 15% 30%,#e0edf46b,transparent 44%),radial-gradient(ellipse at 85% 25%,#efdfeb54,transparent 45%);filter:blur(22px)}
.course-grid{gap:26px;grid-auto-columns:calc((100% - 78px)/4);padding:20px 0 28px;align-items:stretch;perspective:1200px}
.course-grid .course{--glass:#a4c9e1;--deep:#5987ad;--halo:#dcebf5;padding:12px 19px 22px;background:linear-gradient(150deg,#ffffffd9,var(--halo) 0%,#fdfbf7 68%);border:1px solid #ffffffd9;border-radius:26px;isolation:isolate;position:relative;box-shadow:0 14px 18px -20px var(--deep);transition:box-shadow .6s}
.course-grid .lavender{--glass:#c6b5df;--deep:#8e77ac;--halo:#eee5f5}.course-grid .green{--glass:#add0bd;--deep:#5d967d;--halo:#e1eee5}.course-grid .peach{--glass:#e9c6a3;--deep:#b08a62;--halo:#f6eadd}.course-grid .pink{--glass:#e0b2c9;--deep:#b57994;--halo:#f3e1ec}
.course-art{height:auto;aspect-ratio:16/10;position:relative;display:grid;place-items:center;margin:0 -10px 20px;perspective:800px}
.glass-window{position:absolute;inset:0;width:100%;height:100%;padding:7px;border-radius:22px;background:linear-gradient(140deg,#ffffffdb,var(--halo));border:1px solid #ffffffed;box-shadow:inset 1px 1px 3px #fff,3px 5px 0 -2px var(--glass),7px 12px 20px -15px var(--deep);transform:rotateY(-7deg) rotateX(3deg);transform-origin:center bottom;transition:transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .7s;z-index:1}
.glass-window img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#fdfbf7;border-radius:16px}
.window-glint{position:absolute;inset:1px;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:.3}.window-glint:after{content:'';position:absolute;top:-40%;left:-65%;width:45%;height:180%;background:linear-gradient(90deg,transparent,#fff,transparent);transform:rotate(28deg);transition:left 1s ease}
.course-grid .course-meta{font-size:8px;letter-spacing:.8px;align-items:center;margin:0 0 14px;color:var(--deep);gap:6px;min-height:27px}.course-grid .course-meta span{background:#ffffffad;color:#546d80;border-radius:20px;padding:4px 8px;font-size:10px;letter-spacing:0}
.course-grid .course h3{font-size:22px;line-height:1.23;letter-spacing:-.4px;margin:0 0 12px}.course-grid .course>p:not(.course-meta){font-size:13px;line-height:1.7;color:#617a8c;margin:0 0 22px}.course-grid .course>a{border:0;color:#496f8b;gap:12px;font-size:12px;padding:3px 0}.course>a>span{display:grid;place-items:center;border:1px solid #c9dbe4;border-radius:50%;width:25px;height:25px;transition:background .3s,transform .3s}.course-grid .course>a:hover>span{background:var(--halo);transform:translate(2px,-2px)}
.course-navigation{border-top:1px solid #dbe5e780;padding-top:12px;margin-top:0}.platform{margin-top:23px}
@media(hover:hover) and (pointer:fine){.course:hover .glass-window,.course:focus-within .glass-window{transform:translateY(-5px) rotateY(3deg) rotateX(0deg);box-shadow:inset 1px 1px 3px #fff,4px 7px 0 -3px var(--glass),10px 18px 24px -17px var(--deep)}.course:hover .window-glint:after,.course:focus-within .window-glint:after{left:135%}.course:hover{box-shadow:0 18px 22px -23px var(--deep)}}
@media(max-width:950px){.course-grid{gap:24px;grid-auto-columns:calc((100% - 24px)/2)}.course-grid .course{padding:12px 23px 22px}.course-grid .course h3{font-size:25px}.course-art{height:auto}}
@media(max-width:650px){.course-grid{gap:18px;grid-auto-columns:100%;padding-top:12px}.course-grid .course{padding:12px 21px 19px}.course-art{height:auto;margin-bottom:18px}.course-grid .course-meta{font-size:10px;margin-bottom:12px}.course-grid .course h3{font-size:25px}.course-grid .course>p:not(.course-meta){font-size:14px}.course-navigation{padding-top:12px}.courses:before{inset:180px 0 240px}}
@media(prefers-reduced-motion:reduce){.glass-window,.window-glint:after,.course,.course>a>span{transition:none}.course:hover .glass-window,.course:focus-within .glass-window{transform:none}}
