@media screen and (max-width: 1024px) {
    body {
        background-color: white;
    }
    section {
        background-color: transparent;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 20px 0px;
        width: auto;
	}
	h1 {
		margin: .25em auto 0;
	}
}

@media screen and (max-width: 600px) {
    h1 {
        background-color: white;
        font-size:  20px;
        letter-spacing: 3px;
        position: sticky;
        top: 0;
    }
    .btn-container {
        background-color: white;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 5px;
        padding-top: 5px;
        position: sticky;
        top: 0;
    }
    .btn-container .btn {
        flex: 1 1 100%;
        margin: 0;
        min-width: 0;
    }
    .btn-container .btn + .btn {
        margin-top: 10px;;
    }
    div {
        margin: auto;   
    }
    section {
        margin: 0 auto;
        max-width: 480px;
        min-height: 0;
        padding: 0;
        width: auto;
    }
    table {
        border: none;
		display: grid;
		grid-column-gap: 20px;
        grid-template-columns: 1fr 1fr;
    }
    tr, tbody, thead {
        display: contents;
    }
    
    th:nth-child(-n + 4) {
        background-color: #333;
        border: none;
        grid-column: span 2;
        margin-top: 5px;
        padding: 16px 0;
    }

    td {
        border: none;
        margin: 0;
        padding: 5px 0px;
    }

    td:nth-child(1) {
        grid-row:2
    }
   	td:nth-child(2) {
        grid-row:4
    }
      td:nth-child(3) {
        grid-row:6
    }
    td:nth-child(4) {
        grid-row:8
    }
    #img {
        background-repeat: no-repeat;
        height: 0px;
        padding-bottom: 22.5%;
        width: 40%;
    }
    table a {
        background-color: hsl(0 0% 90% / 1);
        border-radius: 4px;
        display: block;
        padding: .75em 0em;
    }
}

@media screen and (max-width: 480px) {
    a.btn {
        margin-left: .5rem;
        margin-right: .5rem;
    }
}


@media screen and (max-width: 320px) {
	.btn-container {
		display:flex;
        justify-content: initial;
    }
    .btn-container a {
		flex: 1 1 100%;
        margin-left:0;
        margin-right:0;
        min-width:0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media screen and (max-height: 420px) {
	section {
		padding: 5px 5px;
	}
	#img {
		background-size: contain;
		height: 0;
		margin: 0 auto;
		padding-bottom: 60px;
		width: calc(60px * 1.7);
	}
}